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

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

 
 Discussion by FirefoxRocks with 11 Replies.
 Last Update: November 1, 2009, 7:31 pm
 
bookmark - Juggling An Iframe Box With Xhtml Sites How to make it strict and valid  
    
free web hosting
 
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:

CODE

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


A little more detail:

CODE

<object style="width:240px;height:70px" data="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:

  1. align - Aligns the object. Use CSS instead.
  2. archive - The URL for archived versions.
  3. border - The border around the object. Use CSS instead.
  4. classid - Defines a ClassID in the registry.
  5. codebase - Defines where the code is for the object??
  6. codetype - The MIME type for the code in the above 2 values??
  7. data - The URL of the object (required).
  8. height - Height of object. Use CSS instead.
  9. hspace/vspace - Margins around the object. Use CSS instead.
  10. name - The name of the object if you are using it in JavaScript/VBScript or some other scripting language.
  11. standby - Text to display when loading
  12. type - The MIME type of the object (explained above). Required.
  13. 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.

Mon Feb 5, 2007    Reply    New Discussion   


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

Thanks again,

Dan

Tue Dec 18, 2007    Reply    New Discussion   

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

Sun Jan 27, 2008    Reply    New Discussion   

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

Mon Feb 18, 2008    Reply    New Discussion   


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

Mon Feb 18, 2008    Reply    New Discussion   

QUOTE (FeedBacker)

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 :P

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

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

-Francesca
Link: view Post: 119119

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.

Tue Feb 19, 2008    Reply    New Discussion   

errata
Juggling An Iframe Box With Xhtml Sites

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

There is no 'I' in 'deprecated'.

Fri Mar 21, 2008    Reply    New Discussion   

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

Wed Apr 2, 2008    Reply    New Discussion   

Google Calendar
Juggling An Iframe Box With Xhtml Sites

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

-reply by Waner Del Rosario

Fri Apr 18, 2008    Reply    New Discussion   

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... 
-question by Sientz

Tue Nov 25, 2008    Reply    New Discussion   

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

I'm almost there with this code:

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]-->

<!--[if  !IE]><!-->

<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

 

Tue Feb 3, 2009    Reply    New Discussion   

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

<object data="http://page.Html" type="application/xhtml+xml" style="width: 340px; height: 280px;">

  <!--[if IE]>

       <iframe src="http://page.Html" style="width:340px; height:280px;" allowtransparency="true" frameborder="0" ></iframe>

  <![endif]--> 

</object>

Sun Nov 1, 2009    Reply    New Discussion   

Quickly Post to Juggling An Iframe Box With Xhtml Sites How to make it strict and valid w/o signup Share Info about Juggling An Iframe Box With Xhtml Sites How to make it strict and valid using Facebook, Twitter etc. email your friend about Juggling An Iframe Box With Xhtml Sites How to make it strict and valid Print
Reply / Comment Ask a Question? Share / Bookmark E-Mail a Friend Print

A Tutorial For Html Color Codes   A Tutorial For Html Color Codes (7) (9) Phpbb - Installation Tutorial ( For Newbies Based On Astahost Cpane)l phpBB 2.0.22 install...  Phpbb - Installation Tutorial ( For Newbies Based On Astahost Cpane)l phpBB 2.0.22 installation Tutorial with basic steps.