Whitescreen issue in IE9 - Removing iframe

Question

I"m wondering if anyone can give me some insight into a really strange IE9 issue I've been struggling with.

I'm finishing up production of a site for work - it works well in ff/chrome/ie7/ie8 with no script errors.

On IE9 the last step of the application causes the entire tab to whitescreen with no script errors or warnings. (changing the document mode to ie8 will fix the problem but is obviously unsuitable for production)

Unfortunately the site pretty complex with a ton of ajax, and in-page scripts so I can't really post the relevant code easily. I'm more trying to figure out how to diagnose this.

I've checked the IE error logs and they are empty. Web developer tools tells me nothing. The site is not using any plugins (Flash/Silverlight, Ect. ) just javascript w/jQuery.

There is a PDF being displayed in an iframe around the step where it fails - but a nearly identical pdf is displayed in the previous step (using the same method) without problem. The code fails around a call to the jquery UI window but I can't seem to get the exact line.

If anyone has a clue how to try to diagnose this further I'd really appreciate it. I can keep hunting for the bug but I've never seen this kind of behavior before and just am not sure what I am looking for.

Answer 1

Thanks for all the input on this. Sorry I got completely overwhelmed by a few projects at once so I wasn't able to post updates on the debugging steps.

It took forever but I finally realized that everything was crashing when I closed the dialog containing the first PDF.

One of my helper functions was opening the dialog and automatically destroying the contents on close. Normally this works fine as I'm either removing a div containing the page fragment, or the iframe.

In this situation I had a page fragment loaded into the dialog which contained some buttons and the pdf iframe. I called the .remove() method on the parent element containing the iframe rather than the iframe itself. For some reason this seems to work fine in every other browser - but in IE9 it pretty much kills the page rendering without any warning or message.

I strongly suspect that the culprit is the adobe plugin but I'm not entirely sure.

Here is the fix-
Html:

<div id="container">
 <iframe src="loremipsum.pdf"></iframe>
</div>

Javascript:

//Ruins my entire week
$("#container").remove(); 

//Works as the pdf is removed directly
$("#container").find("iframe").remove().end().remove(); 

Answer 2

I ran into the same issue on IE11 while trying to remove an iframe in a div with AngularJS. Removing the iframe first would just cause the same issue, so I navigated the iframe src to a new page (about:blank) first, then removed the div which worked. Hopefully this helps someone with a similar problem.

Pseudo-code below:

$ctrl.iframeUrl = 'about:blank'; // change the iframe url here
$timeout(function(){
    $ctrl.removeIframe(); // remove the iframe here
});

Answer 3

As a thing to try - see what's in the IE9 DOM viewer after it whitescreens. There's a decent chance that most of the stuff is there and just not rendering properly (or having something else rendered over it). At the very least, knowing whether it's losing a ton of stuff out of the DOM or not should give you some useful data.