Good question. No, it behaves properly in the Tryit Editor. Now, maybe Tryit introduces some critical difference over how things run when the browser is getting its HTML directly from the server. When you click "Run" in Tryit, you don't communicate with the server (I think). Instead, you run this JavaScript:
submitTryit()
//var adrefreshtimer
function submitTryit(n) {
var text = document.getElementById("textareaCode").value;
var ifr = document.createElement("iframe");
ifr.setAttribute("frameborder", "0");
ifr.setAttribute("id", "iframeResult");
document.getElementById("iframewrapper").innerHTML = "";
document.getElementById("iframewrapper").appendChild(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
//23.02.2016: contentEditable is set to true, to fix text-selection (bug) in firefox.
//(and back to false to prevent the content from being editable)
//(To reproduce the error: Select text in the result window with, and without, the contentEditable statements below.)
if (ifrw.document.body && !ifrw.document.body.isContentEditable) {
ifrw.document.body.contentEditable = true;
ifrw.document.body.contentEditable = false;
}
// if (!adrefreshtimer) {adrefreshtimer = new Date().getTime();}
// if (new Date().getTime() - adrefreshtimer >= 30000) {
// if (n == 1) {
// googletag.cmd.push(function() {
// googletag.pubads().refresh([gptAdSlots[0]]);
// });
// }
// adrefreshtimer = new Date().getTime();
// }
}
I'm a JavaScript noob, as yet, but it looks to me like this line reads the JavaScript in the code window:
var text = document.getElementById("textareaCode").value;
And it looks to me like this line writes that JavaScript to the result window:
ifrw.document.write(text);
That would appear to be a purely synchronous operation, whereas I am guessing (and just guessing, mind you ) that this problem arises when the include is executed asynchronously with transmissions from the server. W3's code looks like it tries to handle that with this line in their function:
if (xhttp.readyState == 4 && xhttp.status == 200)
as I believe that hard-coded 4 tests for the page being done loading. So, it ought to work. And it does in most browswers, and for most pages. The only time I see a problem is in Chrome, with a really short page. That just smells like a synchronization error, to me.
What's your take?