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

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

---

您能同时打开/关闭两个滚动条吗？

既然您对jQuery开放，似乎可以做到这一点。

jQuery有一个解决方案：

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

    alert('resize');

});

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

为了UI响应性，您可以考虑使用SETTIMEOUT只在几毫秒之后调用您的代码，如下面的示例所示，其灵感来源于：

---

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

该插件可用

---

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

很抱歉，提出了一个旧线程，但是如果有人不想使用jQuery，您可以使用以下方法：

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

---

我认为你应该进一步控制这一点：

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

---

使用jQuery1.9.1，我刚刚发现，尽管在技术上完全相同，但这在IE10（但在Firefox）中不起作用：

//在IE10中不起作用
$（函数（）{
$（窗口）。调整大小（CmsContent.adjustSize）；
});

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

//在IE10中工作了吗
$（函数（）{
$（窗口）.bind（'resize'，function（）{
CmsContent.adjustSize（）；
};
});

编辑：

---

)*实际上，在技术上不完全相同，如和的注释中所述。

jQuery

提供了

$（窗口）。默认情况下，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> 

//用于调整div/span元素大小的函数
变量$window=$（window），
$rightPanelData=$（'.rightPanelData'）
$leftPanelData=$（'.leftPanelData'）；
//jQuery窗口调整调用/事件大小
$window.resize（函数resizeScreen（）{
//log（“窗口正在调整大小”）；
//在这里，我正在调整我的div班级高度
$rightPanelData.css（'height'，$window.height（）-166）；
$leftPanelData.css（'height'，$window.height（）-236）；
});

以下是点击resize事件的非jQuery方式：

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

---

它适用于所有现代浏览器。它不会为你做任何事。它在行动中的作用

希望它对jQuery有所帮助

首先定义函数，如果存在现有函数，则跳到下一步

 function someFun() {
 //use your code
 }

浏览器大小调整使用如下

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

---

除了上面提到的窗口大小调整功能外，重要的是要理解，如果使用调整大小事件时没有对事件进行去边界处理，则会触发很多事件

Paul Irish有一个很好的功能，可以消除大量的噪音。非常推荐使用。跨浏览器工作。前几天在IE8中进行了测试，一切正常

一定要看到区别

下面是完整性函数

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

---

我也在调查这件事。我想尝试应用这里提供的解决方案，但恐怕我不理解语法：$（窗口）。这是jquery特有的吗？Byff，是的，$（窗口）是一个jquery构造。window.onresize在原始JavaScript中是等效的。这个演示可以帮助任何人在所有浏览器上测试

window.dispatchEvent（新事件（'resize'））

在手机上的Opera上，每次显示/隐藏顶栏（浏览器UI）时都会触发此事件。为什么在使用按钮将窗口扩展到全屏时不触发此事件？@Sly对我来说，它在Mac上的Safari、Chrome和Mozilla中都能工作。您使用哪种浏览器？@Sly:

$（'.button'）。在（{click:function（）{/*您的代码*/$（window.trigger（'resize'））上

Elijah，这是JavaScript。您编写的内容不正确（使用new构建时的一个特定情况除外）。值得一提的是，这个jQuery函数“添加”对在调整窗口大小时应调用的函数的当前列表的函数调用。它不会覆盖当前在调整窗口大小时计划的现有事件。我更喜欢绑定方法，因为resize（）方法实际上是完全绑定方法的快捷方式，我经常发现我应该对元素应用多个事件处理程序。@Mike-不仅如此，我猜resize方法在要删除侦听器的事件中没有“unbind”方法。“bind”这绝对是正确的做法！请注意，这将破坏任何可能绑定到window.onresize的现有处理程序。如果您的脚本必须与其他脚本一起生活在一个生态系统中，您不应该假设您的脚本是唯一一个希望在window resize上执行操作的脚本。如果您不能使用诸如jQuery之类的框架，您至少应该：IDER抓取现有窗口.OnReSead，并将处理程序添加到它的末尾，而不是完全阻塞它。@ TomAuger“至少应该考虑抓取现有的窗口。OnReSead，并将处理程序添加到它的末尾”——可能是相反的，即“在处理程序结束时调用现有的处理程序”。？我真的很想看到一个javascript代码，它可以在已经存在的函数末尾添加一些东西：-）我明白你的观点，在某种意义上-你的新onResize处理程序需要包装现有的onResize。但是，它不需要调用你想添加到onResize的函数，直到它调用了原始的onResize处理程序。所以你仍然可以确保新的onResize函数在原始onResize函数之后执行，这可能比原来的onResize函数好。有两个更改。哪一个更改有效？（

.resize（）

到

.bind（'resize'）

或添加匿名函数？我想这是第二个。）@WraithKenny的观点很好。很可能是添加匿名函数才使其工作。我不记得我是否尝试过它。在第一种情况下，

广告
(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...
});