CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Red
Red

Reputation: 6378

How do I set content of iframe with Javascript?

I have the following HTML structure.

<iframe id="myiframe" src='myiframeContent.html'></iframe>

and I have the following JavaScript variable with an HTML string:

var s ="<html><head></head><body><div>Test_Div</div></body></html>";

How can I change the content of iframe with id myiframe with variable s?

Upvotes: 73

Views: 194808

Answers (10)

Red
Red

Reputation: 6378

I managed to do it with

Javascript Code:

  let html_string= "content";
  let myIframe = document.getElementById('output_iframe1');
  myIframe.src = `data:text/html;charset=utf-8,${html_string}`;

HTML code:

<iframe id="output_iframe1"></iframe>

Upvotes: 131

mrrrk
mrrrk

Reputation: 2301

I needed to reuse the same iframe and replace the content each time. I've tried a few ways and this worked for me:

// Set the iframe's src to about:blank so that it conforms to the same-origin policy 
iframeElement.src = "about:blank";

// Set the iframe's new HTML
iframeElement.contentWindow.document.open();
iframeElement.contentWindow.document.write(newHTML);
iframeElement.contentWindow.document.close();

Here it is as a function:

function replaceIframeContent(iframeElement, newHTML)
{
    iframeElement.src = "about:blank";
    iframeElement.contentWindow.document.open();
    iframeElement.contentWindow.document.write(newHTML);
    iframeElement.contentWindow.document.close();
}

Upvotes: 27

Pēteris Caune
Pēteris Caune

Reputation: 45112

Using Blob:

var s ="<html><head></head><body><div>Test_Div</div></body></html>";
var iframe = document.getElementById("myiframe");
var blob = new Blob([s], {type: "text/html; charset=utf-8"});
iframe.src = URL.createObjectURL(blob);

Upvotes: 7

Juice10
Juice10

Reputation: 240

You want to be using the iframe's srcdoc attribute for that (MDN documentation).

var html_string = "<html><body><h1>My epic iframe</p></body></html>";
document.querySelector('iframe').srcdoc = html_string;

The nice thing about using this method over for example Red's method listed on this page, is that iframe contents added with srcdoc are seen as the same-origin. That way can continue to manipulate and access the iframe with JavaScript if you wish.

Upvotes: 13

yaya
yaya

Reputation: 8243

If you want to set an html content containg script tag to iframe, you have access to the iframe you created with:

$(iframeElement).contentWindow.document

so you can set innerHTML of any element in this.

But, for script tag, you should create and append an script tag, like this:

https://stackoverflow.com/a/13122011/4718434

Upvotes: 0

Gavin
Gavin

Reputation: 4698

Unified Solution:

In order to work on all modern browsers, you will need two steps:

  1. Add javascript:void(0); as src attribute for the iframe element. Otherwise the content will be overriden by the empty src on Firefox.

    <iframe src="javascript:void(0);"></iframe>

  2. Programatically change the content of the inner html element.

    $(iframeSelector).contents().find('html').html(htmlContent);

Credits:

Step 1 from comment (link) by @susan

Step 2 from solutions (link1, link2) by @erimerturk and @x10

Upvotes: 26

Serg
Serg

Reputation: 7475

Why not use

$iframe.load(function () {
    var $body = $('body', $iframe.get(0).contentWindow.document);
    $body.html(contentDiv);
});

instead of timer ?

Upvotes: 4

x10
x10

Reputation: 3834

Use the "contents" function:

$('#some-id').contents().find('html').html("some-html")

Relevant fiddle: http://jsfiddle.net/fDFca/

Upvotes: 30

ipr101
ipr101

Reputation: 24236

You need - 

var $frame = $('myiframe');
    setTimeout( function() {
            var doc = $frame[0].contentWindow.document;
            var $body = $('body',doc);
            $body.html('<div>Test_Div</div>');
    }, 1 );

Code taken from - putting html inside an iframe (using javascript)

Upvotes: 2

erimerturk
erimerturk

Reputation: 4288

$('#myiframe').contents().find('html').html(s);

you can check from here http://jsfiddle.net/Y9beh/

Upvotes: 9

Related Questions