You most likely have encountered a situation (as a web developer) where you have an iframe box and you are using valid XHTML Strict. Iframes are still valid in FRAMESET and TRANSITIONAL XHTML but it is best to use XHTML 1.0 Strict or XHTML 1.1 (application/xhtml-xml). A method for including iframes have been found. It doesn't use the <iframe> tag at all.

Since tags are depreciated, new tags/CSS are to replace them (except DOM, which is a little off topic here). The <applet> and <iframe> tags were replaced by <object>. Yes, <object> is for inserting any foreign object into XHTML documents.

Since IFRAMES include HTML/XHTML documents, the MIME type for the document is "text/html" or "application/xhtml+xml". We will assume the first one because it is compatible with ALL browsers including Internet Explorer. There is of course a way to serve the latter one to Mozilla-derivatives and Opera using PHP but I'll save that for another tutorial.

So you have your MIME type, URL source and <object> tag. Put it together with like this:


A little more detail:


A variety of attributes work with the <object> tag. The elements are:

• align - Aligns the object. Use CSS instead.
• archive - The URL for archived versions.
• border - The border around the object. Use CSS instead.
• classid - Defines a ClassID in the registry.
• codebase - Defines where the code is for the object??
• codetype - The MIME type for the code in the above 2 values??
• data - The URL of the object (required).
• height - Height of object. Use CSS instead.
• hspace/vspace - Margins around the object. Use CSS instead.
• name - The name of the object if you are using it in JavaScript/VBScript or some other scripting language.
• standby - Text to display when loading
• type - The MIME type of the object (explained above). Required.
• width - Width of object. Use CSS instead.

Red attributes are depreciated. They will NOT validate on HTML 4.01 Strict, XHTML 1.0 Strict or XHTML 1.1.
Purple attributes MAY be incompatible with browsers. From personal experience, adding those attributes will only render it in Internet Explorer. We don't want that to happen.

All of these attributes + CSS is intended to replace all attributes of <iframe>. The only one I couldn't find easily was "scrolling" in <iframe>. Using CSS, the {overflow:scroll} thing works the same (haven't tested).

This is my first tutorial, sorry if I was a bit unclear about things.

This post has been edited by FirefoxRocks: Feb 24 2007, 04:08 PM

Thank you! It couldn't be simpler and gets rid of all those errors in the W3C HTML Validator.

Thanks again,

Dan

Iframes are not supported in xhtml strict so use an object instead. Very helpful example Thanks! That's the answer that I was looking for =)

Hi and thank you so much for this clear and straightforward tutorial!

Unfortunately, it works perfectly in our beloved Firefox, but in IE and Safari it displays nothing :(

Any ideas, useful links, suggestions? Please help me :)

I can post the code, but I am not sure I can do it since this is not a forum :p

-Francesca

Not terribly related, but if you have a frames site within an object or frame on your site, can you control the innermost frame (changing url) from your site? Yoursite=(Theirsite=((target)) controls).

Erm...as for IE, you can probably use a conditional comment for an <iframe>. It's a dirty trick as XHTML will parse it as a comment but it will still be rendered in IE (as only IE supports conditional comments).
It works for me in Safari, what version are you using? I tried it in Safari 3.0.4 Beta and Konqueror on Ubuntu and they both display the <object> as intended.

errata
Juggling An Iframe Box With Xhtml Sites

I can't believe that there is no attribute 'id'.

There is no 'I' in 'deprecated'.

Javascript with the Object Tag
Juggling An Iframe Box With Xhtml Sites

Replying to toby

Getting an HTML page embedded with the OBJECT tag to work in IE requires the addition of the CLASSID parameter

<object
classid="clsid:25336920-03F9-11CF-8FD0-00AA00686F13"
type="text/html"
...
</object>

Putting links in your page to change the displayed page in the OBJECT tag requires Javascript.

I have used:

Document.GetElementById('objectid').ContentDocument.Location = link;

With mixed success. It works once (clicking on the first link) but after that, contentDocument becomes read-only for reasons I do not yet understand.


-reply by Anonymous Coward

Google Calendar
Juggling An Iframe Box With Xhtml Sites

Thank you. It worked like a charm for Google Calendar!

-reply by Waner Del Rosario