5

Hallo all: I need to insert a html string in a iframe as shown below:

....

var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"

jQuery('#popolaIframe').click(function() {
  parent.$("#indexIframe")[0].documentElement.innerHTML = html;     
});

Is there a way to achieve this?

BenMorel
  • 34,448
  • 50
  • 182
  • 322
Massimo Ugues
  • 4,373
  • 8
  • 43
  • 56
  • As a possible alternative (without knowing what you want to achieve): consider using a div with `overflow:auto;` to get the 'iframe' effect (= bounded area with dedicated scrollbar). – pinkgothic May 06 '10 at 12:31
  • The div is not an alternative since I receive an html with head tag. Populate divs with a so formed html cause the browser to drop all the head content. – Massimo Ugues May 06 '10 at 12:53
  • Yeah, I see your problem. You *may* have to pursue that avenue of thought, though, as far as I know this is the sort of thing that the same-origin policy of JavaScript covers - so you may have to extract the `` part and any header data you need to preserve (e.g. stylesheets). Either way, good luck. :) – pinkgothic May 06 '10 at 13:20

6 Answers6

7
var html = "<html><head><title>Titolo</title></head><body><p>body</p></body></html>"

jQuery('#popolaIframe').click(function() {
  var doc = parent.$("#indexIframe")[0].documentElement;
  doc.open();
  doc.write(html);
  doc.close();     
});
omtester
  • 102
  • 1
  • 2
  • 3
    I couldn't figure out this solution, here is something similar which worked for me: mydoc = document.getElementById('iframe_id').contentWindow.document; mydoc.write(html_code); mydoc.close(); – ılǝ Dec 17 '12 at 02:47
  • 1
    I don't think `document.close` is needed here as `document.write` will do so itself. the `.close` happens implicitly too. – Benjamin Gruenbaum Jun 23 '13 at 19:25
1

Does that code you posted work? If not, it's probably because browsers disallow modification of iframe content for security reasons.

Delan Azabani
  • 79,602
  • 28
  • 170
  • 210
  • 1
    The code does not work. This below work. parent.$("#indexIframe")[0].contentDocument.body.innerHTML = "foo"; The problem is that since I receive a well formed html with head content I cannot put it in the contentDocument.body. – Massimo Ugues May 06 '10 at 12:56
0

You cannot insert into an iframe unless you remove() the iframe and use 'append(html)'. You can insert it inside iframes body like

$('body',parent.$("#indexIframe")[0].contentWindow.document).html(html)
Aniket Thakur
  • 66,731
  • 38
  • 279
  • 289
0

Alternitevely if not sure about the parent element you could do that:

var doc = $.find("#myIframe")[0].contentWindow.document; //that will look in the whole dom though
doc.open();
doc.write(html);

At least this did the job in my case :)

Lys
  • 568
  • 1
  • 4
  • 18
0

Looks like you can get a refrence to the body so I don't see why not:

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_iframe_contentdocument

Ged
  • 51
  • 5
  • No i cannot reference the body: since I have to inject a correct html with head and body: The real html is this: var html = '

    body

    '; And if I insert the html in the document.body.innerHTML all the head content is dropped. Kind regards     – Massimo Ugues May 06 '10 at 12:50
  • although undesired in the body under normal circumstances... does it work if you put the `link` tag in the body? – scunliffe May 06 '10 at 13:15
  • It works with browsers since the browsers do not cut the definition. I receive a problem with the jQuery api clone() with ie6 and the problem is caused by the link tag in the body. Still seeking.... :) – Massimo Ugues May 10 '10 at 07:43
0

You have lost 1 level, you need modify innerHtml of body, but not document:

document.body.innerHTML = bla-bla
Dewfy
  • 23,277
  • 13
  • 73
  • 121