Develop Reference

Dynamically created editable iframe not working in Firefox

I have an iframe that is generated in JavaScript with createElement() when a function is fired, which becomes a text editor. It works just fine in Chrome, Safari and Edge, but in Firefox, the innerHTML text, "Text Layer", will briefly flash within the iframe and then it disappears and the iframe doesn't seem to be editable. Upon inspection, the iframe's body tag is empty. If I set contentEditable to true on the iframe's body tag in the inspector it seems to work properly, but when I try to set this in my JS function, nothing happens in Firefox.
I'm guessing this has something to do with the iframe being created in JavaScript, since setting the designMode of an iframe already in the DOM to 'On' with JS seems to work properly. Wondering if there's a way to get this to work in Firefox, maybe another method of creating the iframe? I have seen some similar problems that were solved by putting some javascript in the iframe's src, as in the comments here, but that apparently causes problems in other browsers. Creating the iframe in JS is preferable to appending it from somewhere.
function text() {
var rtf = document.createElement("iframe");
rtf.name = "richTextField";
rtf.id = "richTextField";
rtf.className = "texteditor";
var dwrap = document.createElement("div");
dwrap.appendChild(rtf);
var tframe = document.getElementById("richTextField");
tframe.contentWindow.document.designMode = 'On';
tframe.contentWindow.document.body.innerHTML = "Text Layer";
tframe.contentWindow.document.getElementsByTagName('body')[0].focus();
tframe.onload = autosize();
};

Found this 15 year old bug report and was able to get it work by setting the contentWindow properties inside of a setTimeout function.
function text() {
var rtf = document.createElement("iframe");
rtf.name = "richTextField";
rtf.id = "richTextField";
rtf.className = "texteditor";
var dwrap = document.createElement("div");
dwrap.appendChild(rtf);
var tframe = document.getElementById("richTextField");
setTimeout(function(){
tframe.contentWindow.document.designMode = 'On';
tframe.contentWindow.document.body.innerHTML = "Text Layer";
tframe.contentWindow.document.getElementsByTagName('body')[0].focus();
}, 0);
tframe.onload = autosize();
};

Create an iframe with only javascript

I have been struggling on one of those programing challenge sites for a while. It has a console type thing that lets me enter javascript and press a run button. I need to create an iframe inside of that webpage with another webpage inside of it (for example, im on thiswebsite.com/level1 and I need to create the iframe with thiswebsite.com/level2 inside of it).
Have tried creating iframes as follows:
document.getElementById('someDiv').innerHTML = '<iframe src="thissite.com/level2/" height= 300 width=400>';
However it does not run when I try this, is there an alternative way?
Thanks.

Use createElement method of document
var a = document.createElement('iframe');
a.src = "your path will go here"; //add your iframe path here
a.width = "1000";
a.height = "500";
document.querySelector('body').appendChild(a)
I just append the iframe to body. To append it to someDiv replace last line with below code
document.getElementById('someDiv').appendChild(a);

I doubt that the site doesn't allow you to create iframes.
Like, if you try the below code in your Console
//define function
function prepareiFrame() {
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://google.com/");
ifrm.style.width = "640px";
ifrm.style.height = "480px";
document.body.appendChild(ifrm);
}
//call it
prepareiFrame()
Stackoverflow will throw the below error:
Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=OoWPV7agCuHt8wf3v6egDA' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

iframe auto height doesn't work properly on Firefox

I was looking for a solution for auto height adjusting depending on the contents that are inside the iframe, and this seems like it's working on chrome.
But for some reason, if i wait for the site to completely load, and then click on the 'Wall' tab on the main page, the iframe contents are not visible, as the height is set for '4px'.
Again, if you click on the wall tab while it's loading, or before it gets load, it works perfectly fine.
I'm guessing it has to do with the source.
The site I'm having problem with is here : http://xefrontier.com/
could anyone tell me why this phenomenon is happening?
and this is the source:
function resizeIframe(obj){
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function getDocHeight(doc) {
doc = doc || document;
// stackoverflow.com/questions/1145850/
var body = doc.body, html = doc.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight );
return height;
}
function setIframeHeight(id) {
var iframe_board = document.getElementById(id);
var doc = iframe_board.contentDocument? iframe_board.contentDocument:
iframe_board.contentWindow.document;
iframe_board.style.visibility = 'hidden';
iframe_board.style.height = "10px"; // reset to minimal height ...
// IE opt. for bing/msn needs a bit added or scrollbar appears
iframe_board.style.height = getDocHeight( doc ) + 4 + "px";
iframe_board.style.visibility = 'visible';
}
document.getElementById('iframe_board').onload = function() { // Adjust the Id accordingly
setIframeHeight(this.id);
}

Solution for OP's issue is as follows:
A function that interacts with iframes works in Chrome but not in Firefox.
STOP If there is ever a problem with Firefox and Chrome is ok with interacting with iframes, then consider if this occurs in a PC, Mac, or both.
Chances are it's going to be Mac and it's wonderful relationship with Firefox (note: sarcasm cannot not be expressed very well on keyboard).
If the problem is isolated to the Mac running Firefox, then you can do the following to fix it 88.4% of the time.
Locate any event handlers that are listening for the load event on iframes:
ex. <iframe src="domain.com" onload="eventHandler()"></iframe>
REMOVE=================^-------===THIS===------^.
Disable/remove them.
At the very end of your </script> block add this:
ex. window.onload = eventHandler;
NOTE ===================^=^ -DO NOT ADD () at the end of function
Firefox Mac has many different issues unique onto itself, some by design. One of those bugs is it's inability to acknowledge an iframe's existence after it's been loaded. Firefox Mac will deal with iframes after everything else has been loaded. This is just my observation from experience.

use the following code to resize iframe height
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = (obj.contentWindow.document.body.scrollHeight) + 'px';
}
</script>
and in iframe tag
<iframe src="somepage.php" width="100%" frameborder="0" scrolling="no" onload="resizeIframe(this)"></iframe>

Create and close iframe in bookmarklet

I've written a bookmarklet (with a little help from the experts at Stackexchange) and I've run into a small little issue where I can't close the thing.
Here's the code (sensitive people should probably move on):
javascript: (function () {
var htmlheader = "<html><head></head>"
var html = htmlheader + "<body><a href='javascript:document.getElementById(\"TroubleiFrame\").style.visibility = \"hidden\"'>Close</a>" +
"</body></html>";
var iframe = document.createElement('iframe');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
iframe.style.background = "#fff";
iframe.style.width = "50%";
iframe.style.height = "500px";
iframe.style.left = "25%";
iframe.style.top = "25vh";
iframe.style.position = "fixed";
iframe.style.zIndex = "9999";
iframe.id = "TroubleiFrame";
iframe.style.boxShadow = "0 0 0 100vw rgba(0,0,0,0.75)";
document.body.appendChild(iframe);
})();
When clicking on the close link I get this error:
Uncaught TypeError: Cannot read property 'style' of null
If I paste the command in Chromes console it works:
document.getElementById("TroubleiFrame").style.visibility = "hidden"
Do you have any ideas on what I'm doing wrong? If possible I'd love a brief explanation too so I'm learning something from it.
/Patrik

Your iFrame doesn't know about an element called "TroubleiFrame" since it is in a child window.
You need to call the parent instead, and from there you can close it
parent.document.getElementById("TroubleiFrame");
Look at this question to see how to close the iFrame properly. Right now you're just going to hide it

I've also came across this problem creating a bookmarklet just like Pinterest's Pin It.
It should work cross-domain.
The only way I could work this out, was by posting events between the page inside the iframe and the parent page following this example on GitHub:
https://gist.github.com/kn0ll/1020251
I've posted an answer on this other thread:
https://stackoverflow.com/a/43030280/3958617
And also found one more example on this other thread:
https://stackoverflow.com/a/21882581/3958617
Hope it helps!

DHTML, iFrame and IE

I've got a piece of JavaScript that inserts/removes an iframe from the DOM. Everything is dandy in Chrome and FireFox but the iframe is not displayed in IE. The code below is the creation and insertion. When inspecting with a Developer tools I can see that the iframe is part of the DOM exactly as I expected it to be. Any suggestion on what might cause it not to be displayed?
function getiFrame(target) {
var frame = document.getElementById(target);
if (null == frame) {
frame = document.createElement("iframe");
frame.setAttribute("width", "100%");
frame.setAttribute("height", "1000px");
//frame.setAttribute("frameborder", "0");
frame.setAttribute("id", target);
frame.setAttribute("name", target);
frame.setAttribute("src", "http://dmi.dk");
} else {
frame.src = "http://dmi.dk";
frame.style.visibility = "visible";
}
return frame;
}
var frame = getiFrame(target);
var row = document.getElementById(contentRowId);
for (var i = 0; row.childNodes.length > 0; i++) {
row.removeChild(row.childNodes[0]);
}
row.appendChild(frame);
EDIT:
To clarify I've tryed setting the attributes directly (as suggested by Tim Down) the above was the result of my desperate attempts.
Further when inspecting the DOM I get a perfectly valid iframe tag:
<iframe propdescname="full" width="100%" height="1000" id="full" src="http://dmi.dk">
and inspecting that also shows that it's read and parsed the src (http://dmi.dk) correctly. I can inspect the DOM of that site too.
So what puzzles me is that when everything seems to work. What might stop it from being displayed.

There's one obvious problem:
frame = document.createElement("div");
should be
frame = document.createElement("iframe");
Also, setAttribute is unnecessary, verbose and error-prone in IE. Use DOM properties instead:
frame.width = "100%";
frame.height = 1000;
//frame.frameBorder = 0;
frame.id = target;
frame.name = target;
frame.src = "http://vrk.dk";

Jim Coplien referres to this as the Rubber Duck pattern. "You cannot ask xx before You've consulted the rubber duck". Who hasn't solved there own question while asking some one for advice.
I'was editing my post writing that the iframe was in a td and came to think that I hadn't made sure it actually was. The issue turned out to be me removing the td and inserting the iframe into the tr which IE incidentally handles differently when done dynamically than when done statically.
Thanks for listening in, playing the role of "the rubber duck"