Home/ Questions/Q 6886571
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T05:46:33+00:00

Plain JS – please no jQuery suggestions – it is for a bookmarklet that

  • 0

Plain JS – please no jQuery suggestions – it is for a bookmarklet that needs to use as plain JS as possible.

I hope someone KNOWS the answer since I cannot reliable create a fiddle.

This code will run in the scope of the page it is inserted in – it works perfectly in Fx6-9, safari and latest Chromes on Windows XP and OSX – Only IE gives me undefined when I try to access the iFrame

var zContainer = document.getElementById('zContainer');
if (zContainer==null) {
  zContainer = document.createElement("div");
  zContainer.id="zContainer";
  document.body.appendChild(zContainer);
}    

var zStuff = {}; // minimise window var footprint
zStuff.html = '<body>Hello</body>';
if (!zFrame) { // did we already have one?
  zFrame = document.createElement("iframe");
  zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
  zIFS = zFrame.style; zIFS.border="0"; zIFS.width="500px"; zIFS.height="500px"; zIFS.backgroundColor="white"; zIFS.display="block";
  zContainer.appendChild(zFrame); // append to div

  zFrame = window.frames["zIframeName"]; // undefined in IE8 !!!!!
  // zFrame = document.getElementById("zIframeId"); // undefined in IE8 !!!!!

  zFrame.src="javascript:'<body></body>'"; // initialise body
  zFrame.document.write(zStuff.html); // or zFrame.contentDocument.write
  zFrame.document.close(); 
  // zFrame.document.body.innerHTML=zStuff.html; // also does not work

//  zFrame.src="javascript:'"+zStuff.html+"'"; // alternative method - either one works in Fx/Chrome
}

Thanks for any hints and for not voting this down. I hope the SO community will be as
helpful to me as I have been to it over the last year and a half…

Update – since the code I posted had some remnants of desperation, I changed it to 

if (!zFrame) { // did we already have one?
  zFrame = document.createElement("iframe");
  zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
  zIFS = zFrame.style; zIFS.border="0"; zIFS.width="500px"; zIFS.height="500px"; zIFS.backgroundColor="white"; zIFS.display="block";
  zContainer.appendChild(zFrame); // append to div

  zFrame.src="javascript:'<body></body>'"; // initialise body

  zFrame.document.write(zStuff.html); // or zFrame.contentDocument.write
  zFrame.document.close(); 
}

the above now replaces the page I am on with the code in the zStuff.html
instead of replacing only the iFrame content – it also broke in Fx

Now I have to do this in Fx which IE also does not mind but still replaces the window and not the iFrame

if (!zFrame) {
  zFrame = document.createElement("iframe");
  zFrame.scrolling="no"; zFrame.id="zIframeId"; zFrame.name="zIframeName"; zFrame.frameBorder="0";
  zIFS = zFrame.style; zIFS.border="0px none"; zIFS.width="549px"; zIFS.height="510px"; zIFS.backgroundColor="white"; zIFS.display="block";
  zDRContainer.appendChild(zFrame);
  zFrame.src="javascript:'<body></body>'";
  setTimeout(function() {
    var zFrame = window.frames["zIframeName"]; // this is needed for the document.write
    zFrame.document.write(zStuff.html); 
    zFrame.document.close();
  },100); 
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The hack I suggested in chat:

    var a = setInterval( function(){

    try{
    zFrame.contentWindow.document.write(zStuff.html);
    zFrame.contentWindow.document.close();
    clearInterval(a);
    }
    catch(e){}

}, 10 );

    Since it is not known when IE allows accessing contentWindow properties, this will keep trying until it is allowed.

    • 0