Juggling An Iframe Box With Xhtml Sites How to make it strict and valid

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:

<object data="http://http://www.x-kings.com/public/banner/guild_short.php?name=XKingdom; type="text/html"></object>

 

A little more detail:

<object style="width:240px;height:70px" data="http://http://www.x-kings.com/public/banner/guild_short.php?name=XKingdom; type="text/html" standby="XKingdom Guild Information"></object>

 

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.

Edited February 24, 2007 by FirefoxRocks (see edit history)

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 -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).

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

-Francesca

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

IE vs FirefoxJuggling An Iframe Box With Xhtml SitesIt worked for me also...Well at least in Firefox it works and it validates but in IE I just get an empty box.I saw some semi-complicated java script things to try and get around this but I couldn't really figure it out. It's called the Improved Satay Method... 

Compliant XHTML for Google Calendar. Success!Juggling An Iframe Box With Xhtml Sites

I'm almost there with this code:

<!--[if lte IE 7]><iframe src="(your url goes here)" style=" border-width:0 " width="533" height="800" frameborder="0" scrolling="no"></iframe><![endif]--></p><p><!--[if  !IE]><!--></p><p><object data="(your url goes here)" style="width:533px; height:780px;" type="text/html"></object><!--<![endif]--><noscript><p>You must have JavaScript to display the calendar. </p></noscript>

If you check the wikipedia article on conditional comments, it'll explain why each works. Summary: In IE, it sees the first part as an instruction to process the first and the second part as an instruction to ignore. In standards compliant browsers, it sees the whole first part as a comment and the second part as two comments, a standards-compliant object, then another comment. Ideally everyone's happy, except maybe the webmaster who has to monkey all of this around.

 Naturally, modify the styles and the URL to what google calendar or whatever gives you.When IE 8 comes out, your actual mileage may vary.

 I hope that helps!

-reply by Chris Dillingham

 

Thanks for your help. For those who want to fix the IE problem, we might consider cheating an option:

<object data="http://forums.xisto.com/no_longer_exists/; type="application/xhtml+xml" style="width: 340px; height: 280px;">

  <!--[if IE]>

       <iframe src="http://forums.xisto.com/no_longer_exists/; style="width:340px; height:280px;" allowtransparency="true" frameborder="0" ></iframe>

  <![endif]--> 

</object>