I have the following script to create an iframe
function createIframe() {
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";
document.body.appendChild(iframe);
// Firefox, Opera
if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
// Internet Explorer
else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;
// Magic: Force creation of the body (which is null by default in IE).
// Also force the styles of visited/not-visted links.
iframe.doc.open();
iframe.doc.write('<style>');
iframe.doc.write("a{color: #000000; display:none;}");
iframe.doc.write("a:visited {color: #FF0000; display:inline;}");
iframe.doc.write('</style>');
iframe.doc.close();
// Return the iframe: iframe.doc contains the iframe.
return iframe;
}
however in chrome console it is giving me the error Cannot call method 'appendChild' of null
why is it not working?
The code is correct. Have you added body in the page?
Try this:
<html>
<body>
<script>
window.onload=function() {
createIframe()
};
function createIframe() {
var iframe = document.createElement("iframe");
iframe.style.position = "absolute";
iframe.style.visibility = "hidden";
document.body.appendChild(iframe);
// Firefox, Opera
if(iframe.contentDocument) iframe.doc = iframe.contentDocument;
// Internet Explorer
else if(iframe.contentWindow) iframe.doc = iframe.contentWindow.document;
// Magic: Force creation of the body (which is null by default in IE).
// Also force the styles of visited/not-visted links.
iframe.doc.open();
iframe.doc.write('<style>');
iframe.doc.write("a{color: #000000; display:none;}");
iframe.doc.write("a:visited {color: #FF0000; display:inline;}");
iframe.doc.write('</style>');
iframe.doc.close();
// Return the iframe: iframe.doc contains the iframe.
return iframe;
}
</script>
</body>
</html>
iframe.doc.write is not the cleanest solution....
Related
I'm getting the "Permission Denied" error on Edge and IE when creating an iframe in the script with some delay (setTimeout) and trying to access the window object.
It works on all other browsers, and works without the delay on IE and Edge.
<script>
function createIframe(win) {
console.log('foo', win.foo);
var width = 300;
var height = 250;
var id = 'ifr';
var src = '';
var iframeTemplate = '<iframe id="'+id+'" src="'+src+'" width="'+width+'" height="'+
height+'" marginheight="0" marginwidth="0" scrolling="NO" frameborder="0"></iframe>';
win.document.write(iframeTemplate);
var iframe = win.document.getElementById(id);
console.log('foo', win.foo);
if (iframe) {
var doc = iframe.contentWindow.document;
doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr'+ 'ipt></body></html>');
doc.close();
} else {
console.log('Failed to create an iframe');
}
}
window.foo = 'bar';
setTimeout(function() {
createIframe(window);
}, 3000);
</script>
This code should print:
foo bar
foo bar
foo on parent bar
But it throws the error "Permission Denied" on the second console.log on Edge and IE.
Works fine without setTimeout.
If I remove the second console.log, and acess window.parent.foo from within an iframe, it is undefined on Edge and IE
Snippets:
Doesn't work on Edge and IE: https://jsfiddle.net/vo2yrjft/
Works on Edge and IE: https://jsfiddle.net/6cbfk1yr/
Any workaround for that?
document.write is a "bad practice", it will block the page, you could refer to this thread for detailed information.
As a workaround, you could use createElement('iframe') to create an iframe and then use appendChild() to insert the element. Below is the sample code, it can run well in IE & Edge:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
function prepareFrame(win) {
console.log('foo', win.foo);
var id = 'ifr';
var ifrm = document.createElement('iframe');
ifrm.setAttribute('src', '');
ifrm.setAttribute('id', id);
ifrm.setAttribute('marginheight', 0);
ifrm.setAttribute('marginwidth', 0);
ifrm.setAttribute('scrolling', 'NO');
ifrm.setAttribute('frameborder', 0);
ifrm.style.width = '300px';
ifrm.style.height = '250px';
document.body.appendChild(ifrm);
var iframe = win.document.getElementById(id);
console.log('foo', win.foo);
if (iframe) {
var doc = iframe.contentWindow.document;
doc.write('<html><head></head><body><script>console.log("foo on parent", window.parent.foo);</scr' + 'ipt></body></html>');
doc.close();
} else {
console.log('Failed to create an iframe');
}
}
window.foo = 'bar';
setTimeout(function() {
prepareFrame(window);
}, 3000);
</script>
</body>
</html>
I am loading a .js file I wrote. Within that .js file I am creating a Iframe like this
var frmSource = "http://MYLINK.com/mypage.php?" + encodeURI(URLBuilder);
ifrm = document.createElement("IFRAME");
ifrm.setAttribute("src", frmSource);a
ifrm.style.width = 0+"px";
ifrm.style.height = 0+"px";
ifrm.setAttribute("frameBorder", "0");
document.body.appendChild(ifrm);
URLBuilder contains the GET variables to the next page
The issue occurs at document.body.appendChild(ifrm);
and my error is
javascript typeerror: null is not an object (evaluating 'document.body.appendchild')
I suspect the issue is it is trying to append the iframe to the body but the body has not properly loaded. I am currently only getting this issue in safari.
If your script is in the head, then the body is not defined (null). Put the script in the footer.
I have done something like this to configure my IFrame creation and it is working fine
var urlWithParam = url + encodeURI(URLBuilder)
var iframe = document.createElement('iframe');
iframe.src = urlWithParam;
iframe.id = "iframe_" + done;
iframe.style.position = "relative";
iframe.style.height = "100%";
iframe.style.width = "100%";
iframe.style.top = "0";
iframe.style.left = "0";
iframe.style.right = "0";
iframe.style.bottom = "0";
iframe.style.frameBorder = "0";
iframe.style.borderStyle = "none";
iframe.style.display = "none;";
//if you want to do something after the Iframe load
iframe.onload = function(event) {
};
Moved the script below the body. And it worked like a charm.
Quite easy, but there's something I miss..Nothing is working here. So, if my first button(id=simple) is checked, my body will have a onload function (resizeIframe) and put iframe.height 1200px, else if my other button is checked (codemandeur12), put iframe.height at 1700px...but nothing is working!
<script>
function resizeIframe(iframe) {
if (document.getElementById('iframe').contentWindow.document.getElementById('simple').checked) {
iframe.height = "1200px";
} else if (document.getElementById('iframe').contentWindow.document.getElementById('codemandeur12').checked) {
iframe.height = "1700px";
}
}
</script>
<iframe src="http://www.cbifinance.ca/form.php" scrolling="no" height="100%" onload="resizeIframe(this);" id="iframe">
Your browser does not support iframes.
</iframe>
My CSS for no scrollbar :
<style type="text/css">
iframe {
overflow:hidden;
width:600px;
}
</style>
EDIT : I am on the same website / server...
Try changing iframe.height to iframe.style.height
Edit:
Another idea:
var iframe = document.getElementById('iframe');
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
function resizeIframe(iframe) {
if (frameDoc.getElementById('simple').checked) {
iframe.style.height = "1200px";
} else if (frameDoc.getElementById('codemandeur12').checked) {
iframe.style.height = "1700px";
}
}
Using the answer from: getElementById from iframe
[Problem]
Disappearing other JS contents(facebook Like button) on same page with following JS.
(Only Google Chrome)
This bug is caused by following JS.
[Question]
Why the bug happened?
And this solution is right?
If you have any idea, could you tell me?
I tried to make "text" has document.write() part without document.open() and document.close().
But, it didn't cause disappearing other JS contents.
[Target Code]
This javascript is executed in iframe.
Then, the iframes will be output in iframe.
View.prototype.make_iframe = function(id, text) {
var doc, iframe, isIE;
iframe = document.createElement("iframe");
iframe.width = 0;
iframe.height = 0;
iframe.id = id;
document.body.appendChild(iframe);
doc = iframe.contentWindow.document;
/* Problem part start */
doc.write("<html><head></head><body>");
doc.write(text);
doc.write("</body></html>");
/* Problem part end */
};
View.prototype.get_tag_files = function(dir, fname, data, make_iframe) {
var xmlObj;
xmlObj = null;
if (window.ActiveXObject) {
xmlObj = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xmlObj = new XMLHttpRequest();
}
xmlObj.onreadystatechange = function() {
var i, item, tag, text, _i, _len;
if (xmlObj.readyState === 4 && xmlObj.status === 200) {
text = xmlObj.responseText;
tag = new Tag(data, text);
tag.replace();
return make_iframe(fname, tag.get_tag());
}
};
xmlObj.open("GET", dir + fname, true);
return xmlObj.send(null);
};
[Solution]
/* target part */
doc.write("<html><head></head><body>");
doc.write(text);
doc.write("</body></html>");
==>
/* replaced target part */
isIE = /MSIE/.test(window.navigator.userAgent);
if (!isIE) {
doc.clear();
doc.open;
}
doc.write("<html><head></head><body>");
doc.write(text);
doc.write("</body></html>");
if (!isIE) {
return doc.close();
} else {
return;
}
To : First commenter
Thank you for your response.
I tried to use appendChild function.
But, it doesn't work.
"text" variable has some HTML and JS tags which get data from other servers.
When I used appendChild instead of document.write function,
the tags can't communicate other server via network.
I don't know the cause.
This code is generated by coffee script compiler.
And coffee script code has the view class, so the code has prototype.
Original code(coffee script) is following one.
Tag = require("../src/tag").Tag
class View
constructor: (data) ->
#validated = data
#viewid = "product"
make_iframe: (id,text) ->
iframe = document.createElement("iframe")
iframe.width = 0
iframe.height = 0
iframe.id = id
document.body.appendChild(iframe)
doc = iframe.contentWindow.document
isIE = /MSIE/.test(window.navigator.userAgent)
if !isIE
doc.clear()
doc.open
doc.write("<html><head></head><body>")
doc.write(text)
doc.write("</body></html>")
if !isIE
return doc.close()
else
return
get_tag_files: (dir,fname,data,make_iframe) ->
xmlObj = null
if window.ActiveXObject
xmlObj = new ActiveXObject("Msxml2.XMLHTTP")
else
xmlObj = new XMLHttpRequest()
xmlObj.onreadystatechange = ->
if xmlObj.readyState == 4 && xmlObj.status == 200
text = xmlObj.responseText
tag = new Tag(data, text)
tag.replace()
make_iframe(fname,tag.get_tag())
xmlObj.open("GET", dir+fname, true)
xmlObj.send(null)
output_tags: (tags, path) ->
for tag in tags
#get_tag_files(path, tag, #validated, #make_iframe)
return """
"""
exports.View = View
Hello i am facing problem in all IE browser, I am loading iframe inside div using js code but somehow the css classes are not getting applied inside my iframe components like textbox, buttons,etc. . the same code works for chrome and forefox , only IE is creating problems. my code is like...
var head = document.getElementsByTagName('head')[0];
var myCSS = document.createElement("link");
myCSS.rel= "stylesheet";
myCSS.type= "text/css";
myCSS.href= Url + "/public/css/mycss.css";
head.appendChild(myCSS);
//for IE
if (window.attachEvent) {
window.attachEvent("onload", function() {
var divforIframe = document.createElement("div");
divforIframe.id = "divforIframe";
var i = document.createElement("iframe");
i.id = "myIFrame";
i.src = Url;
i.scrolling = "no";
i.frameborder = "0";
i.width = "500px";
i.height = "300px";
divforIframe.appendChild(i);
document.getElementById("myDiv").appendChild(divforIframe);
});
}