When working to achieve XHTML1.1 validity, because your all fancy for that content/design separation, you may come across the problem that iframes aren’t allowed anymore. The simplest solution to this problem is to use the object element.
When using iframes you would have some piece of code like
<iframe src="iframe.html" id="theIframe"></iframe>
when you decide to use the object element you would have something like this:
<object id="theObject" data="iframe.html" type="text/html"></object>
Thus object can load any sort of data, it is just perfect to replace iframes and the like. The object should be placed inside a div e.g.:
<div id="tbl"><object>...</object><div>
When it comes to manipulation trough javascript, there is that well known problem that IE doesn’t behave like it should (like real browsers e.g. Firefox do).
After posting a thread on http://groups.google.de/group/comp.lang.javascript/, I found the solution thanks to Martin Honnen from http://JavaScript.FAQTs.com/:
When using Firefox, changing the object element is as simple as
var objDiv = document.getElementById("tbl");
var obj = document.createElement("object");
obj.id = "theObject";
obj.data = "iframe.html";
obj.type = "text/html";
obj.width = "900px";
obj.height = "500px";
objDiv.appendChild(obj);
When using IE you should consider to write:
if (typeof objDiv.insertAdjacentHTML != 'undefined')
{
objDiv.insertAdjacentHTML('beforeEnd', [
'<object id="obj_results" data="iframe.html',
' type="text/html"',
' width="900px" height="500px"',
'<\/object>'
].join('\r\n'));
}
And if you want to achieve cross-browser-functionality:
var objDiv = document.getElementById("tbl");
var obj = document.createElement("object");
if (typeof objDiv.insertAdjacentHTML != 'undefined')
{
objDiv.insertAdjacentHTML('beforeEnd', [
'<object id="obj_results" data="iframe.html',
' type="text/html"',
' width="900px" height="500px"',
'<\/object>'
].join('\r\n'));
}
else
{
obj.data = "iframe.html;
obj.type = "text/html";
obj.id = "obj_results";
obj.width ="900px";
obj.height="500px";
objDiv.appendChild(obj);
}
I certainly hope that this is useful to any of you, as it was to me ![]()









