Question

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

或

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

问题

为什么这不适用于FireFox，Chrome和Safari？
这可以被视为jQuery错误，因为其他浏览器没有处理调整大小吗？
唯一可行的方法是调用SetTimeout函数来检查clientHeight和clientWidth吗？
使用jQuery的任何变通方法吗？

Answer 1

我认为JavaScript调整大小事件仅适用于帧或窗口，而不适用于DIV。

e.g。见this page：

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

因此，如果你想检测窗口调整大小的时间，在jQuery中你应该使用$(window).resize(function() { });

编辑：如果您想观看DIV的大小，则取决于您的意图。如果您正在使用JavaScript进行大小调整，那么您可以实现一个方法来执行调整大小并让该句柄调用任何其他调整大小代码。

否则，如果你只是在某人调整窗口大小时正在观察DIV调整大小，那么它是不是只能将调整大小监听器附加到窗口然后检查DIV是否已调整大小（即存储旧的宽度/高度值并在调整大小时检查它们？

最后，你可以考虑在宽度/高度属性上使用watch，虽然我不知道这是否完全与浏览器兼容（想想这可能只是Mozilla）。我确实发现this jQuery plugin看起来可能会做同样的事情（稍作修改）。

Answer 2

有一个benalman插件：）

http://benalman.com/projects/jquery-resize-plugin/

Answer 3

您是否尝试将myDiv设置为特定尺寸？

尝试下面的JavaScript代码。我用它来调整一个div，它根据从flash文件返回的高度来保存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;
}

调整大小似乎只适用于windows对象。

Answer 4

这不是问题为什么？要求，我们希望在调整DIV大小时监视它。

对于明显的例子，jQuery UI，可调整大小。是的，用户通过鼠标拖动调整div，现在是什么？也许内部的内容调整大小，我们想知道它。我们是否应该在最初的reszing代码中将所有代码放在一个巨大的熔炉中？我不这么认为。

另一个没有任何作用的快速浏览器，感叹。

Answer 5

为什么期望调整#dvMyDIV的大小？可能是因为其他原因导致该元素的大小调整，也许窗口正在调整大小？如果是这样，请尝试

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

Answer 6

我可能会建议这样的事情：

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

2）执行任何操作时直接或隐式调整div的大小（我假设是一个javascript驱动的事件）检查新宽度与旧宽度，并用新宽度更新全局值。

Answer 7

这是一个更加精致和实际的示例，它根据窗口调整大小事件执行大量调整大小数学运算。在ff 3.6，safari 4.0.4和chrome中出色地工作。在ff 3.5中它有点厚实。因此它应该在整个板上的mozilla和webkit中工作。我避开了其他浏览器，因为我真的不喜欢它，并且代码是如此清晰而不必考虑它。我意识到我必须克服这个问题，当我不得不接受和IE附加费时，我会吞下它。

无论如何，链接：

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

Answer 8

使用MSIE一切正常。使用Firefox，我猜你将不得不求助于一些倾斜的技术，例如在自定义属性中存储元素的原始宽度/高度并使用$(elem).bind('DOMAttrModified', func)。然后在func（）回调中，检查新宽度/高度是否与先前存储的宽度/高度不同，采取相应的调整大小操作并再次存储它们以用于下一个事件回调。请注意，此方法仅适用于Firefox。我还没有为Chrome，Safari和Opera找到合适的解决方法。也许使用window.setInterval（）会做但是......听起来太过邋... ...想到这件事让我有点生病:(

jQuery调整大小不适用于FireFox，Chrome和Safari

8 个答案: