jQuery 调整大小在 FireFox、Chrome 和 Safari 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/229010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery resize not working at FireFox, Chrome and Safari
提问by naveen
$("#dvMyDIV").bind("resize", function(){
alert("Resized");
});
or
或者
$("#dvMyDIV").resize(function(){
alert("Resized");
});
The questions
问题
- Why is this not working at FireFox, Chrome and Safari?
- Can this be considered a jQuery bug since the resize is not handled for other browsers?
- Could the only workaround be calling a SetTimeout function checking the clientHeight and clientWidth?
- Any workarounds using jQuery?
- 为什么这在 FireFox、Chrome 和 Safari 上不起作用？
- 这是否可以被视为 jQuery 错误，因为其他浏览器未处理调整大小？
- 唯一的解决方法是调用 SetTimeout 函数检查 clientHeight 和 clientWidth 吗？
- 使用 jQuery 的任何解决方法？
回答by
I believe the JavaScript resize event only applies to frames or windows, not to DIVs.
我相信 JavaScript 调整大小事件仅适用于框架或窗口，而不适用于 DIV。
e.g. see this page:
例如看到这个页面：
The onResize even handler is use to execute specified code whenever a user or script resizes a window or frame. This allows you to query the size and position of window elements, dynamically reset SRC properties etc.
onResize 偶数处理程序用于在用户或脚本调整窗口或框架大小时执行指定的代码。这允许您查询窗口元素的大小和位置，动态重置 SRC 属性等。
So if you want to detect when the window is resized, in jQuery you should probably use $(window).resize(function() { });
因此，如果您想检测窗口何时调整大小，则在 jQuery 中您可能应该使用 $(window).resize(function() { });
Edit:if you want to watch the size of a DIV, it depends on what your intention is. If you're resizing with JavaScript then you could implement a method to perform the resize and have that handle calling any other resize code.
编辑：如果您想观看 DIV 的大小，则取决于您的意图。如果您使用 JavaScript 调整大小，那么您可以实现一个方法来执行调整大小并让该处理调用任何其他调整大小代码。
Otherwise, if you're just watching for the DIV to resize when someone resizes the window, wouldn't it just work to attach the resize listener to the window and then check if the DIV had been resized (i.e. store the old values of width / height and check them on resize)?
否则，如果您只是在有人调整窗口大小时观察 DIV 调整大小，那么将调整大小侦听器附加到窗口然后检查 DIV 是否已调整大小（即存储宽度的旧值） / 高度并在调整大小时检查它们）？
Finally, you could consider using watchon the width / height properties, although I don't know whether this is fully browser-compatible (think this might be Mozilla-only). I did find this jQuery pluginwhich looks like it might do the same thing though (with some slight modification).
最后，您可以考虑在宽度/高度属性上使用watch，尽管我不知道这是否与浏览器完全兼容（认为这可能仅适用于 Mozilla）。我确实找到了这个 jQuery 插件，它看起来可能会做同样的事情（稍作修改）。
回答by Aamir Afridi
There is a benalman plugin for that :)
有一个 benalman 插件:)
回答by BoBoDev
It is not the question WHY? It is Demanded, as in, we WANT to monitor a DIV when it is resized.
这不是WHY的问题吗？它是必需的，因为我们希望在调整大小时监视 DIV。
For obvious example, jQuery UI, resizable. Yeah, user resized a div by mouse drag, now what? Maybe the content inside is resized and we want to know about it. And should we have all the code in a giant melting pot within the original reszing code? I don't think so.
例如，jQuery UI，可调整大小。是的，用户通过鼠标拖动调整了 div 的大小，现在怎么办？也许里面的内容被调整了大小，我们想知道它。我们是否应该将所有代码放在原始调整代码中的一个巨大熔炉中？我不这么认为。
Another speedy browser that does nothing, sigh.
另一个什么都不做的快速浏览器，叹息。
回答by Matt Goddard
Are you trying to set myDiv to a specific size?
您是否尝试将 myDiv 设置为特定大小？
Try the JavaScript code below. I used it for resizing a div which holds a flash object based upon a height being returned from the flash file and it seemed to work okay for me.
试试下面的 JavaScript 代码。我用它来调整一个 div 的大小，该 div 包含一个基于从 flash 文件返回的高度的 flash 对象，它似乎对我来说工作正常。
function setMovieHeight(value) {
var height = Number(value) + 50;
document.getElementById("video").height = height;
}
the jQuery equivilent should be:
jQuery equivilent 应该是：
function setHeight(value) {
var height = number(value) + 50;
$('#MyDiv').attr('height') = height;
}
resize does only seem to apply to the windows object.
调整大小似乎只适用于 windows 对象。
回答by Chad
Here is a much more refined and a live example that does a lot of resize math all based on the window resize event. Works brilliantly in ff 3.6, safari 4.0.4, and chrome. It is a little chunky in ff 3.5. So thus it should work in mozilla and webkit across the boards. I avoid the other BROWSER, because I really do not like it, and the code is so much cleaner without having to consider it. I realize that I will have to get over that, I swallow it when I have to with and IE surcharge.
这是一个更精致的现场示例，它根据窗口调整大小事件进行了大量调整大小数学运算。在 ff 3.6、safari 4.0.4 和 chrome 中表现出色。它在 ff 3.5 中有点笨拙。因此，它应该在 mozilla 和 webkit 中全面工作。我避免使用其他 BROWSER，因为我真的不喜欢它，而且代码更清晰，无需考虑。我意识到我将不得不克服这一点，当我不得不和 IE 附加费时，我吞下了它。
ANYWAY the link:
无论如何链接：
回答by svinto
Why do you expect #dvMyDIV to be resized? Is maybe resizing of that element a result of something else, maybe the window being resized? If so, try
为什么您希望调整#dvMyDIV 的大小？调整该元素的大小可能是其他原因的结果，也许是窗口正在调整大小？如果是这样，请尝试
$(window).resize(function(){alert("Resized");});
回答by Cirieno
I might suggest something like this:
我可能会建议这样的事情：
1) on page load, get width of your div and put it in a global variable
1) 在页面加载时，获取 div 的宽度并将其放入全局变量中
2) on execution of whatever operation directly or implicitly resizes that div (which I assume is a javascript-driven event) check the new width against the old width and update the global value with the new width.
2) 在执行任何直接或隐式调整该 div 大小的操作时（我认为这是一个 javascript 驱动的事件），根据旧宽度检查新宽度并使用新宽度更新全局值。
回答by Ludmil Tinkov
With MSIE everything works just fine. With Firefox, I guess you'll have to resort to some oblique techniques such as storing the element's original width/height in custom properties and using $(elem).bind('DOMAttrModified', func). Then in the func() callback, check if the new width/height differ from the ones you stored previously, take the respective resize action and store them again for the next event callback. Note that this approach works for Firefox only. I haven't been able to find a decent workaround for Chrome, Safari and Opera yet. Maybe using window.setInterval() would do but... sounds too slopy... event the thought of it makes me kinda sick :(
使用 MSIE 一切正常。使用 Firefox，我猜您将不得不求助于一些倾斜的技术，例如将元素的原始宽度/高度存储在自定义属性中并使用$(elem).bind('DOMAttrModified', func). 然后在 func() 回调中，检查新的宽度/高度是否与您之前存储的不同，执行相应的调整大小操作并再次存储它们以用于下一个事件回调。请注意，此方法仅适用于 Firefox。我还没有为 Chrome、Safari 和 Opera 找到合适的解决方法。也许使用 window.setInterval() 会做，但是......听起来太草率......事件的想法让我有点恶心:(
