Develop Reference

IE9 window object inside an Iframe has no addEventListener

I'm adding an Iframe to a page by using javascripts document.write. The page (from another domain) that is called inside the Iframe does a bit of setup using
window.addEventListener('load', function() {
//do stuff here
}
It works in Chrome. It works in Firefox. It works in Opera.
It doesn't work in IE9. I get the strangest message, that "the Object does not have the property or method 'addEventListener'". It's apparently the window object IE9 is talking about, because when I
console.log(window)
i get
[object Window]
but when I
console.log(window.addEventListener)
I get
undefined
When I call the page directly the script works fine, but in the Iframe I get this magical castrated window object that does not know addEventListener (and probably other stuff too)?! What the hell is happening here?

After much trial and error I found out that the page that was creating my Iframe had broken HTML (no Doctype, no title tag) and thus forced IE9 into Quirks mode, which apparently means reduced abilities. After cleaning up the loading page it works fine.

Youtube iFrame API events not firing on Firefox 14

I'm currently working on embedding a youtube video using the iframe API, what is annoying me is that the events are not firing only on Firefox (I have just tried firefox 14), they work on every other browser (obviously not using browsers from hell like IE7).
The samples from their documentation don't work either, if you grab the piece of code they have under the getting started section of this page and here is the jsfiddle version for your quick view.
The player is displayed on the page, but as I mentioned the events are not working, neither I can use any function from the api, they all throw undefined error.
I appreciate any help.

Ok I found the problem,
It's because of the Firefox Extension HTTPS-Everywhere, which is switching the requests to use https, and since my page is requested using http, that was causing a conflict with the youtube iframe requests.
I believe I should put a warning on my site about using that plugin. Thanks for your help everyone.

I had once a problem with plying events to the iframe and it also apeared only in Firefox.
The answer was to specify the id and name of the iframe to the same value.
Try it - it might work for you as well.

Whitescreen issue in IE9 - Removing iframe

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.

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

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

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.

communication between an iframe and the page its part of through javascript in ie8

I have seen many questions like this but have not found anything that seems to help with my specific situation so I apologize if this question seems repetitive.
I have a site www.foo.com and have an iframe in it. When information I click on an a tag in foo.com a javascript function is called that passes a new image to the iframe to show the user. The communication between iframe and its "parent" seems to work fine on all browsers EXCEPT RANDOM IE8 PAGES. I get the following error message "access is denied" and the browser points to the function that has been activated. Following is a piece of code from the site to see how it works.
the iframe:
<iframe scrolling="no" src="foo.com/bar" id="ifram" name="ifram"></iframe>
the a tag:
The javascript:
if($(this).val() == '242'){
document.getElementById('ifram').style.border='0px';
document.getElementById('ifram').style.background = "url('../product_images/uploaded_images/Flag.jpg')";
document.frames.ifram.document.body.style.backgroundColor="transparent";
This is just a snippet of a code and does not include the whole process of the ajax call to get the image but was not sure if the ajax is part of the issue. I get an undefined error in firefox but the function still fires . I am assuming I would just need to use window.frames for firefox.
Overall, any help on how to resolve this issue would be appreciated. I am wondering if there is a security issue that has to do with browser settings or if its part of how I coded.
Thanks in advance

It's important to note that if your iframe tag is on a page located at http://www.foo.com but the iframe points to http://foo.com it's considered a sandboxing violation and you'll get access denied. Make sure you're pointing to the same domain as your page is on. You can use relative URLs in the iFrame src tag, too, so you can change it to src="bar.php" (without any domain information).

You dont need to use document.frames before document.frames.ifram.document.body.style.backgroundColor = "#ccc";. Just ifram.document.body.style.backgroundColor = "#ccc"; will do.

Javascript div popup Not working in IE9 standard but does work in other modes

Having trouble with my site and IE9, if i change the compatability mode to anything other than IE 9 standard my login popup works however when in IE9 standard which is the defult it does not work. I think the best way to look at this is to try it yourself. My Site

I don't have IE9 handy, but a guess would be that it might be falling over due to a JavaScript error: Uncaught TypeError: Cannot set property 'popup' of null. This error is occurring because the point at which you're creating a Popup for popup_4, the DOM element for popup_4 doesn't exist yet.
You could fix that by moving the popup_4 div above the script block that's creating the Popup objects.