Include a dynamically created object

[molendijk]

Including an external HTML-document into a file is best done on the server side (with the help of a language like PHP).
If you want/have to do the inclusion on the client side, there are several options:
(i) Ajax;
(ii) the well-known hidden iframe-trick = extracting external content from a hidden iframe (the iframe itself will remain invisible); this is 'Ajax-like';
(iii) modern DOM-techniques for dynamically changing parts of the (main) document (no use of Ajax or an iframe);
(iv) including a text/html-object that contains the external content;

My guess is that with the latter method (note: no use of the deprecated iframe), we can do virtually everything we can do with the other techniques (and it's simple!, see the script below), the only exceptions being (a) including navigation menus (since the position of menu-items on the screen should be free: their position shouldn't be restricted by the size (right-border etc.) of the object containig the menu); (b) including parts of external files.

An enormous advantage of (iv) over (iii), which would seem the obvious way to 'do it', is that with (iv) there's no need for explicitly importing or defining the external css and js used for the external file.

Script:

function create_external(the_id,url,object_style)
{
var inserted=document.getElementById(the_id);
if(/*@cc_on!@*/false)
{//We have to use innerHTML for IE if we want to do this with a text/html-object
inserted.innerHTML='<object type="text/html" data="' + url + '", style="'+ object_style +'"><\/object>'
}
else //We could use innerHTML for non-IE too, but most coders will prefer the standard method
while (inserted.firstChild)
{
inserted.removeChild(inserted.firstChild);
}
OBJ = document.createElement("object");
OBJ.setAttribute('type','text/html');
OBJ.setAttribute('data',url);
OBJ.setAttribute('style',object_style);
inserted.appendChild(OBJ);
}

Usage (values for styles only serve as an illustration):
onclick="create_external('some_id','some_file', 'position:relative; width:190px; height:250px; background-color:yellow; left:0px; border:1px solid red;margin-top:9px'); return false; "

Here's an example.
===
Arie Molendijk

[mburt]

This is actually really cool. I never thought of use <object> as an include. Is this cross-browser?

[molendijk]

This is actually really cool. I never thought of use <object> as an include. Is this cross-browser?

I think it is cross-browser, with the exception of Netscape 7.0.
===
Arie.

[mburt]

I wonder why:

var obj = document.createElement("object");
obj.type = "text/html";
obj.data = url;
document.body.appendChild(obj);

Won't work in IE?

IE can handle regular attribute assignment... I don't see why it won't work

[molendijk]

I wonder why:

var obj = document.createElement("object");
obj.type = "text/html";
obj.data = url;
document.body.appendChild(obj);

Won't work in IE?

IE can handle regular attribute assignment... I don't see why it won't work

That's exactly the question I posted in another thread. Apparently, IE doesn't handle the text/html-object right (yet). I guess we'll have to wait for that until IE8.
===
Arie.

[mburt]

Typical IE.

[molendijk]

Typical IE.

Curse the day IE was created.
===
Arie.