Change all instances of object to iframe for IE using Jquery

Question

I was wondering if it would be possible to use jquery to change all object tags on a site automatically to iframe for IE 8 and below. I would like this so that it can be xhtml 1.1 valid and not have to be double coded all the time and you would not have to focus on non-standard browsers.

The data attribute would have to be changed to src, I would like frameborder="0" to be inserted, and all styles set to the object tag also set to the iframe tag.

I don't want this to turn into a debate on iframes vs objects, I just thing this would be a huge time saver and would encourage proper strict xhtml coding.

Thanks for any input!

Answer 1

For a basic rundown on how to change an element's type see jQuery convert DOM element to different type (no idea whether it'll work properly in XHTML, but it well might), but I don't think this is a good idea at all. I can see it cause delays on older machines (on which IE6 runs), and obviously, it won't work when JavaScript is disabled. All that to achieve valid code? Not a good idea IMO.

Before doing that, if the code has to be valid under any circumstances, I'd consider serving different code to IE6 on server side.

Answer 2

I do not know if you can change the DOM element type, but you can always create a new IFRAME element and delete the old element instead.

Something like (caution: untested!)

$("object").each(
    function()
    {
        var obj = $(this);
        $("<iframe/>")
            .attr({
                src: obj.attr("data"),
                style: obj.attr("style"),
                frameborder: 0
            })
            .after(obj);
         obj.remove();
    });