Sunday, January 18, 2009

Using an IFRAME to force a doctype

There have been times when I wanted to create a JavaScript widget that I could embed into any web page. One problem I ran into was that I would develop my widget in a standards mode page, but then it would not work when embedded on a page in quirksmode.

"Who still uses quirksmode?" you might ask. Well, for legacy reasons, iGoogle gadgets do. I thought that OpenSocial fixed that, but item 6 of the spec says otherwise, though the discussion group suggests a distasteful workaround.

Either way, this whole doctype thing is a problem. On a web page, the document has a doctype property, but it's read-only, so trying to edit that is a dead-end. Originally, I tried manipulating the content of an iframe with src="about:blank" which I thought would be clean because it had no content, but no content means no doctype, so it is also stuck in quirksmode.

One option that does work is to have an empty html page with the strict doctype on the same domain as your JavaScript widget. That way, your widget can write its content into a local iframe using the empty html page as its source. The drawbacks to that approach are: (1) it complicates the API of your widget because it requires the consumer of your API to make a server-side change and bake the URL into calls to your API; and (2) you have to add some extra logic to listen for the iframe to load before you can write to it, so it forces your API to become asynchronous rather than synchronous.

The best solution I've seen so far is to dynamically create an iframe with no src attribute and to use document.write() to insert the content of the iframe or to set the src attribute to javascript:parent.functionThatReturnsTheDesiredContentAsHtml(). This test page demonstrates both techniques.

One thing that is particularly advantageous with this technique is that if your widget requires its own stylesheet, it can load it in the iframe instead of the top-level page where your CSS class names run the risk of conflicting with the CSS class names used in the host page. So even if you know that your widget is going to be used in a standards-compliant page, you may want to use this technique to create a "fresh namespace" for your CSS.

The only disadvantage that I've found with iframeing over inlining is with managing overlays that need to appear outside the iframe. In the test page, there is a green box that appears over the iframes and the main page. For it to be visible, it needs to be an element of the top-level page, which (1) may be in quirksmode and (2) will not honor the CSS rules defined in your iframe. That means that you may have to design your popup so that it works in both rendering modes and uses inline styles (exactly what we were trying to avoid with our universally-embeddable JavaScript widget!).

Also, the JavaScript code that manages such an overlay needs to be wary of its use of the document variable as it is important to use it in the correct context (iframe vs. host page). It is best to create different getters for the two documents and to use those exclusively, avoiding direct access to document altogether.

Overall, I am still pretty happy with this solution, though one thing that occurred to me is that this is a little frightening with respect to phishing in that a malicious web page could easily display an iframe to foreign content (that is familiar to you) and then display its own login box or credit card form on top of it to lure you to enter your information. I mentioned this to Mihai, and he said this is somewhat of a known issue, citing this example at zombieurl.com (warning: page contains sound). I guess that goes to show that you can never be safe from zombies, not even on the Internet.

20 comments:

  1. Thanks for all the tips mentioned in this article! it’s always good to read things you have heard before and are implementing, but from a different perspective, always pick up some extra bits of information. Visit@
    QuickBooks Support
    norton.com/setup

    ReplyDelete
  2. I appreciate, cause I found exactly what I was looking for. You have ended my four day long hunt! God Bless you man. Have a great day. Bye

    사설토토
    카지노사이트
    파워볼
    온라인카지노

    ReplyDelete
  3. I’m really enjoying the design and layout of your blog. I once again find myself spending way to much time both reading and commenting. But so what, it was still worth it!
    토토
    스포츠토토
    토토사이트
    먹튀검증

    ReplyDelete
  4. Thank you for the good writeup. It in truth was a amusement account it. Look complicated to far brought agreeable from you! However, how can we be in contact?

    사설토토
    바카라사이트
    파워볼사이트
    온라인바카라

    ReplyDelete
  5. tubi.tv/activate is an online platform that is a creation of Fox Corporation and stream the latest content and videos of your interest. In comparison to Netflix, the platform is free to access and you can watch as many as movies you want for free with the help of tubi. tubi tv



    Roadrunner email (webmail) is among the exceptionally famous email benefits in the United States. Here you will get complete information about Roadrunner email login issue. Possessed and constrained by Time Warner Cable Network, it enables clients to buy into the email which is diverted towards the system.
    Roadrunner email login

    ReplyDelete
  6. It is fine, nonetheless evaluate the information and facts around this correct. more info

    ReplyDelete
  7. After reading this I thought it was extremely and very informative. I appreciate you taking the time and energy to put this information together. Eligible citizens can apply for a visa for Turkey US citizen through a simple online application form to obtain an approved e-Visa electronically linked to their passport.

    ReplyDelete
  8. Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. 먹튀검증사이트

    ReplyDelete
  9. First of all, thank you for your post. 바카라사이트 Your posts are neatly organized with the information I want, so there are plenty of resources to reference. I bookmark this site and will find your posts frequently in the future. Thanks again ^^

    ReplyDelete
  10. Nice Information are there in it! Thank you for some information. You give me some idea's. Keep posting.

    야한동영상
    대딸방
    타이마사지
    안마
    바카라사이트

    ReplyDelete
  11. Hello, I'm happy to see some great articles on your site. Would you like to come to my site later? My site also has posts, comments and communities similar to yours. Please visit and take a look 메이저놀이터

    ReplyDelete
  12. You absolutely come with really good articles and reviews. Regards for sharing with us your blog. 먹튀검증디비

    ReplyDelete
  13. If some one desires expert view on the topic of running a blog then i propose him/her to visit this weblog, Keep up the pleasant job. 바카라사이트

    ReplyDelete
  14. Quality articles or reviews is the important to interest the people to pay a quick visit the website, that’s what this site is providing. 바둑이사이트넷

    ReplyDelete
  15. I simply want to tell you that I am just beginner to blogs and certainly enjoyed you’re web page. 바카라사이트

    ReplyDelete
  16. I’m impressed, I have to admit. Truly rarely should i encounter a blog that’s both educative and entertaining, and without a doubt, you’ve hit the nail within the head. Your notion is outstanding; the pain is an issue that insufficient everyone is speaking intelligently about. I am very happy that we stumbled across this inside my try to find some thing relating to this. 메이저토토추천

    ReplyDelete
  17. Interesting post. I Have Been wondering about this issue, so thanks for posting. Pretty cool post. It ‘s really very nice and Useful post. 스포츠중계

    ReplyDelete
  18. After reading this post, we can improve our writing skills and abilities. Here, we can find an informative post. Thanks for your post. 파워볼사이트

    ReplyDelete
  19. Thanks For sharing this Superb article. it is valuable For me Great Work. I ought to be compose greater remark on this incredible point. 먹튀검증

    ReplyDelete
  20. I've been looking for photos and articles on this topic over the past few days due to a school assignment, bitcoincasino and I'm really happy to find a post with the material I was looking for! I bookmark and will come often! Thanks :D

    ReplyDelete