Set Content of Iframe

Set content of iframe

I managed to do it with

var html_string= "content";
document.getElementById('output_iframe1').src = "data:text/html;charset=utf-8," + escape(html_string);

How to set HTML content into an iframe

You could use:

document.getElementById('iframe1').contentWindow.document.write("<html><body>Hello world</body></html>");

Here's a jsFiddle, which works in all major browsers.

Note that instead of contentDocument.write you should use contentWindow.document.write: this makes it work in IE7 as well.

How to Edit content inside an Iframe or add styles?

Does the iframe src url belong to the same origin as the main page? Are they accessed by the same domain name?

If the main page and the iframe content share an origin

Javascript and same origin iframes

Otherwise

You'll need to change something so they share an origin. You can put the iframe content behind a proxy so it shares the main page's origin. If your main page is a dynamic site, you can add a new endpoint (e.g. /iframe), and in the request handler (on the server side) you request your iframe content and return it. Alternatively, you can use a CDN service like AWS CloudFront or Akamai to combine the main page and the iframe content domains into a single domain. You would configure it so that requests to /iframe/* are served by your-iframe-content.com/*, and all other requests are served by your main content server. Explanation for CloudFront

Creating an iframe with given HTML dynamically

Setting the src of a newly created iframe in javascript does not trigger the HTML parser until the element is inserted into the document. The HTML is then updated and the HTML parser will be invoked and process the attribute as expected.

http://jsfiddle.net/9k9Pe/2/

var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
console.log('iframe.contentWindow =', iframe.contentWindow);

Also this answer your question it's important to note that this approach has compatibility issues with some browsers, please see the answer of @mschr for a cross-browser solution.

jQuery changing contents of an iFrame

If you want to update the iframe content using html then you should first find the body element inside the iframe and then append the required markup.

$(document).ready(function() {
    $('#prev').contents().find('body').html('<div> blah </div>');
});

Working demo - http://jsfiddle.net/ShankarSangoli/a7r9L/

Control iframe content with javascript/html

Yes you can. Say your iframe's ID is 'myIFrame'

<iframe id="myIFrame" src="thispage.html"
    width="100%" height="600"
    frameBorder="2">
</iframe>

Then, add the following in your JavaScript:

// Get the iframe
const iFrame = document.getElementById('myIFrame');

// Let's say that you want to access a button with the ID `'myButton'`,
// you can access via the following code:
const buttonInIFrame = iFrame.contentWindow.document.getElementById('myButton');

// If you need to call a function in the iframe, you can call it as follows:
iFrame.contentWindow.yourFunction();

Hope it helps :)

Insert content into iFrame

You really don't need jQuery for that:

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();

jsFiddle Demo

If you absolutely have to use jQuery, you should use contents():

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append('Test');
});

jsFiddle Demo

Please don't forget that if you're using jQuery, you'll need to hook into the DOMReady function as follows:

$(function() {  
    var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("body").append('Test');
    });
});

Modifying the HTML content of an iframe using jQuery

It looks like the code is executing before the iframe contents has actually loaded. Try this code:

$(document).ready(function(){
    var $iframe = $("iframe");
    $iframe.on('load', (function(){
        $iframe.contents().find("body").append("<p>test2</p>");
    });
});

Set Content of Iframe