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();
}
Related
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"
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);
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 ";
I have a javascript function written as follows which works just fine in Firefox for downloading given txt content.
self.downloadURL = function (url) {
var iframe;
iframe = document.getElementById("hiddenDownloader");
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = "hiddenDownloader";
iframe.style.display = "none";
document.body.appendChild(iframe);
}
iframe.src = url;
}
but it does n't work fine with IE 9 due to some reasons. So i tried to convert into equivalent jquery because jquery has compatibility with all the browsers.
here is the jquery equivalent of the same function:
self.downloadURL = function (url) {
var iframe;
iframe = $("#hiddenDownloader");
if (iframe === null) {
iframe = $('<iframe></iframe>');
iframe.id = "hiddenDownloader";
$("#hiddenDownloader").css("display", "none");
$(document.body).append(iframe);
}
iframe.src = url;
}
But now it does n't work in both the browsers. Please help letting me know what am i doing wrong.
Your problem is in:
iframe = $('<iframe></iframe>');
iframe.id = "hiddenDownloader";
iframe refers to a jQuery Object not a DOM Node. You will have to use .prop to set the id:
iframe = $('<iframe></iframe>');
iframe.prop('id', "hiddenDownloader");
And also you have the same problem here:
if (iframe === null) {
Where you will need the check the length of iframe:
if (iframe.length === 0) {
And again at iframe.src = url; Maybe you can figure this one out:
iframe.attr('src', url);
But why would you convert vanilla JavaScript to jQuery?
Seems like a strange way to download a file.
In any case, this probably works the same was as the original:
if (!iframe.get(0)) {
...
}
... and the id property as another poster mentions.
iframe = document.getElementById("hiddenDownloader");
iframe = $("#hiddenDownloader");
These lines aren't equivalent. The second one create a jQuery object, so the check for null will never equate to true
This link may help u:
http://www.sitepoint.com/forums/showthread.php?743000-IE9-Iframes-DOCTYPES-and-You
or u can add this to the top:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Replace iframe.src = url; with iframe.attr("src",url + "?"+ Math.random()); to prevent caching issue in IE9.
Replace iframe.id = "hiddenDownloader"; with iframe.attr("id","hiddenDownloader");
Replace if (iframe === null) { with if (iframe.length === 0) {
Try with:
iframe = $("#hiddenDownloader")[0];
I need to get whole content of iframe from the same domain. Whole content means that I want everything starting from <html> (including), not only <body> content.
Content is modified after load, so I can't get it once again from server.
I belive I've found the best solution:
var document = iframeObject.contentDocument;
var serializer = new XMLSerializer();
var content = serializer.serializeToString(document);
In content we have full iframe content, including DOCTYPE element, which was missing in previous solutions. And in addition this code is very short and clean.
If it is on the same domain, you can just use
iframe.contentWindow.document.documentElement.innerHTML
to get the content of the iframe, except for the <html> and </html> tag, where
iframe = document.getElementById('iframeid');
$('input.test').click(function(){
$('textarea.test').text($('iframe.test').contents());
});
You can get the literal source of any file on the same domain with Ajax, which does not render the html first-
//
function fetchSource(url, callback){
try{
var O= new XMLHttpRequest;
O.open("GET", url, true);
O.onreadystatechange= function(){
if(O.readyState== 4 && O.status== 200){
callback(O.responseText);
}
};
O.send(null);
}
catch(er){}
return url;
}
function printSourceCode(text){
var el= document.createElement('textarea');
el.cols= '80';
el.rows= '20';
el.value= text;
document.body.appendChild(el);
el.focus();
}
fetchSource(location.href, printSourceCode);