Internet Explorer에서 window.resize 이벤트 발생

Internet Explorer에서 window.resize 이벤트 발생

---

아시 다시피 Internet Explorer 에서 페이지의 요소 크기가 조정되면 window.resize 이벤트가 시작됩니다. 요소 크기 조정이 뷰포트 자체의 크기에 영향을주지 않더라도 페이지 요소의 높이 또는 스타일 속성을 할당 / 변경하거나 단순히 하위 요소를 추가하는 방식으로 크기를 조정하는지 여부는 중요하지 않습니다.

내 응용 프로그램에서 이것은 내 window.resize 처리기에서 일부 <li> 요소의 크기를 조정하고 window.resize 등을 다시 실행하기 때문에 불쾌한 재귀를 유발합니다. 다시 말하지만 이것은 IE에서만 문제입니다.

크기가 조정되는 페이지의 요소에 대한 응답으로 IE에서 window.resize가 실행되는 것을 방지 하는 방법이 있습니까?

또한 jQuery를 사용하고 있음을 언급해야합니다.

---

도움이 될만한 또 다른 문제를 발견했습니다.

jQuery를 사용하고 있으며 본문에 추가 된 div를 재배치하는 함수를 호출하는 window.resize 이벤트가 있습니다.

이제 추가 된 div의 LEFT css 속성을 설정하면 window.resize 이벤트가 NO GOOD REASON에 대한 트리거를 가져옵니다.

무한 루프가 발생하여 window.resize를 반복해서 트리거합니다.

수정되지 않은 코드 :

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }
    window.clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(onResize, 10);
});

해결책:

var winWidth = $(window).width(),
    winHeight = $(window).height();

$(window).resize(function(){
    var onResize = function(){
        //The method which alter some css properties triggers 
        //window.resize again and it ends in an infinite loop
        someMethod();
    }

    //New height and width
    var winNewWidth = $(window).width(),
        winNewHeight = $(window).height();

    // compare the new height and width with old one
    if(winWidth!=winNewWidth || winHeight!=winNewHeight){
        window.clearTimeout(resizeTimeout);
        resizeTimeout = window.setTimeout(onResize, 10);
    }
    //Update the width and height
    winWidth = winNewWidth;
    winHeight = winNewHeight;
});

따라서 기본적으로 높이 또는 너비가 변경되었는지 확인합니다 (실제로 창 크기를 조정할 때만 발생 함).

---

이것은 나에게 의미가 있었고 IE7 이상에서 작동하는 것 같습니다.

    //variables to confirm window height and width
    var lastWindowHeight = $(window).height();
    var lastWindowWidth = $(window).width();

    $(window).resize(function() {

        //confirm window was actually resized
        if($(window).height()!=lastWindowHeight || $(window).width()!=lastWindowWidth){

            //set this windows size
            lastWindowHeight = $(window).height();
            lastWindowWidth = $(window).width();

            //call my function
            myfunction();


        }
    });

---

크기 조정 리스너를로 바인딩하여 실행 .one()후 바인딩이 해제되도록합니다. 그런 다음 마지막에 크기 조정 리스너를 리 바인딩하는 한 원하는 모든 작업을 수행 할 수 있습니다. 이 작업을 수행하는 가장 쉬운 방법은 다음과 같이 익명 함수에 크기 조정 리스너를 배치하는 것입니다.

var resizeListener = function(){
  $(window).one("resize",function(){ //unbinds itself every time it fires

    //resize things

    setTimeout(resizeListener,100); //rebinds itself after 100ms
  });
}
resizeListener();

당신은 기술적으로 setTimeout감싸는 것을 필요로하지 않지만 resizeListener(), 단지 케이스와 약간의 추가 조절을 위해 그것을 거기에 던졌습니다.

---

크기 조정 기능의 바인딩을 해제하고 페이지를 다시 작성한 다음 크기 조정 기능을 다시 바인딩하여 문제를 해결했습니다.

function rebuild() {
   $(window).unbind('resize');
   /* do stuff here */
   $(window).bind('resize',rebuild);
}

$(window).bind('resize',rebuild);

편집하다

바인딩 및 바인딩 해제는 IE8에서 잘 작동하지 않습니다. 마이크로 소프트가 IE8을 포기했지만 당신은 이것을 시도하고 싶을 수도 있습니다.

function rebuild(){
   if(!window.resizing) return false;
   window.resizing=true;
   /* do stuff here */
   window.resizing=false;
}

window.resizing=false;
document.body.onresize=rebuild;

---

@ AamirAfridi.com의 답변이 내 문제를 해결했습니다.

이러한 문제를 해결하기 위해 공통 함수를 작성하는 것이 좋습니다.

function onWindowResize(callback) {
    var width = $(window).width(),
        height = $(window).height();

    $(window).resize(function() {
        var newWidth = $(window).width(),
            newHeight = $(window).height();

        if (newWidth !== width || newHeight !== height) {
            width = newWidth;
            height = newHeight;
            callback();
        }
    });
}

이렇게 사용하면 더 이상 IE의 다른 동작에 대해 걱정할 필요가 없습니다.

onWindowResize(function() {
    // do something
});

---

오늘이 문제가 발생하여 포함 된 전역 javascript 파일 맨 위에 다음을 배치하기로 결정했습니다.

var savedHeight = 0;
var savedWidth = 0;
Event.observe(window, 'resize', function (e) {
    if (window.innerHeight == savedHeight && 
        window.innerWidth == savedWidth) { e.stop(); }
    savedHeight = window.innerHeight;
    savedWidth = window.innerWidth;
});

그건 그렇고, 프로토 타입이 필요합니다.

---

unbind/ bind메서드와 지연된 호출 의 혼합 . Internet Explorer 8 이하에서 작동하여 악의적 인 루프를 방지하고 버전 6 및 7에서 중단됩니다.

function resizeViewport()
{
    // Unbind and rebind only for IE < 9
    var isOldIE = document.all && !document.getElementsByClassName;

    if( isOldIE )
        $(window).unbind( 'resize', resizeViewport );

    // ...

    if( isOldIE )
    {
        setTimeout(function(){
            $(window).resize( resizeViewport );
        }, 100);
    }
}

$(window).resize( resizeViewport );

---

이것을 시도 할 수 있습니다.

건설자:

this.clientWidth = null;
this.clientHeight = null;

일부 기능 :

var clientWidth = window.innerWidth || document.documentElement.clientWidth; 
var clientHeight = window.innerHeight || document.documentElement.clientHeight;
if (clientWidth != this.clientWidth || clientHeight != this.clientHeight ) {
    this.clientWidth = clientWidth;
    this.clientHeight = clientHeight;

    ... YOUR CODE ...
} 

Internet Explorer, Chrome, Firefox, Opera 및 Safari의 경우 :

window.innerHeight - the inner height of the browser window
window.innerWidth - the inner width of the browser window

Internet Explorer 8, 7, 6, 5 :

document.documentElement.clientHeight
document.documentElement.clientWidth
    or
document.body.clientHeight
document.body.clientWidth

---

(function ($){
     //if ie8 -> return;
     var lastHeight = 0;
     var lastWidth = 0;
     $(window).resize(function(event){
         if (window.innerHeight == lastHeight && window.innerWidth == lastWidth)
             { event.stopImmediatePropagation(); }
         lastHeight = window.innerHeight;
         lastHeight = window.innerWidth;
     });
})();

나를 위해 트릭을 ...

---

<pre>



var cont = 0;
var tmRsize = 100;
var lastWindowWidth = $(window).width();
var lastWindowHeight = $(window).height();

/*****redimensionamiento**********/
$(window).resize(function()
{
    if($(window).width() != lastWindowWidth || $(window).height() != lastWindowHeight)
    {
        clearTimeout(this.id);
        this.tiempo = tmRsize;
        this.id = setTimeout(doResize, this.tiempo);
    }
});

function doResize()
{
    lastWindowWidth = $(window).width();
    lastWindowHeight = $(window).height();

    $('#destino_1').html(cont++);
}

---

다음은 크기 조정 이벤트가 요소에 의해 발생했는지 또는 실제로 창 크기를 조정하여 발생했는지 알아내는 방법입니다.

이벤트의 target.nodeType이 존재하지 않는 경우 페이지의 다른 요소가 nodeType을 가지므로 창일 가능성이 높습니다.

So here's the pseudo-code (using jQuery) with the added check:

$(window).resize(function(event){
    if ( $(event.target.nodeType).length == 0 ){
        // Anything here is run when the window was resized
        // not executed when an element triggered the resize
    }
});

---

I couldn't get the resize event to fire when an element resized (only tried in IE8 though).

However what is the target on the event object when you're experiencing this issue, could you do:

$(window).resize(function(e) {
    if( e.target != window ) return;
    // your stuff here
});

---

My patch:

<!--[if lte IE 7]>
<script type="text/javascript">
  window.onresize = null;       // patch to prevent infinite loop in IE6 and IE7
</script>
<![endif]-->

---

It is up to the how contents are on the resize event.

I figured out the above solves only when a page consists of static contents, not dynamically rendered ones. In the dynamic case where the existing contents will be re-rendered by some trigger event like a contents reload function, we need to use $(document).width() or $(document).height() instead.

This is because of scroll bar of the window. If a page has the scroll bar and the main contents will be re-rendered by clicking a button “Reload”, the scroll bar disappears on the event. In that case, $(window).width() or $(window).height() is changed by the contents rendering, not by the actual window resizing.

http://www.tech-step.net/?p=466

---

$(window).resize(function(event)
{
    if (typeof event.target.tagName == 'undefined')
    {
        // ...
    }
});

참고URL : https://stackoverflow.com/questions/1852751/window-resize-event-firing-in-internet-explorer