Iframe replacement techniques
Including html in a page while maintaining xHtml strict compliance
I have added some kayak.com ads the other night, to the archive pages related to traveling. These ads are actually full-featured search snippets that allows you to directly search kayak.com database. Very handy things.
Sadly, they are written the old-fashion way, with quirks mode in mind, and worse yet – they are writing nested table tag soup directly into the page – no iframe thingie, like Google AdSense is doing. Thus, when my CSS files got applied to it, the snippet fell apart. Luckily, the snippet always opens a new window, thus I quickly coded in an iframe in which the snippet is displayed. Which was all dandy…apart from the fact that my pages are XHTML 1.0 Strict, in which iframe is banned element. Jolly.
Correct way to include another HTML page into another is by object. The element which only purpose is to insert any foreign object into nice and structured web page.The standard way of coding an object element is to use appropriate MIME type and add the foreign object’s URL. Naturally, this does not work in IE6 (nor IE7) so I had to look for the infamous clsid value for text/html.
Using an object Element instead of an iframe by Cody Lindley
Based on the technique from this page, my additions are simply to combine all the various bits into a single element for ease of use.
Code Sample
Firstly, we can combine the classid attribute with the non-IE object:
<object classid=”clsid:25336920-03F9-11CF-8FD0-00AA00686F13″ type=”text/html”
data=”object.html” style=”width:300px;height:200px;”>
<p>Fallback text</p>
</object>
Secondly, we need to eliminate the borders and scrollbars that IE presents:
<!–[if IE]>
<style type=”text/css”>html, body {border:0;overflow:visible;}</style>
<![endif]–>
Note that unless the external (the one in the “iframe”) document is in Quirks mode, a bevelled edge-type border will be rendered in IE7/Win. This is sub-par and will require more investigation.
Also note that I’m using a Reset CSS file on this page, so your mileage (in terms of resetting base browser styles) may vary.
