javascript - jQuery调整大小事件未触发

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.addEventListener("resize", function(){
    console.log('yeap worked for me!');
})

Answer 7

我遇到了同样的问题，看到了各种解决方案，但都没有奏效。

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

所以我现在的代码是：

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

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