Question

无论出于何种原因：

$(function() {
  $(window).resize(function() {
    alert("resized!");
  });
});

仅在加载页面时触发事件。调整浏览器窗口的大小在Safari和Firefox中都不起作用。我没有在任何其他浏览器上尝试过它。

任何想法或解决方法？

Answer 1

最好避免附加可能产生大量触发的事件，例如窗口调整大小和正文滚动，从这些事件中泛滥的更好方法是使用计时器并验证偶数是否已经发生，然后执行正确的行动，如下：

$(function() {
    var $window = $(window);
    var width = $window.width();
    var height = $window.height();

    setInterval(function () {
        if ((width != $window.width()) || (height != $window.height())) {
            width = $window.width();
            height = $window.height();

            alert("resized!");
        }
    }, 300);
});

使用计时器执行此操作的另一个好处是您可以完全控制检查的频率，如果您必须考虑页面中的任何其他功能，则可以灵活使用

Answer 2

我认为您的提醒会导致问题，请尝试此操作

 $(window).resize(function() {
   $('body').prepend('<div>' + $(window).width() + '</div>');
 });

jsfiddle

Answer 3

适用于任何浏览器：

http://jsbin.com/uyovu3/edit#preview

$(window).resize(function() {
  $('body').prepend('<div>' + $(window).width() + '</div>');
});

Answer 4

5年后......

我遇到此问题的唯一浏览器是Chrome;我没有Safari。

我注意到的模式是当我内联代码时它可以工作：

<script type="text/javascript">
    $(window).resize(function(e) { console.log("resize inline", +new Date()) });
</script>

但不当我把它放在我加载的单独的Javascript文件中时：

<script type="text/javascript" src="/js/resized.js"></script>

脚本包含

console.log('script loaded');
$(window).resize(function(e) { console.log("resize in script file", +new Date()) });

我只能猜测这是Chrome开发团队内置的某种“保护”，但它很愚蠢而烦人。至少他们可以让我绕过这个使用一些“相同的域名政策”。

更新一段时间我以为使用$(document).ready()修复了它，但显然我错了。

Answer 5

尝试

$(document).resize(function(){ ... };);

我认为它的文档会在浏览器中一致地激活大小调整。但我现在不在工作，检查我通常做的事情。

Answer 6

我遇到了同样的问题，看到了所有类型的解决方案而且没有用。

进行一些测试我注意到$（window）.resize，至少在我的情况下，只会在它之前用$（document）.ready（）触发。不是$（function（））;也不是$（窗口）.ready（）;

所以我的代码现在是：

$(document).ready(function(){
  $(window).resize(function(){
      // refresh variables
      // Apply variables again
  });
});

......甚至是警觉工作！

Answer 7

尝试此代码。

window.addEventListener("resize", function(){
    console.log('yeap worked for me!');
})

jQuery调整大小事件没有触发

7 个答案: