How to add an element to parent window? - Chrome Specific (All other browsers work)

Question

So pretty much I have an html that has an iFrame.

<iframe src="frame.html" width="2000" height="1000"></iframe>

Now, from within the iFrame js I try to call jQuery's append function to add a DIV to the parent window...

$("body", window.parent.document).append("<div id=\"test\" ></div>");

That code works perfectly fine under FireFox and IE, but for some reason it doesn't work under Chrome, and I've tried Googling the cause of this with little to no luck.

Just FYI, this was all done under jQuery 2.0.0.

Answer 1

I'm currently developing on my own computer, therefore I'm accessing each iframe by providing a path.

That's the problem. Use a local webserver and test via http:// (or https://) URLs. If you test things you intend as web pages later via file:// URLs, you will get misled.

In this case, your suspicion in your comment is right: It's the Same Origin Policy. Different browsers treat origin null (the local file system) differently. Chrome disallows access to other windows when your window is loaded from a local file.