Scripting Object (as iframe replacement) in IE does odd stuff...

Question

I'm using the strict xhtml on my website, so I don't have the "Iframe" element. Instead, I'm trying to use the object tag.

I want to dynamically open content, so I've got a javascript function like this:

<object id="oPageName">

<script>
    function openPage(pageName) {
        var ifContent = document.getElementById("oPageName");            
        ifContent.data = pageName;
    }
</script>

If I pass in say "someFolder/somepage.aspx" to openPage function, it simply sets the content page to "http://mysite/" - like it's chopping off the remaining part of the URL.

It works great in FF and Chrome, but not IE 8.

Any tips on this odd behavior?

Answer 1

In earlier versions of IE (don't know about IE8) certain attributes on certain element types are immutable after being set once (programmatically or otherwise). I believe object and all the form elements (input, textarea etc.) behave this way.

I'm sure there's a more elegant way of solving this problem, but you could try something like this (untested):

function openPage(pageName) {
    var ifContent = document.getElementById("oPageName");
    try {
       ifContent.setAttribute('data', pageName);
    catch (e) { // catch immutable attribute error

       // create a new object and replace the old one
       var o = document.createElement('object');
       o.setAttribute('name', pageName);
       ifContent.parentNode.replaceChild(o, ifContent);
    }
}

Most JS framworks have their own versions of setAttribute() which work around IE's attribute handling bugs.

Answer 2

If I pass in say "someFolder/somepage.aspx" to openPage function, it simply sets the content page to "http://mysite/"

You're doing better than most, then. Changing object.data in IE8 does nothing at all for me, just like it always has in IE.

There is a non-standard 'object' property on <object>s in IE, that gives you the document object of the inner HTML page (as you would expect to get from the unsupported contentDocument property). However, navigating that page (through object.object.URL or object.object.parentWindow.location) does the same as writing to object.data: nothing. (IE seems to get confused; if you look at the object.object.location.href, it actually points to the parent URL even though it's the child document.)

Basically, it's bugged to hell and you're best off forgetting <object> for HTML embedding today. Swallow your pride and include the iframe, using the Transitional DTD if you want to validate.