gives Error:
Uncaught TypeError: Cannot read property 'body' of undefined
var f = document.createElement("iframe");
f.id = "s";
f.contentWindow.document.body.innerHTML = "body";
how can i fix this?
to add content to iframe, you should pass by src attribute,
here is an example.
var iframe = document.createElement('iframe');
var html = '<body>Foo</body>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html); document.body.appendChild(iframe);
if your content is url, you put it directly into src,like this
iframe.src="https://www.w3schools.com"
Related
I have been attempting to print a dynamically created iFrame, then print it:
// CREATE iFrame
let iframe = document.createElement("iframe");
iframe.setAttribute('id', 'printerIFrame');
iframe.setAttribute('name', 'printerIFrame');
iframe.setAttribute('style', ' z-index: 1000;');
iframe.setAttribute('media', 'print');
let pageContent = document.createTextNode(createPrintableText(criteria));
// ADD iFrame to document
document.body.appendChild(iframe);
// POPULATE iFrame with print material
iframe = document.getElementById("printerIFrame");
body = iframe.contentWindow.document.getElementsByTagName('body')[0];
body.appendChild(pageContent)
// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;
// IF NOT IE or Edge
x.document.close();
x.focus();
x.print();
iframe.parentNode.removeChild(iframe);
And this works... sort of. The problem is, when the print preview arrives, contained in the text are all the <[HTML]> tags that are on the iframe. And they're ignored. Instead of getting this:
Start Date: 01/01/2019
End Date: 01/31/2019
I'm getting something like this:
Start Date: 01/01/2019<[br tag]>End Date: 01/31/2019<[br tag]>
Any ideas how to get this to work?
Your issue is as follows
Firstly, you are creating a text node in
let pageContent = document.createTextNode(createPrintableText(criteria));
Then you take this text node and add it to the body of the iframe
body.appendChild(pageContent);
That is why the "html" returned by createPrintableText is shown as is, because you've said "I want the content to be this text exactly as it is"
What you want to do is take the HTML as a string, and add it to the body.innerHTML as follows - the two lines marked **** are the only required changes
let iframe = document.createElement("iframe");
iframe.setAttribute('id', 'printerIFrame');
iframe.setAttribute('name', 'printerIFrame');
iframe.setAttribute('style', ' z-index: 1000;');
iframe.setAttribute('media', 'print');
// **** assuming createPrintableText(criteria) returns the HTML you need
let pageContent = createPrintableText(criteria);
// ADD iFrame to document
document.body.appendChild(iframe);
// POPULATE iFrame with print material
iframe = document.getElementById("printerIFrame");
body = iframe.contentWindow.document.getElementsByTagName('body')[0];
// **** add the HTML to body innerHTML - that way it's treated as HTML
body.innerHTML = pageContent;
// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;
// IF NOT IE or Edge
x.document.close();
x.focus();
x.print();
iframe.parentNode.removeChild(iframe);
Fixed it using slightly different code to send the iframe to the printer:
// CREATE iFrame
let iframe = document.createElement("iframe");
iframe.setAttribute('id', 'printerIFrame');
iframe.setAttribute('name', 'printerIFrame');
iframe.setAttribute('style', 'display: hidden;'); // z-index: 1000;
// iframe.setAttribute('media', 'print');
let pageContent = document.createTextNode(createPrintableText(criteria));
// ADD iFrame to document
document.body.appendChild(iframe);
// POPULATE iFrame with print material
iframe = document.getElementById("printerIFrame");
body = iframe.contentWindow.document.getElementsByTagName('body')[0];
body.appendChild(pageContent)
// GET iFrame `window`
var x = document.getElementById("printerIFrame").contentWindow;
// CREATE new `window` using iFrame
var newWin = window.frames["printerIFrame"];
newWin.document.write('<body>' + createPrintableFilters(criteria) + '</body>');
newWin.document.close();
// SET delay
setTimeout(function(){
// REMOVE iFrame
iframe.parentNode.removeChild(iframe)
}, 100);
I need to display content in a sandboxed view, mostly a full html document (<html>...</html>). I'm using a sandboxed iframe with src datauri.
var
iframe = document.createElement('iframe'),
content = '<html><head></head><body><h1>Hello</h1></body></html>'
;
iframe.sandbox = '';
iframe.src = 'data:text/html;charset=utf-8,' + content;
document.body.appendChild(iframe);
Unfortunately, that isn't supported in Internet Explorer...
Is there any solution/workaround?
My solution:
Create a empty index.html, just for having a same origin iframe.
Access the iframe via javascript
Replace its content
function ReplaceIframeContentCtrl() {
var iframe = document.getElementById('test');
var content = "<html><head></head><body><h1>Hello</h1></body></html>";
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(content);
iframe.contentWindow.document.close();
}
document.addEventListener('DOMContentLoaded', ReplaceIframeContentCtrl);
<iframe id="test" src="/index.html"></iframe>
Simply creating an empty iframe and replacing it's content will do:
function insertIframeHtml(parent, html) {
const jparent=$(parent).empty();
const iframe=$('<iframe></iframe>').appendTo(jparent)[0];
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();
}
I have an <iframe> with a local file embedded. I don't know how to get a specific element in this document.
I have tried window.top.document.getElementById('numPages') and $("#myiframe").contents().find("#numPages") to get element with an id of numPages.
Try using .contentDocument
eg:
var iframe = document.getElementById("myFrame"),
idocument = iframe.contentDocument
// Use idocument instead of document
To get the element in plain javascript try using contentWindow
document.getElementById('myiframe').contentWindow.document.body.getElementById('numPages');
By this way, You can get frame id and set css property inside frame element. It'll work 100%.
<script>
window.onload = function WindowLoad(event) {
let iframe = document.getElementsByTagName("iframe")[0];
var iframevar = document.getElementById(iframe.id);
var elmnt = iframevar.contentWindow.document.getElementById("header_27");
elmnt.style.color = 'black';
var elmnt = iframevar.contentWindow.document.getElementById("header_59");
elmnt.style.color = 'black';
}
</script>
Any idea why at this jsfiddle the iframe is auto deleting its content? How can i overcome this error?
HTML
<iframe id = "Preview"></iframe>
JS
document.ready = (function(){
document.getElementById('Preview').src = "about:blank";
var iframe = document.getElementById('Preview'),
iframedoc = iframe.contentDocument || iframe.contentWindow.document;
iframedoc.body.innerHTML = "<html>To preview the xml/gml file visit<a href = 'about:blank' target = '_blank'></a></html>";
alert()
})();
It is because you are setting the src of the iframe.
You just have to get rid of :
document.getElementById(' Preview ').src = " about:blank ";
hi i am trying to get inner HTML of iframe element
my html document a structure is like this
<body>
<div>
<iframe id="frame1">
<html>
<button id="mybutton">click me</button>
</html>
</iframe>
</div>
</body>
i am creating a chrome extension i have to show an alert when button with id mybutton is clicked i write an a content script
var greeting = "hola, ";
document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ;
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document
var button = iframeDocument.getElementById("mybutton") ;
if(button ==null)
alert("button is null") ;
i installed this extension in chrome when i visit a page then document body is changed into an iframe with a button in it.
but i am facing an alert which has button is null but there is button in iframe why i am getting null for this button??
To get the button inside of the iframe, this could work:
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
Obviously, you can navigate to get what you want with iframeDocument, and use .innerHTML as you seem to know. You cannot get the contents of the iframe if the iframe is pointing to a domain other than its parent.
UPDATE:
You need to use the code to get the frame's document and its contents after it's ready, so you should use something like this:
window.onload = function () {
var greeting = "hola, ";
var div1 = document.createElement("div");
var frame1 = document.createElement("iframe");
frame1.id = "frame1";
frame1.onload = function () {
alert("loaded");
var iframe = document.getElementById("frame1");
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
var button = iframeDocument.getElementById("mybutton");
if (button == null) {
alert("button is null");
}
};
frame1.src = "http://onemoredemo.appspot.com";
div1.appendChild(frame1);
document.body.appendChild(div1);
};
DEMO: http://jsfiddle.net/nqTnz/
The important thing is how the elements are created and appended to the DOM - not just using innerHTML. The onload method of the iframe is to guarantee it's ready. The actual manipulation code won't work in the jsFiddle because the cross-domain problems, but is what you should need.
In jQuery's source code the solution to get the iframe document is like this:
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
And then you can usually use getElementsByTagName or getElementById to select the DOM-Elements:
var elem;
if (iframeDocument) {
elem = iframeDocument.getElementById('mybutton');
}
Have You tried ????
iframe.srcdoc="<HTML><a id='some_id'>old</a><script>function run(src){eval(src);}</script></HTML>";
And then
iframe.contentWindow.run("document.getElementById('some_id').innerHTML='new content';");