window.크기 조정Internet Explorer에서 이벤트 실행

window.크기 조정Internet Explorer에서 이벤트 실행

아시다시피 Internet Explorer(인터넷 익스플로러)에서는 페이지의 요소 크기가 조정되면 window.resize 이벤트가 실행됩니다.페이지 요소의 크기를 조정하는 것이 뷰포트 자체의 치수에 영향을 미치지 않더라도, 페이지 요소의 높이 또는 스타일 특성을 지정/변경하거나, 단순히 하위 요소를 추가하는 것만으로 페이지 요소의 크기가 조정되는지 여부는 중요하지 않습니다.

응용 프로그램에서 window.resize 핸들러에서 일부 <li> 요소의 크기를 조정하고 있으며 이는 window.resize 등을 다시 실행합니다.다시 말하지만, 이것은 IE의 문제일 뿐입니다.

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

저는 jQuery를 사용하고 있다는 것도 언급해야겠습니다.

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

저는 jQuery를 사용하고 있고 window.resize 이벤트를 사용하여 div를 body에 다시 배치하는 함수를 호출합니다.

이제 추가된 div의 left cs 속성을 설정하면 window.resize 이벤트가 아무런 이유 없이 트리거됩니다.

그러면 무한 루프가 발생하여 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과 잘 맞지 않습니다.Microsoft가 IE8을 포기하기도 했지만 이를 시도해 볼 수도 있습니다(테스트되지 않음!).

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

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

@Aamir Afridi.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
});

저는 오늘 이 문제에 부딪혔고, 전세계에 포함된 자바스크립트 파일의 맨 위에 다음을 넣기로 결정했습니다.

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통화가 지연된 메서드입니다.인터넷 익스플로러 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이 있기 때문에 창이 표시될 가능성이 높습니다.

체크가 추가된 의사 코드(jQuery 사용)는 다음과 같습니다.

$(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
    }
});

요소 크기를 조정했을 때 크기 조정 이벤트를 실행할 수 없었습니다(IE8에서만 시도).

요?target때 까를 할 수 있습니까

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

내 패치:

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

크기 조정 이벤트의 내용이 어떻게 되는지에 달려 있습니다.

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.

이것은 창문의 스크롤 바 때문입니다.페이지에 스크롤 바가 있고 "재로드" 버튼을 클릭하여 주요 내용이 다시 렌더링되는 경우 이벤트에서 스크롤 바가 사라집니다.그 경우에는 $(윈도우)입니다.너비 () 또는 $(window).높이 ()는 실제 윈도우 크기 조정이 아닌 컨텐츠 렌더링에 의해 변경됩니다.

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

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