How to change IFrame styles from IFrame itself usi

Question

I have an iframe which will be inserted dynamically into the parent page (I don't have control over this domain) using following script...

var _hf_iFrame = document.createElement("iframe");
_hf_iFrame.setAttribute("id", "_hf_iFrame");
_hf_iFrame.setAttribute("name", "_hf_iFrame");
_hf_iFrame.setAttribute("style", "height: 354px; width: 445px; border: 0; margin-left: -400px; top: 23%; position: fixed;");
document.body.appendChild(_hf_iFrame);
_hf_iFrame.setAttribute("src", "http://anotherdomain.com/frame.html");

I want to change the css properties of the iframe from iframe itself. Is it possible to achieve this? I am using JQuery inside my iframe.

Thanks in advance.

Answer 1

If I have understand you correctly, you want to change the style of the frame when something in it happens.

You can bind a function to each element in the frame using jQuery selectors and .on function:

$('#myFrame).contents().find('myButton').on('click',function(){
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
});

Note, if you are executing this code, before the frame is loaded you should use the following technique of binding:

$('#myFrame).contents().find('myButton').on('click','#myFrame',function(){
    $('#myFrame).contents().find('myDiv').attr('style','background-color:red'); 
});

It will bind the event event the element is not rendered. Anyway, I suppose to bind the event on frame load event.

The above requires to have jQuery loaded in your document.

Answer 2

You can't do this.

You have two documents. The parent and the framed. The iframe element exists within the parent, so to modify it you need to modify the parent document.

Your code runs in the framed document, which is on a different domain, so the same origin policy prevents you from reaching the parent document to modify it.

Answer 3

Unfortunately it is not possible to do this cross-domain. I've tried to manipulate it in numerous ways, but all failed. If you have a community that is willing to use userscripts, that might be an option. If not, what you are asking is not possible.

Userscripts

Userscripts are scripts in javascript (and possible any library that comes with it). The user can choose to install one in the browser. FireFox and Opera fully support it, though FireFox needs an extension named Greasemonkey. Chrome has one small exception: You will need to add the library and your code to the document itself if the library is not active on the page. If it is, you can use it like any other browser. I'm not sure about Safari and IE does not support it at all.

Here is info on userscripts: Click. As this guide shows: Safari is supported with an add-on, and IE too, but it doesn't say anything about IE 9/10. To check out random userscripts for ideas, go to userscripts.org.

For when the domain is the same, see below.

Old answer

It is possible to reach the top level document from within an iFrame. This is in plain javascript. Since the iFrame is created dynamically, it might be possible that there will be more on one page. This script also gets the right frame:

var arrFrames = parent.document.getElementsByTagName("iframe");
for (var i = 0; i < arrFrames.length; i++) {
    if (arrFrames[i].contentWindow === window) alert("yay!");
    {
        arrFrames[i].contentWindow.style.border = "1px solid lime";
    }
}

And in jQuery:

parent.$("iframe").each(function(iel, el) {
    if(el.contentWindow === window)
    {
        $(this).css({"border" : "1px solid lime"});
    }
});

This is not my code. This original is found here, I have just editted it for the CSS part. Next time maybe search a bit more, because the answers are always there!