putting html inside an iframe (using javascript)
You can do it without jQuery also:
var iframe = document.getElementById('iframeID');
iframe = iframe.contentWindow || ( iframe.contentDocument.document || iframe.contentDocument);
iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();
jQuery's html strips body, html and head tags from the inserted HTML.
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);
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');
});
});
Loading a string if HTML into an iframe using JavaScript
You can do it with
document.getElementById('iframe').src = "data:text/html;charset=utf-8," + escape(html);
See the following fiddle for an example
https://jsfiddle.net/erk1e3fg/
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.
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.
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 :)
Use jQuery to Insert HTML into an iFrame Body Tag
The problem is that you are trying to access a nested frame.
The #re_contentIframe
frame is nested within #editorf
, which is subsequently nested within your document.
Try:
$('#re_contentIframe').contents().find('body').find('#editorf').contents()
Fiddle: http://jsfiddle.net/8VP4y/3/
Related Topics
How Does the New Operator Work in JavaScript
Settimeout and "This" in JavaScript
Script Tag in JavaScript String
How to Dodge Jquery Promises Completely When Chaining Two Async Jquery Functions
Alternation Operator Inside Square Brackets Does Not Work
How to Decode Jwt Token in JavaScript Without Using a Library
React-Router - Pass Props to Handler Component
How to Tell If Caps Lock Is on Using JavaScript
Remove All Elements Contained in Another Array
Add a "Hook" to All Ajax Requests on a Page
Array VS. Object Efficiency in JavaScript
How to Get a Word Under Cursor Using JavaScript
Formdata.Append("Key", "Value") Is Not Working
How to Automatically Set the Focus to a Textbox When a Web Page Loads
How to Use JSON File in HTML Code
How to Handle <Tab> in Textarea
What HTML Tags Support the Onload/Onerror JavaScript Event Attributes