Issue in IE 8 - height set to 0px

[peterjurkovic]

I try to integrate iframe-resize, but I came across the problem in Internet Explorer 8 browser.

I'm quite comfused, because in log is iFrame content height detected and set do value, but after that is "tirggred reset by host page" and height is set to zero. Isn't it bug?

Windows XP/ IE 8.0.6001

Thank you for feedback.

LOG: [iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0
LOG: [iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
LOG: [iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:false:true:null:max:null:null)
LOG: [iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:false:true:null:max:null:null)
LOG: [iFrameSizer][iFrameResizer0] Height calculation method set to "max"
LOG: [iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
     [iFrameSizer][iFrameResizer0] MutationObserver not supported in this browser!
LOG: [iFrameSizer][iFrameResizer0] setInterval: 32ms
LOG: [iFrameSizer][iFrameResizer0] Trigger event lock on
LOG: [iFrameSizer][iFrameResizer0] Sending message to host page (iFrameResizer0:630:530:init)
LOG: [iFrameSizer][Host page] Received: [iFrameSizer]iFrameResizer0:630:530:init
LOG: [iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 630px
LOG: [iFrameSizer][Host page] Size reset requested by host page
LOG: [iFrameSizer][Host page] Get position: 0,0
LOG: [iFrameSizer][Host page] IFrame (iFrameResizer0) height set to 0px
LOG: [iFrameSizer][Host page][reset] Sending msg to iframe (reset)
LOG: [iFrameSizer][iFrameResizer0] Page reset ignored by init
LOG: [iFrameSizer][iFrameResizer0] Trigger event lock off

// EDIT

I found out the problem. It is caused because initialization is triggered twice and IE8 has obviously problem. I fixed it using inicialization timeout and IE detection.

trigger('iFrame.onload',msg,iframe);
if (!isIE() && !firstRun && settings.heightCalculationMethod in resetRequiredMethods){
    resetIFrame({
        iframe:iframe,
        height:0,
        width:0,
        type:'init'
    });
}

[davidjbradshaw]

That's strange, the trigger is called twice as we can never quite be sure if the iFrame is fully loaded the first time it is called. It is more likely to work first time in dev, than in a production system, where your user could be on the end of a slow connection, so it would be good to better understand this problem. The code in the iFrame should just ignore the extra request.

What version are you using? If you're not already on the latest version, could you try upgrading to v2.4.8 and see if the problem goes away and could you send me a link I could take a look at please.

When the bit of code you edited is run firstRun should still be true and that should stop the reset from happening. I think the issue is that JavaScript in IE8 runs so slowly that the second call is triggered half way through the running of the first one.

I shall have to give this some more thought.

[davidjbradshaw]

For now I expect a better quick fix is to stop the iFrame ignoring the reset call. Look for this log message in the iFrame and get rid of the 'if' statement.

'Page reset ignored by init'

[peterjurkovic]

I'm using latest compiled version v2.4.8. You can try out on http://pp.peterjurkovic.com/ Init script is placed in http://pp.peterjurkovic.sk/nlfnorm-widget.js

Thanks for feedback.

[davidjbradshaw]

Just tried looking at this again, but the iFrame seems dead.

[peterjurkovic]

The server, from which is iframe loaded, has been upgraded. It should work now.

[davidjbradshaw]

OK have a fix and will release it in the next couple of days, once I've finished a few other changes.

function init(msg){
    //We have to call trigger twice, as we can not be sure if all 
    //iframes have completed loading when this code runs. The
    //event listener also catches the page changing in the iFrame.
    addEventListener(iframe,'load',function(){
        var fr = firstRun;   // Reduce scope of var to function, because IE8's JS execution
                             // context stack is borked and this value gets externally
                             // changed midway through running this function. Dear MicroSoft
                             // the ECMAscript standard that you defined says that isn't allowed!
        trigger('iFrame.onload',msg,iframe);
        if (!fr && settings.heightCalculationMethod in resetRequiredMethods){
            resetIFrame({
                iframe:iframe,
                height:0,
                width:0,
                type:'init'
            });
        }
    });
    trigger('init',msg,iframe);
}

The next issue is that your CSS then spins the frame into a resize loop due to the CSS always setting the content to be bigger than the page, this makes the page resize and then the CSS expands to match it.

I would try losing the top margin on the first list item and then the bottom margin on the last item to fix this.

[peterjurkovic]

Thank you very much for your support. As soon as will the new version available, I'll upgrade and test it. I thank you for great sophisticated plugin, too ;)

[davidjbradshaw]

Just released v2.5.0 with this fix and a few new options.

[augustotmw]

Hi! David, how are you?

I have the same problem when I was about to use 2.4.8 version and when I updated to 2.5.2 this was fixed (thanks), but when I click in some link (page inside frame) and it loads the next page, this problem appears... did you have a light for me?

Thank you very much

[augustotmw]

this is how I'm turning around with jquery:

<script type="text/javascript">
        $(function () {
            setTimeout(function () { $("body").height(10); }, 200);
        })
    </script>

any better sugestion?

[peterjurkovic]

Hi,

I would probably prefer:

$(window).load(function(){
       $("body").height(XY);
});

In some cases document should not be fully loaded, I guess.

[davidjbradshaw]

Do you have a link I could look at when I'm back from holiday?

Does the second page have slow loading images?

You could set the interval option to -32. But there should be a better solution than that.

[augustotmw]

Hi folks!

thanks for the attention. ^_^

thanks Peter, I will try this workaround... maybe works. But, this "XY" is a variable?

thanks David! I cannot show you the page because it's into an intranet, but I can try to explain any doubt that you have to help me find this solution. ^_^
Yes, we have many imagens to load, but heavier is a flash game loaded into an inside page.
I've tried put the option interval:-32, but it still not working.
So, as the component verify if had any changes in page's dimensions, I placed the code quoted above.

Any doubts ou better ideas?

Thank you two very much. ^_^