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


240

使用Firefox,WebKit和Internet Explorer 的窗口调整大小事件的正确(现代)方法是什么?

并且可以打开/关闭两个滚动条吗?


我也在调查这个。我想尝试应用此处提供的解决方案,但恐怕我不理解语法:$(window)。那是jquery特有的吗?
2011年

1
拜夫,是的,$(window)是一个jQuery构造。window.onresize与原始JavaScript中的等效。
Andrew Hedges

该演示可以帮助任何人在所有浏览器上进行测试jsfiddle.net/subodhghulaxe/bHQV5/2
Subodh Ghulaxe 2013年

window.dispatchEvent(new Event('resize')); stackoverflow.com/questions/1818474/...
迪伦瓦拉德

在移动设备上的Opera上,每次显示/隐藏顶部栏(浏览器UI)时都会触发该事件。
psur

Answers:


367

jQuery 为此提供了一个内置方法

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

对于用户界面的响应起见,你可以考虑使用的setTimeout只有经过数毫秒打电话给你的代码,如下面的例子,启发这样

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

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

34
当使用按钮将窗口扩展到全屏时,为什么不触发此事件?
狡猾的

2
@Sly对我来说,可以在Mac上的Safari,Chrome和Mozilla中使用。您使用哪个浏览器?
Mark Vital 2012年

2
@Sly:$('.button').on({ click: function(){ /* your code */ $(window).trigger('resize') })
Zack Zatkin-Gold

6
以利亚,这是JavaScript。您编写的内容不正确(当您使用new进行构造时,只有一种情况除外)。
2013年

3
值得一提的是,此jQuery函数将函数调用“添加”到当前应在窗口调整大小上调用的函数列表中。它不会覆盖当前在窗口调整大小上计划的现有事件。
RTF 2015年

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

    alert('resize');

});

4
我更喜欢绑定方法,因为resize()方法实际上实际上是完全绑定方法的快捷方式,而且我经常发现通常应将多个事件处理程序应用于一个元素。
Mike Kormendy 2012年

@Mike-不仅如此,我想如果您想删除监听器,则resize方法没有“ unbind”方法。“绑定”绝对是要走的路!
Shane

43

这是利用jQuery调整大小事件的非jQuery方法:

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

它适用于所有现代浏览器。它不是油门东西给你。这是一个实际的例子


此解决方案无法在IE中使用。支持IE dom的固定版本: stackoverflow.com/questions/6927637/…–
Sergey

1
>它不会为您节流任何东西。您能详细说明一下吗?它应该/将节流什么?它与事件连续触发多次有关吗?
josinalvo

通常,@ josinalvo在您收听触发大量事件的事件时,需要对它进行去抖动(例如lodash),以免在程序中造成瓶颈。
乔德姆

17

抱歉,调出一个旧线程,但是如果有人不想使用jQuery,则可以使用以下方法:

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

8
请注意,这将破坏可能绑定到window.onresize的所有现有处理程序。如果您的脚本必须与其他脚本一起生活在一个生态系统中,则不应假定您的脚本是唯一要对窗口大小进行某些操作的脚本。如果不能使用jQuery之类的框架,则至少应考虑获取现有的window.onresize,并将处理程序添加到它的末尾,而不是完全破坏它。
汤姆·奥格

2
@TomAuger “您至少应该考虑获取现有window.onresize,并将其处理程序添加到它的末尾” -您可能是相​​反的意思,即“在处理程序末尾调用现有处理程序”?我真的很想看到一个javascript代码,它将在已有功能的末尾添加一些内容:-)
TMS

从某种意义上来说,我明白了您的意思-您的新onResize处理程序需要包装现有的onResize。但是,在调用原始onResize处理程序之前,不必调用要添加到onResize的函数。因此,您仍然可以确保新的onResize函数在原始onResize函数之后执行,这可能比反向操作更好。
Tom Auger 2014年


5

使用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();
    };
});

编辑:
)*实际上技术上并不相同,正如WraithKennyHenry Blyth的评论中所指出和解释的那样。


1
有两个变化。哪一个产生了效果?(.resize().bind('resize')添加匿名函数还是要添加匿名函数?我想是第二个。)
WraithKenny 2014年

@WraithKenny好点。很好的可能是添加了匿名功能才使其起作用。我不记得是否尝试过。
2014年

1
在第一种情况下,该adjustSize方法将失去其的上下文this,而第二种调用将CmsContent.adjustSize()保留this,即this === CmsContent。如果方法中CmsContent需要实例adjustSize,则第一种情况将失败。第二种情况适用于所有类型的函数调用,因此建议始终传递匿名函数。
亨利·布莱斯

1
@HenryBlyth谢谢!+1
bassim

4

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> 

3

我认为jQuery插件“ jQuery调整大小事件”是对此的最佳解决方案,因为它可以对事件进行节流,以便在所有浏览器中都可以正常工作。它类似于Andrews的答案,但更好,因为您可以将resize事件挂接到特定的元素/选择器以及整个窗口。它为编写干净的代码开辟了新的可能性。

该插件在这里可用

如果添加大量侦听器,则会出现性能问题,但是对于大多数使用情况而言,它是完美的。


0

我认为您应该对此进行进一步的控制:

    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);
        });
    }

0

希望对jQuery有帮助

如果已有功能,请先定义一个功能,然后跳到下一步。

 function someFun() {
 //use your code
 }

浏览器调整这些尺寸。

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

0

除了提到的窗口调整大小功能外,重要的是要了解如果使用调整大小事件时会触发很多事件,而又不会使事件发生冲突。

保罗·爱尔兰(Paul Irish)具有出色的功能,可以很好地消除调整大小的声音。强烈建议使用。跨浏览器工作。前几天在IE8中对其进行了测试,一切都很好。

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

请务必查看演示以查看区别。

这是完整性的功能。

(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...
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.