Loading with DOM method instead of innerHTML

[molendijk]

When you have something like this:

<iframe src="included.html" style="width:0px;height:0px" frameborder="0"></iframe>
<div id="loader" ></div>

in your page, then you can load the content of 'included.html' in it by something like this:

onload="document.getElementById('loader').innerHTML = frames[0].document.body.innerHTML;"

Simple and easy. But I'd like to obtain this result with pure DOM methods? How would I do that?

Thanks,
Arie.

[jscheuer1]

That can get complicated, as has been mentioned elsewhere. Twey seems to think (if I understood him correctly) something called json will parse XML into DOM level 3 code. However, think about what you are doing. You are already loading the iframe. If you are bothering with that, why not just display it?

Another thing to consider is that iframe is deprecated in HTML 4.01 Strict and above, so there really isn't any need to use a more standard method than innerHTML to deal with it.

Also, I don't think:

frames[0].document.body

will work, and if it does, it isn't cross browser. I'm not sure, but I believe that the iframe must be 'gotten' as a document element for that, not as an implied part of the window.frames object/function/collection. You could give it an id and get it with document.getElementByID(), for example, or with document.all where supported, etc. And there is the matter of the iframe's content document, I'm certain that it is referred to in different ways in different browsers.

[molendijk]

John,
Thanks for your reply. I was afraid that it would be complicated.

Loading the iframe instead of just showing it has certain advantages if the loaded file is a menu: if the menu sticks in the iframe, then certain things are (often) not possible.

As for 'frames[0].document.body...', that was just to illustrate my question. It can easily be replaced by something that's crossbrowser.

Iframes are getting deprecated, yes. But <object>...</objects> is OK. I could do the innerHTML-thing with an object.

So I would be very pleased if replacing innerHTML with DOM would yield the intended result. But, as you said, that would get complicated.

Arie.

[molendijk]

John,
Here's an illustration of what I can do with innerHTML & what I would like to replace with DOM methods.

Arie.

[Aaron]

I had a nightmare with trying to do the "the right way". Then went to innerHTML and it works! The "right way" used to suddenly crash IE7 ... so avoid that way. I'm sticking with innerHTML whenever possible.

[Twey]

var nods = frames[0].document.body.cloneNode(true).childNodes, op = document.getElementById('loader'); while(op.hasChildNodes()) op.removeChild(op.firstChild); for(var i = 0, n = nods.length; i < n; ++i) op.appendChild(nods[i]);

Probably best abstracted into some functions:

var Dom = (function() {
  function clearChildren(nod) {
    while(nod.hasChildNodes())
      nod.removeChild(nod.firstChild);
    return nod;
  }

  function cloneChildren(inp, out) {
    var nods = inp.cloneNode(true).childNodes;

    Dom.clearChildren(out);

    for(var i = 0, n = nods.length; i < n; ++i)
      out.appendChild(nods[i]);

    return inp;
  }

  function getElementById(id) {
    var f;

    return document.getElementById(id)
      || (f = document.getElementsByName(id) && f[0]);
  }

  getElementById.clearChildren = clearChildren;
  getElementById.cloneChildren = cloneChildren;

  return getElementById;
})();

onload = function() {
  Dom.cloneChildren(frames[0].document.body, Dom("loader"));
};

[molendijk]

Well, Twey's code looks very promising (at first sight), so I'm going to test it as soon as I have some time.

Thanks,
Arie

[molendijk]

Hello Twey,
Works fine in non-IE, but not in IE6. I have not tried IE7 yet.
It says that there is an invalid argument somewhere in:

for(var i = 0, n = nods.length; i < n; ++i)
      op.appendChild(nods[i]);

Arie.

[Twey]

Sorry, op should be out. Shouldn't have worked on anything else either. Edited.

[jscheuer1]

Unless a way can be found to make IE do this with the DOM, this is probably about as good as it gets:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>domFrame</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function domFrame(n, id){
if(!document.cloneNode||!window.frames||!window.frames[n])return;
var nods=window.frames[n].document.body.childNodes, o=document.getElementById(id),
doIt=toDoIt=function(){for (var i = 0; i < nods.length; i++)o.appendChild(nods[i].cloneNode(true));}
for (var i = o.childNodes.length-1; i > -1; --i)
o.removeChild(o.childNodes[i]);
/*@cc_on @*/
/*@if(@_jscript_version >= 5)
domFrame.ie=true;
try{toDoIt();};
catch(e){o.innerHTML=window.frames[n].document.body.innerHTML;};
@end @*/
if(!domFrame.ie)
doIt();
}
</script>
</head>
<body>
<iframe style="display:none;" src="ext.htm" width="300" height="300" scrolling="auto" frameborder="1"></iframe>
<input type="button" onclick="alert(window.frames[0].document.body.innerHTML);" value="iH"><br>
<input type="button" onclick="domFrame(0, 'output');" value="DOM">
<div id="output"></div>
</body>
</html>

The code isn't polished, but it works. The 'iH' button alerts the iframe's document's innerHTML, the 'DOM' button inserts the iframe's body's children onto the page via the DOM if possible, falling back to innerHTML in IE, but only if IE won't do it like everybody else.

I'll have to take back what I said about:

window.frames[n].document.body

It seems much more universally supported for this than I realized.