Insert content into iFrame
JavascriptJqueryHtmlIframeJavascript Problem Overview
I am trying to insert some content into a 'blank' iFrame, however nothing is being inserted.
HTML:
<iframe id="iframe"></iframe>
JS:
$("#iframe").ready(function() {
var $doc = $("#iframe").contentWindow.document;
var $body = $("<body>").text("Test");
$body.insertAfter($doc);
});
I am calling the ready function so I don't understand why it is not inserting.
Javascript Solutions
Solution 1 - Javascript
You really don't need jQuery for that:
var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();
If you absolutely have to use jQuery, you should use contents():
var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("body").append('Test');
});
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');
});
});
Solution 2 - Javascript
This should do what you want:
$("#iframe").ready(function() {
var body = $("#iframe").contents().find("body");
body.append('Test');
});
Check this JSFiddle for working demo.
Edit: You can of course do it one line style:
$("#iframe").contents().find("body").append('Test');
Solution 3 - Javascript
You can enter (for example) text from div into iFrame:
var $iframe = $('#iframe');
$iframe.ready(function() {
$iframe.contents().find("body").append($('#mytext'));
});
and divs:
<iframe id="iframe"></iframe>
<div id="mytext">Hello!</div>
and JSFiddle demo: link
Solution 4 - Javascript
Wait, are you really needing to render it using javascript?
Be aware that in HTML5 there is srcdoc, which can do that for you! (The drawback is that IE/EDGE does not support it yet https://caniuse.com/#feat=iframe-srcdoc)
See here [srcdoc]: https://www.w3schools.com/tags/att_iframe_srcdoc.asp
Another thing to note is that if you want to avoid the interference of the js code inside and outside
Solution 5 - Javascript
If you want all the CSS thats on your webpage in your IFrame, try this:
var headClone, iFrameHead;
// Create a clone of the web-page head
headClone = $('head').clone();
// Find the head of the the iFrame we are looking for
iFrameHead = $('#iframe').contents().find('head');
// Replace 'iFrameHead with your Web page 'head'
iFrameHead.replaceWith(headClone);
// You should now have all the Web page CSS in the Iframe
Good Luck.