跨浏览器窗口大小调整事件 - JavaScript / jQuery

Posted 2023-02-21

【中文标题】跨浏览器窗口大小调整事件 - JavaScript / jQuery

【英文标题】：Cross-browser window resize event - JavaScript / jQuery

【发布时间】：2010-10-10 14:26:17

【问题描述】：

在 Firefox、WebKit 和 Internet Explorer 中点击窗口调整大小事件的正确（现代）方法是什么？

你能打开/关闭两个滚动条吗？

【问题讨论】：

我也在调查这个。我想尝试应用这里提供的解决方案，但恐怕我不懂语法：$(window)。这是 jquery 特有的吗？

拜夫，是的，$(window) 是一个 jQuery 结构。 window.onresize 是原始 javascript 中的等价物。

这个演示可以帮助任何人在所有浏览器上进行测试jsfiddle.net/subodhghulaxe/bHQV5/2

window.dispatchEvent(new Event('resize')); ***.com/questions/1818474/…

在移动设备上的 Opera 上，每次顶部栏（浏览器 UI）显示/隐藏时都会触发。

【参考方案1】：

jQuery 对此有一个built-in method：

$(window).resize(function ()  /* do something */ );

为了 UI 响应，您可以考虑使用 setTimeout 仅在几毫秒后调用您的代码，如以下示例所示，灵感来自 this：

function doSomething() 
    alert("I'm done resizing for the moment");
;

var resizeTimer;
$(window).resize(function() 
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doSomething, 100);
);

【讨论】：

为什么当窗口通过按钮扩展到全屏时不会触发此事件？

@Sly 对我来说，它适用于 Mac 上的 Safari、Chrome 和 Mozilla。你用什么浏览器？

@Sly: $('.button').on( click: function() /* your code */ $(window).trigger('resize') )

以利亚，这是 JavaScript。你写的不正确（除了一种特殊情况，当你用 new 构建时）。

值得一提的是，这个 jQuery 函数“添加”了一个函数调用到当前在调整窗口大小时应该调用的函数列表。它不会覆盖当前在调整窗口大小时安排的现有事件。

【参考方案2】：

$(window).bind('resize', function ()  

    alert('resize');

);

【讨论】：

我更喜欢绑定方法，因为 resize() 方法实际上是完整绑定方法的一种快捷方式，而且我经常发现我应该 应用于元素。

@Mike - 不仅如此，我猜如果你想删除监听器，resize 方法没有“取消绑定”方法。 “绑定”绝对是要走的路！

【参考方案3】：

这是利用 resize 事件的非 jQuery 方式：

window.addEventListener('resize', function(event)
  // do stuff here
);

它适用于所有现代浏览器。它确实不会为您节流任何东西。 Here is an example 在行动中。

【讨论】：

此解决方案无法在 IE 中运行。支持 IE dom 的固定版本：***.com/questions/6927637/…

> 它不会为您限制任何东西。你能详细说明一下吗？它应该/会节流什么？是否与事件连续触发多次有关？

@josinalvo 通常，当您收听触发很多的事件时，您会想要debounce (e.g. lodash) 它，这样您就不会在程序中造成瓶颈.

【参考方案4】：

很抱歉提出一个旧线程，但如果有人不想使用 jQuery，你可以使用这个：

function foo()....;
window.onresize=foo;

【讨论】：

请注意，这将破坏任何可能绑定到 window.onresize 的现有处理程序。如果您的脚本必须与其他脚本一起生活在一个生态系统中，那么您不应该假设您的脚本是唯一想要在窗口调整大小上做某事的脚本。如果你不能使用 jQuery 之类的框架，你至少应该考虑抓取现有的 window.onresize，并将你的处理程序添加到它的末尾，而不是完全破坏它。

@TomAuger “你至少应该考虑抓取现有的 window.onresize，并将你的处理程序添加到它的末尾” - 你的意思可能相反，即“to在处理程序结束时调用现有处理程序”？我真的很想看到一个 javascript 代码，它会在已经存在的函数的末尾添加一些东西:-)

我明白你的意思，从某种意义上说 - 你的新 onResize 处理程序需要包装现有的 onResize。但是，在它调用原始 onResize 处理程序之前，它不必调用您要添加到 onResize 的函数。所以你仍然可以确保你的新 onResize 函数在原始 onResize 函数之后执行，这可能比反过来更好。

【参考方案5】：

由于您对 jQuery 持开放态度，this plugin 似乎可以解决问题。

【参考方案6】：

使用 jQuery 1.9.1 我刚刚发现，虽然技术上相同）*，但这在 IE10 中不起作用（但在 Firefox 中）：

// did not work in IE10
$(function() 
    $(window).resize(CmsContent.adjustSize);
);

虽然这在两种浏览器中都有效：

// did work in IE10
$(function() 
    $(window).bind('resize', function() 
        CmsContent.adjustSize();
    ;
);

编辑： )* 实际上不在技术上相同，正如 WraithKenny 和 Henry Blyth 在 cmets 中指出和解释的那样。

【讨论】：

有两个变化。哪个有效果？ （.resize() 到 .bind('resize') 或添加匿名函数？我认为这是第二个。）

@WraithKenny 好点。很可能是添加匿名函数使它起作用。我不记得我是否尝试过。

在第一种情况下，adjustSize 方法丢失了 this 的上下文，而第二次调用 CmsContent.adjustSize() 保留了this，即this === CmsContent。如果adjustSize 方法中需要CmsContent 实例，则第一种情况将失败。第二种情况适用于各种函数调用，因此建议始终传递匿名函数。

@HenryBlyth 谢谢！ +1

【参考方案7】：

jQuery默认提供$(window).resize()函数：

<script type="text/javascript">
// function for resize of div/span elements
var $window = $( window ),
    $rightPanelData = $( '.rightPanelData' )
    $leftPanelData = $( '.leftPanelData' );

//jQuery window resize call/event
$window.resize(function resizeScreen() 
    // console.log('window is resizing');

    // here I am resizing my div class height
    $rightPanelData.css( 'height', $window.height() - 166 );
    $leftPanelData.css ( 'height', $window.height() - 236 );
);
</script> 

【参考方案8】：

我认为 jQuery 插件“jQuery resize event”是解决此问题的最佳解决方案，因为它负责限制事件，使其在所有浏览器中都能正常工作。它类似于 Andrews 的回答，但更好，因为您可以将调整大小事件挂钩到特定元素/选择器以及整个窗口。它为编写干净的代码开辟了新的可能性。

插件可用here

如果添加大量侦听器会出现性能问题，但对于大多数用例来说它是完美的。

【参考方案9】：

我认为您应该对此添加进一步的控制：

    var disableRes = false;
    var refreshWindow = function() 
        disableRes = false;
        location.reload();
    
    var resizeTimer;
    if (disableRes == false) 
        jQuery(window).resize(function() 
            disableRes = true;
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(refreshWindow, 1000);
        );
    

【参考方案10】：

希望对 jQuery 有所帮助

先定义一个函数，如果已有函数跳到下一步。

 function someFun() 
 //use your code
 

像这样使用浏览器调整大小。

 $(window).on('resize', function () 
    someFun();  //call your function.
 );

【参考方案11】：

除了提到的窗口调整大小函数之外，重要的是要了解，如果在没有消除事件的情况下使用调整大小事件会触发很多。

Paul Irish 有一个出色的功能，可以很好地消除调整大小调用的抖动。非常推荐使用。跨浏览器工作。前几天用IE8测试了一下，一切正常。

http://www.paulirish.com/2009/throttled-smartresize-jquery-event-handler/

请务必check out the demo 了解差异。

这里是完整的函数。

(function($,sr)

  // debouncing function from John Hann
  // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
  var debounce = function (func, threshold, execAsap) 
      var timeout;

      return function debounced () 
          var obj = this, args = arguments;
          function delayed () 
              if (!execAsap)
                  func.apply(obj, args);
              timeout = null;
          ;

          if (timeout)
              clearTimeout(timeout);
          else if (execAsap)
              func.apply(obj, args);

          timeout = setTimeout(delayed, threshold || 100);
      ;
  
  // smartresize 
  jQuery.fn[sr] = function(fn)  return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); ;

)(jQuery,'smartresize');


// usage:
$(window).smartresize(function()
  // code that takes it easy...
);