jQuery：检测浏览器大小调整

发布于 2024-08-17 10:10:02 字数 461 浏览 6 评论 0原文

我正在使用 snipplr 的这个脚本，我该如何设置它，使容器 div 比 newWindowHeight 高度小 100px，比如 -100 之类的。

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>

原文

I am using this script from snipplr, How would I set it so the container div is 100px less than the newWindowHeight height, like -100 or something.

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

//If the User resizes the window, adjust the #container height
$(window).bind("resize", resizeWindow);
function resizeWindow( e ) {
    var newWindowHeight = $(window).height();
    $("#container").css("max-height", newWindowHeight );
}

});         
</script>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

深海蓝天 2024-08-24 10:10:02

您发现的脚本使问题过于复杂。以下内容对我有用：

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

一个警告是，调整浏览器大小时会多次调用调整大小事件；它不仅仅是在浏览器调整大小后调用。因此，您可能会调用回调函数数百次 - 这通常是一个坏主意。

解决方案是限制或消除事件。限制意味着您不会让回调在一段时间内被触发超过 x 次（也许每秒 5 次）。去抖动意味着您在上次调整大小事件过去一定时间后触发回调（等到调整大小事件后 500 毫秒）。

jQuery 目前不支持节流或反跳选项，尽管有插件。您可能使用过的其他流行库确实具有这些功能，例如下划线：

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});

The script you found over-complicated the issue. The following worked for me:

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Call updateMaxHeight when browser resize event fires
    $(window).on("resize", updateMaxHeight);

});

One warning is that the resize event gets called a lot when resizing the browser; it's not just called after the browser has been resized. As a result, you could have the callback function being called hundreds of times - this is generally a bad idea.

The solution would be to throttle, or debounce the event. Throttling means you won't let the callback be fired more than x times in a span of time (maybe 5 times a second). Debouncing means you fire the callback after a certain span of time has passed from the last resize event (wait until 500 milliseconds after a resize event).

jQuery doesn't presently support a throttle or debounce option, though there are plugins. Other popular libraries you may have used do have these features, such as underscore:

$(function(){

    // Cache reference to our container
    var $container = $("#container");

    // A function for updating max-height
    function updateMaxHeight () {
        $container.css("max-height", $(this).height() - 100);
    }

    // Version of updateMaxHeight that will run no more than once every 200ms
    var updateMaxHeightThrottled = _.throttle(updateMaxHeight, 200);

    // Call updateMaxHeightThrottled when browser resize event fires
    $(window).on("resize", updateMaxHeightThrottled);

});

回复收藏 0 原文

中二柚 2024-08-24 10:10:02

我刚刚看到了名为“onResize”的 HTML 事件，该事件属于特定标签
我认为使用这种用法它将比 java 检测具有更高的性能。

<body onresize="functionhere()">

我希望它能帮助你们。

I have just seen the HTML event called "onResize" which belongs to especially tag
It will have more performance then java detection with this usage I think.