How to deal with setting dynamic iframe content dynamically

Question

I have a page where I need to dynamically create an iframe and stick it into a div on the page. I create the iframe like this:

var frame = $('<iframe>')
    .attr('id', 'myIframe')
    .addClass('someClass')
    .appendTo($('#someDiv'));

Depending on some condition, I need to either: A) set the iframe src to some other page OR B) dynamically add some HTML to the iframe.

I have option A working fine, but option B is throwing security errors:

if (someCondition) {
    // option A, works fine
    frame.attr('src', someURL);
} else {
    // option B, blows up with "Access is denied."
    $(frame[0].contentWindow.document).find('body').html(someHTML);
}

Do I need to set the document.domain on the dynamic iframe before attempting to set the HTML? How would I even do that? Is there an easier way to append dynamic content to a dynamic iframe?

Thanks in advance.

Edit here is the rendered HTML of the dynamic iframe, as requested:

<div id="someDiv">
    <iframe id="myIframe" class="someClass"></iframe>
</div>

score 2 · Answer 1 · answered Oct 11 '12 at 15:06

2

Sorry, but if the iframe references a URL source from another domain, you can't access it.

http://javascript.info/tutorial/same-origin-security-policy

That being said, you can access its body, provided you have either a url from the same domain, or if you fill the attribute src with "javascript:void(0);". after that, try to access it this way:

$($('iframe').contents().get(0)).find('body')

answered Oct 11 '12 at 15:06

ChuckE

5,610
4
31
59

im not attempting to access anything from another domain - the iframe is generated dynamically a few lines above where i'm trying to set the html. – jbabey Oct 11 '12 at 15:07
the `javascript:void(0);` in `src` appears to do nothing, and attempting to access `.contents()` on the iframe gives me "Permission denied." – jbabey Oct 11 '12 at 15:10
can you post the full HTML iframe tag generated in your body? – ChuckE Oct 11 '12 at 15:12
i've posted the HTML of the iframe and it's container, though im not sure how it's relevant. – jbabey Oct 11 '12 at 15:18
the only reason the jsfiddle example works is because the parent window has a document.domain that matches the entire domain. it won't work if your pages are separated into sub-domains (which is my case). – jbabey Oct 11 '12 at 15:29
ahhh. but sub-domains are not the same domain. – ChuckE Oct 11 '12 at 15:41

score 1 · Accepted Answer · edited May 23 '17 at 11:51

I was able to use a fix similar to the answer to this question in order to get around the issue:

var frame = $('<iframe>')
    .attr('id', 'myIframe')
    .addClass('someClass')
    .attr('src', 'javascript:(function () {' + 
        'document.open();document.domain=\'myDomain.net\';document.close();' + 
     '})();');
    .appendTo($('#someDiv'));

It's a hack by every definition, but I think it is the best way to solve the problem.

score 0 · Answer 3 · answered Oct 11 '12 at 15:06

0

When you create the iframe ensure it has a src specified:

src='about:blank'

Or create a blank.html on the server and point to that

answered Oct 11 '12 at 15:06

Oli B

514
5
17

in both cases it stills give me "Access denied" when I try to set the HTML. – jbabey Oct 11 '12 at 15:14

How to deal with setting dynamic iframe content dynamically

3 Answers3

Linked