jQuery的resize在FireFox、Chrome和Safari上无法工作

Question

$("#dvMyDIV").bind("resize", function(){
    alert("Resized");
});

或

$("#dvMyDIV").resize(function(){
    alert("Resized");
});

问题：

1. 为什么这在FireFox、Chrome和Safari上不能工作？
2. 如果对其他浏览器没有进行调整大小，这是否可以被视为jQuery的漏洞？
3. 唯一的解决方法是调用一个SetTimeout函数来检查clientHeight和clientWidth吗？
4. 是否有使用jQuery的解决方法？

- naveen

Answer 1

我认为JavaScript的resize事件只适用于框架或窗口，而不适用于DIV。

例如，请参阅此页面：

onResize事件处理程序用于在用户或脚本调整窗口或框架大小时执行指定的代码。这允许您查询窗口元素的大小和位置、动态重置SRC属性等。

因此，如果您想检测窗口何时被调整大小，在jQuery中，您应该使用$(window).resize(function() { }); 编辑：如果您想监视DIV的大小，则取决于您的意图。如果您正在使用JavaScript调整大小，那么您可以实现一种方法来执行调整大小，并让它处理调用任何其他调整大小的代码。

否则，如果您只是希望在某人调整窗口大小时观察DIV是否调整大小，那么将调整大小侦听器附加到窗口并检查DIV是否已调整大小（即存储宽度/高度的旧值并在调整大小时检查它们）是否有效？

最后，您可以考虑在宽度/高度属性上使用watch，尽管我不知道这是否完全兼容浏览器（我认为这可能仅适用于Mozilla）。我找到了此jQuery插件，看起来可能做同样的事情（稍作修改）。

- user7094

---

OP可能想要下面提到的Ben Alman调整大小插件。 - Stijn de Witt

Answer 2

这个问题有一个Benalman插件可以解决 :) http://benalman.com/projects/jquery-resize-plugin/

- Aamir Afridi

Answer 3

你想要将myDiv设置为特定的大小吗？

尝试下面的JavaScript代码。我用它来调整包含Flash对象的div的大小，基于从Flash文件返回的高度，对我来说似乎工作得很好。

function setMovieHeight(value) {
    var height = Number(value) + 50;
document.getElementById("video").height = height;
}

jQuery 的等效代码应该是：

function setHeight(value) {
   var height =  number(value) + 50;
   $('#MyDiv').attr('height') = height;
}

resize 似乎只适用于 windows 对象。

- Matt Goddard

Answer 4

问题不是为什么？而是我们需要，也就是说，我们想要在 DIV 被调整大小时监视它。

举个显而易见的例子，jQuery UI 的 resizable。是的，用户通过鼠标拖动调整了 div 的大小，现在怎么办？也许里面的内容被调整了，我们想知道这一点。难道我们应该把所有的代码都放在原始调整大小的代码中吗？我不这么认为。

又是一个什么都不做的快速浏览器，唉。

- BoBoDev

Answer 5

为什么您期望 #dvMyDIV 被调整大小？也许该元素的调整大小是由其他原因引起的，比如窗口大小被调整了？如果是这样，请尝试

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

- Svante Svenson

Answer 6

在MSIE中一切运行正常，但在Firefox中，我想您将不得不采用一些间接的技巧，如将元素的原始宽度/高度存储在自定义属性中，然后使用$(elem).bind('DOMAttrModified', func)。然后，在func()回调中，检查新宽度/高度是否与之前存储的不同，采取相应的调整操作并再次存储它们以供下一个事件回调使用。请注意，这种方法仅适用于Firefox。我还没有能够找到Chrome、Safari和Opera的好的解决方法。也许使用window.setInterval()会有所帮助，但...听起来太草率了...甚至想到它就让我有点恶心:（

- Ludmil Tinkov

Answer 7

这里有一个更加精细和实时的例子，它基于窗口大小调整事件进行了大量的调整数学计算。在ff 3.6、safari 4.0.4和chrome中表现出色。在ff 3.5中有点卡顿。因此，它应该可以在mozilla和webkit上运行。我避免使用其他浏览器，因为我真的不喜欢它，而且如果不考虑它，代码会更加清晰。我意识到我必须克服这一点，在IE附加费用方面我也要接受。

无论如何，这是链接：

http://fridaydev.com/bookmap/proport3.html

- Chad

Answer 8

我可以建议这样做：

1）在页面加载时，获取您的div的宽度并将其放入全局变量中。

2）在执行任何直接或间接调整该div大小的操作（我假设是由JavaScript驱动的事件）时，检查新宽度与旧宽度，并使用新宽度更新全局值。

- Cirieno