…or what to use instead of iframe in XHTML Strict pages.
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.
This proved to be quite a task, as I could not find any reference for that and after trying for 10 minutes I gave up and opened regedit, found the clsid branch and started arrowing-down until I found what I needed. After that, it was easy:
This worked like a charm, but in IE (both 6 and 7) it shows with an ugly border and scrollbar, even though the content itself was less than the width and height of the object element. It turned out that I need to specify this in the included page:
With this, you get seamless integration of external .html (or .asp or .php or whatever) into current web page.
[update, Nov 24th] Looking at the code, above, I think that p with the backup content is not really necessary. That would be displayed if for some reson the object could not be displayed. But the object data handler is the browser itself, not some external plugin, thus it is always present. Just object is enough (thus the strike through line in the example above).
[update, Nov 28th] Brad Wright chimed in with a valid argument that object may not be supported in all user agents. Backup content should be used.
Update, June 5, 2008: This post turned to be a hit. I never intended it to be a solution to everything, only to a particular problem I had at the time (I’m not even showing kayak.com ads anymore).
A lot of people add comments that the scrollbar-fix is not working. Note that included page in my case was non-standard tag-soup page, thus the two given styles somehow resolved my issue, without any promises it will work in all cases.
A lot of issues came up in comments for which I don’t have a solution (of the top of my head) nor time and incentive to investigate further. If I ever do, I’ll write it up. In the mean time, you’re on your own.
Translated to: Brazilian-Portuguese (by Mauricio Samy Silva).
Very nice. Is there anyway to get javascript code from the embedded page to talk with the parent page?
I love the “plain text” link on the html boxes! that is so great and helpful as a visitor.
I can’t seem to get rid of the border in IE7…
Anyway, how can you automagically make the object’s size equal to that of the page that is being displayed in it? Otherwise, it would sorta defeat the purpose for me.
Oh yeah, for me, to get rid of the scrollbar, I had to use this:
html
{
background: #000000;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body
{
background: #000000;
height:100%;
margin:0;
overflow:hidden;
padding:0;
}
Thanks all.
hmmm.… this doesn’t seem to be working for me.… is it platform specific?
Hey Alek,
I have a question for you, but I just wanted to say what’s up first. I am an American Croatian, I know there’s tension but my cousin just married a orthodox serb. If that means anything to you. How’s the wine making coming, sounds like something I would enjoy but I only have enough room for japanese maples.
Anyways, I have a question. I used your technique in Joomla, but the IE fix isn’t working. I have loked for a solution but there isn’t doesn’t seem to be a straight forward solution, and I may just ditch the feature if I can’t get it to work. Any ideas? Thanks so much.
HELP me PLEASE!!! I am a lowly do it yourselfer when it comes to web design, and I am trying to save my company some time and do our website myself. my problem is that i am trying to display our online store on my homepage using the object tags. this wotks perfectly in Firefox but goes ape sh$$ in IE either not displaying the page at all or not displaying it and opening the store url in a new window. Is there any way to make this work, i tried the code you had above but i must have done something wrong because it did not work for me. If you could please help me i would appreciate it soo much.
Thanks
James cox
Unseen Racing
The only thing I see is the bloody title (Insert HTML page into another HTML page) and then the comments… Where’s the post??? Tried using FF2 / IE7…
David, thanks for commenting.
Post is back up, I’ll blog about what the problem was.
Hey, I am trying to use this for asp.Net. Anyone have any suggestions? I am able to get the aspx page to show up, but the code-behind is not being registered, what should I do? I also tried to put an asp call to the code-behind, but that did not work.
And sorry that this is an out of date post.
Thanks a lot Aleksandar, I was looking for this simple code for a while,
Quick question, as you can see, here (http://cyanatrendland.com/onlinestore) Id like to put a white background on this page,
If I put
its overriding the all page background– I would like to just have a white background around the
is it possible ?
Would love to have a little help on this :)
Thanks a lot
Can i somehow remove border and scrolling?
I need your help. acually i am working on .net web application. My web pages are static. I need to change the browsing settings from one page to another page of particular text. I have no idea about this.
OK. Have implemented these steps and it works great with IE and Safari. However, in Firefox the scroll bar and border remain. Any suggestions?
WOW ! Good code is always relevant. This solved my problem. It was compounded by using css for rollover links and an overlay graphic…but it worked. Thanks.
The only problems I had with the scroll bars were resolved by making the object size larger than the table I used in the included html. Once I got that figured out the scroll bars went away.
If i am using external URL from different domain, it’s not displaying the page in object tag. Could you please help me out?
I thought I was getting mad where this worked for everyone except me.
Very very very **very** important note: please add an update in text that unless the target document is in Quirks mode the frame border will ALWAYS be rendered in IE. When you change doctype of target document to transitional for example — the border dissapears, as stupid as it sounds — thank you IE!
Please add this into text, this would save me at least an hour if I knew that.
This is where I found reference to that: http://intranation.com/test-cases/object-vs-iframe/
Also you should probably update your code like:
and replace with
most probably IE8 will render this properly therefore the fallback code is needed probably only for IE7 or IE6 (haven’t tested it though).
thanks for this. was looking for a way to embed a Google Calendar without using the iFrame. This worked perfectly!
Cheers,
John
Click to see website of mine and give me hint:
In “UNO Forums” page, I have a problem with fitting those forums in the annoyingly small area they provide. I’m rather new in WP so I don’t even know if it can be fitted, or if the right hand boxes can be re-arranged somehow. My php knowledge is way too minimal to understand whatta hack should I do.. :D
Oh and, good job in code, btw.. Works in “normal” HTML sites well.. =)
It doesn’t work in Flock browser… unless someone has already figured that out here.
Thank you so much, Aleksandar. It works great.
This worked great, just can’t figure out how to get the page to be more to the right.
Hi Aleksandar!
Got a curious and nasty exception for XHTML validition to your excelent code. I was trying to add an static alternative to when JS is turned off and checked with suprise that XHTML validator fails in non IE part (due the trick) when wrapped in noscript tag.
…
backup content
Update: Not really a problem with ur code but Script limitations. Just need to wrap in a ! :)
… IE part …
backup content
I cannot get the IE version to work cross domains.
Any ideas?
Thanks. Great post. Straight to the point, and it WORKS!