Should we stop using iframes in IE?

In November last year, Aleksandar Vacić wrote his post Insert HTML page into another HTML page (found through No more iframes?). Basically, what it is about is finding a way to use an object element instead of an iframe to get the correct behavior in Internet Explorer.

Right about now, I guess your questions are why, how and is it necessary?

Why?

Internet Explorer doesn’t support using object elements the way they’re supposed to; for including content from another URL, an image and similar things. And the reason for not wanting to use an iframeis that iframe elements aren’t allowed in any strict doctype, be it HTML or XHTML (and really, you should definitely use a strict doctype). So, the initial motivator for Aleksandar is to have completely valid code.

How?

What he did was finding the classid in IE associated with iframe elements, and simply added that to an object element, and voilà! His suggestion is to use conditional comments to serve an object with classid to IE, and a regular one to web browsers properly supporting object elements. Personally, I’d rather do this distinction on the server-side, but that’s up to you.

Is this necessary?

First, let me applaud Aleksandar for finding this method. It is exactly the kind of thinking outside the box that I admire and respect! However, I’m not sure this is the path to go, and I also wonder if the hunt for just valid code has gone too far. Since IE still doesn’t support object for these things, I’m just thinking that maybe one validation error isn’t that bad.

I mean, maybe this works just fine in IE, but having worked with Microsoft products for a long time, I’m just wary that some kind of security update or something like that will one day suddenly kill this behavior. Even though it seems to work fine in the test cases I’ve seen, you never know when web browsers turn on you…

So, at the end of the day, I don’t think I will use this, but if you want to, go crazy!

 

What’s your take?

Am I just worrying too much, or is my gut instinct the safest way to go?

20 Comments

  • Devon says:

    When I experimented with his technique, I found that IE 7 had a flicker to the object, when following links that changed the object's URI. For me, that's enough to decide I won't use it on the web. It's a great proof of concept though.

  • Kanashii says:

    I don't get it, why not just use a Transitional Doctype?

    It works, and always will, and it's more "Standards Compliant" then using an <code>iframe</code> in a Strict Doctype.

    There's nothing wrong with using Transitional Doctypes and HTML. The quality of the code depends on the code itself not what Doctype it uses.

    Kind of seems people are beginning to think HTML is cursed and your code isn't any good if you don't use XHTML 1.0 Strict or higher.

  • Chris says:

    I think, if one delivers two different pages, one for IE and one for others it's easier to use an iframe in IE and an object in other browsers.

    Apart from these considerations I try to avoid iframes (or substitutions) if possible.

    Any form of frames often brings trouble.

  • Pat Dobson says:

    I always worry about using any code that can easily be renamed as a 'hack' for exactly the reason stated in the original post. Sooner or later (probably later) the IE developers (?) are going to come along and remove the 'hack' . . . and your website will stop working how you want it to.

    I try, as much as possible, to write CSS that works on all browsers. With regards to iFrames, I only have one site that uses them and that's only to shoehorn my Coldfusion coding into a non-Coldfusion site – I think I can live with that !

  • Robert Nyman says:

    Devon,

    I agree.

    Kanashii,

    Simply put it's about rendering modes, but also about allowing for sloppy coding if there are other external web develops on board the project. Basically, transitional is just meant for an overgoing phase, not to be a permanent solution.

    I'd choose a strict doctype with a validation error any day over a valid web site with a transitional doctype.

    For more information, please read:

    HTML or XHTML?

    No more Transitional DOCTYPEs, please

    Chis,

    Yep.

    Pat,

    Yes, I shy away from using them too.

  • Why use the object-tag for IE when you anyway using the comments? If the reason is to just get "valid" code also for IE I can see why, but in the end you always know that IE supports IFrames and the code will validate anyway because of the comments, so in the end this hack only turns out to be an end in itself, and in my opinion valid XHTML shall not be seen as an end in itself, it shall be seen as a way to grant compatibility, and as long as the "real" code (the one that is inside the comments) is valid you can gladly use the IFrame-element inside the conditional comments, IE will not care anyway, not today nor in the future…

  • Kanashii says:

    Robert,

    It's a validation error because iframes are not defined in the specification for Strict doctypes so they shouldn't work even though they do. If you absolutely must use iframes you should use a doctype that supports it.

    Also I'm fairly sure Transitional+URI will render in Standards Mode in all recent browsers.

    I don't think anyone should be using iframes though. They are in the Transitional doctype so they can be transitioned out and I agree in all other circumstances that people shouldn't use Transitional but when you must use iframes I think that it's the one time it should be used.

    You can still have perfect code that would validate under a Strict doctype when using a Transitional one if you want it to. The doctype doesn't make your code sloppy, the coders do. : )

  • Robert Nyman says:

    Martin,

    Very valid points, and I totally agree.

    Kanashii,

    Without a doubt, I try not to use <code>iframes</code> in the code as well, but sometimes there ad-related or other issues/demands.

    Also I’m fairly sure Transitional+URI will render in Standards Mode in all recent browsers

    Absolutely not. Firefox/Mozilla and Opera will use an Almost Standards Mode which is different from Standards Mode. More information can be found in Gecko's "Almost Standards" Mode and Activating the Right Layout Mode Using the Doctype Declaration.

    The doctype doesn’t make your code sloppy, the coders do

    Oh, definitely. But it just makes it harder to find, say, if another web developer has inserted formatting things in the HTML code (since all that crap will be allowed), instead of properly having it in a CSS file.

  • Kanashii says:

    Welp in that case, Transitional is evil : )

    I was going by this Doctype Grid but it's good to know otherwise.

    Hopefully I won't have to use <code>iframes</code>, I definitely wouldn't voluntarily.

  • Kanashii says:

    Just wanted to add one more thing:

    Almost Standards Mode is identical to Standards Mode except for the way images are aligned in tables so given that you are actually coding properly then this shouldn't be a problem at all.

    So I guess it's not too bad in the end, provided the person knows about the alignment difference.

  • Robert Nyman says:

    Kanashii,

    That is true for Firefox, but other web browsers might interpret that differently. Still, in the end, transitional is just what the name implies: a transitional phase, a bridge to the proper version.

  • Kanashii says:

    That it is. One good thing about learning everything recently is I got to skip all that old quirks mode table based tag soup and went straight to Strict Standards : )

  • Aldrik says:

    I stopped using iframes years ago, object elements work fine. You just need to set the width and height for them to work as expected in IE (like the img elements I believe this is best practice anyway).

    <code>

    http://www.robertnyman.com

    </code>

    If you want to use object elements for images (I don't recommend it but if you did) you can remove the IE boarders by setting the css via javascript (think it's the only way).

    <code>

    function fixObjectImages () {

    if(!document.getElementsByTagName) {

    return;

    }

    var objs = document.getElementsByTagName('OBJECT');

    for (n = 0; n

    </code>

  • Aldrik says:

    Way to go WordPress (doh).

    <object type="text/html" data="http://www.robertnyman.com/&quot; width="680" height="250"&gt

    http://www.robertnyman.com

    </object>

  • I think that we should stop using iframes all together, they are the bigest pain i have ever come across, more worse than ASP.

  • alan says:

    You may need to keep Iframes aroud a little longer.

    Ever tryed to get text in front of a flash movie ! well Iframes provide th answer and you can see a sample at http://www.Websitetips.eu on the home page.

    Iframes are also usefull for custom Ajax calls.

  • AntÃ&sup3;nio says:

    These days, iframes are needed for one thing exactly, and that is uploading files in an ajax application. And I don't see that going away soon – we're in dire need of browsers introducing a native mechanism, but – what with having to support IE6+ for probably a long time.

  • @alan .. To get text infront of a flash movie is just by setting wmode to transparent.

    To stick to strict you simply cant use iframes. Simple as that.

    Iframes are still used and needed for some purposes but still there are alot of different approaches you can use to leave them out and stick to stict.

    The method Aleksandar describes is indeed a nice approach but not a native solution.

  • dj says:

    seems like iframe with src= is behind all the chatter on web about the BACK button history being populated with URLs that begin with “ads” effectively ruining the BACK button.

    Anyone know how an end-user can prevent this?

  • book says:

    nice post, thanks for sharing.

    I usually don’t post on Blogs but ya forced me to, great info.

Leave a Reply

Your email address will not be published. Required fields are marked *