1

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.

Somesh
  • 121
  • 8
Libin TK
  • 1,477
  • 2
  • 25
  • 46

3 Answers3

2

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!

Community
  • 1
  • 1
Deep Frozen
  • 2,053
  • 2
  • 25
  • 42
  • I have tried the same methods but both of your jquery code throws "Permission denied to access property '$'" and javascript code throws "Permission denied to access property 'document'". The two documents are on different domains and I am testing on Firefox 16.0.1 – Libin TK Oct 17 '12 at 06:38
  • In that case it is the same-origin exception. You cannot do this cross-domain. I'm afraid I've read your question a little bit wrong. I'll update my answer. – Deep Frozen Oct 17 '12 at 06:43
  • Thanks for your update, I am sorry, but what do you mean by "userscripts"? – Libin TK Oct 17 '12 at 06:48
  • @LibinTK I have updated my answer again because it was too large for a comment. – Deep Frozen Oct 17 '12 at 06:57
1

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Thanks for the clarification, but is there is any work-around or hack? – Libin TK Oct 17 '12 at 06:44
  • Since you have no control over the domain the parent document runs on — no. – Quentin Oct 17 '12 at 06:49
  • Maybe I have missed something. He wants to change the frame itself, not the parent? Yes, it is not possible to change the frame's parent if he does note have access to it, but otherwise it can. – gotqn Oct 17 '12 at 06:51
  • @gotqn — He wants to modify the ` – Quentin Oct 17 '12 at 06:52
  • I am not trying to modeify ` – Libin TK Oct 17 '12 at 06:56
  • @LibinTK — That isn't what I said. I said **from** not **in** – Quentin Oct 17 '12 at 06:57
  • @LibinTK — Is this correct? You want to set `margin-left` on `_hf_iFrame` from JavaScript placed inside `http://anotherdomain.com/frame.html`? – Quentin Oct 17 '12 at 06:58
  • @LibinTK — That's what I thought. – Quentin Oct 17 '12 at 07:02
0

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.

gotqn
  • 42,737
  • 46
  • 157
  • 243
  • What I am trying to do is to change the style of the iframe itself; something like $('#myFrame).attr('style','background-color:red'); – Libin TK Oct 17 '12 at 06:41
  • No, this will give you the frame itself. You should use $('#myFrame).contents().find('body').attr(...) - this will select the body. The contents() function returns the elements in the frame. – gotqn Oct 17 '12 at 06:49