It should be a very famous bug. in IE6 IE7, resize the window. This event will be executed multiple times, or sometimes it is exaggerated to repeatedly repeat this callback function and get stuck in an endless loop, this causes a false death. For more information, see window. onresize hangs IE6 and IE7. The method provided in this article is to provide a counter to determine whether it hits this bad thing. When I is repeated for 100 times, immediately remove the resize event for self-help.
Among the many plug-ins in jquery, I see another method, using setTimeout for delayed operations, in order to give the browser a chance to breathe. But the root cause is not the root cause.
In foreign forums, I have no intention of seeing the third method. The expert created a div with a large size such as the viewport and transferred the onsize event to this Div. But I think he missed something and didn't say it. I will add it here. In the original example, the body is basically empty. In fact, the page we operate cannot be like this. We should make this page transparent and absolute.
var mask = document.createElement("div"); mask.style.cssText = "width:100%;height:100%;position:absolute;top:0px;left:0px;filter:alpha(opacity=50)"; document.body.appendChild(mask); mask.onresize = resizeHandle;
This is a perfect solution, but how do you know how to execute the resize event? There is always a layer on top, and other mousemove and click operations won't work. Msdn provides an onresizeend event, but it cannot be used. It may be used by VBScript. Are you using a timer? Or add a hook at the bottom of the callback function? I don't think so. I think it's better to look at whether the elements on the page can help me with the use of an out-of-the-box and out-of-the-box element. As long as the page is HTML, there are always several elements that are indispensable. An HTML element and a body element. I tried HTML and found it didn't work. But I thought, Microsoft always obfuscated HTML and body. It's no big deal. Just bind it to the body.
window.onload = function(){ if(!+"\v1" && !document.querySelector) { // for IE6 IE7 document.body.onresize = resize; } else { window.onresize = resize; } var text = document.getElementById("text") function resize() { text.innerHTML = getWindowSize().join(" : "); } }
<Br/> <! Doctype HTML> <br/> <HTML lang = "en"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 6" http-equiv = "X-UA-compatible"/> <br/> <title> fix IE6 resize bug by situ zhengmei </title> </P> <p> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> resize </title> <br/> <SCRIPT type =" text/JavaScript "> <br/> If (! Array. prototype. map) <br/> array. prototype. map = function (FN, scope) {<br/> var result = [], rI = 0; <br/> for (VAR I = 0, n = This. length; I <n; I ++) {<br/> if (I In this) {<br/> result [ri ++] = fn. call (scope, this [I], I, this); <br/>}< br/> return result; <br/> }; </P> <p> var getwindowsize = function () {<br/> return ["height", "width"]. map (function (name) {<br/> return window ["inner" + name] | <br /> Document. compatmode = "css1compat" & document.doc umentelement ["client" + name] <br/> | document. body ["client" + name] <br/>}); <br/>}< br/> window. onload = function () {<br/> If (! + "\ V1 "&&! Document. queryselector) {// For IE6 IE7 <br/> document. body. onresize = resize; <br/>}else {<br/> window. onresize = resize; <br/>}< br/> var text = document. getelementbyid ("text") <br/> function resize () {<br/> text. innerhtml = getwindowsize (). join (":"); <br/>}< br/> </SCRIPT> </P> <p> </pead> <br/> <body> <br/> <p> modify window in IE6 IE7. bug where onresize is executed multiple times </p> <br/> <Div id = "text"> display the window size </div> </P> <p> </body> <br/> </ptml> <br/>
Run code
if(dom.ie){ dom.events.special.resize = { setup: function() { var el = this, caller = dom.isWindow(el) ? dom.body(el) : el, args = slice.call( arguments, 1 ), event = dom.events.fix(window.event); event.type = "resize"; args.unshift(event); caller.onresize=function(){ dom.events.handle.apply( el, args ); } }, teardown: function() { var caller = dom.isWindow(this) ? dom.body(this) : this; caller.onresize = null; } } }
Version 2
dom.events.special.resize = (function(){ var size = function() { var el = dom(window); return { w:el.width(), h:el.height() }; }, lock_ = 0, size_, use_, setup = function() { if (!this.setTimeout) return false; size_ = size(); use_ = true; (function loop() { if (!lock_++) { var now = size(); if (size_.w !== now.w || size_.h !== now.h) { size_ = now; var evt = dom.Event("resize"); evt.target = evt.originalTarget = evt.currentTarget = window; dom.events.handle.call(this, evt); } setTimeout(function() { lock_ = 0; }, 0); } if (use_) { setTimeout(loop, 100); } })(); }, teardown=function () { if (!this.setTimeout) return false; use_ = false; } return { setup:setup, teardown:teardown } })();Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
