Your SlideShare is downloading. ×
0
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Modern iframe programming
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Modern iframe programming

15,724

Published on

Published in: Technology
4 Comments
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
15,724
On Slideshare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
146
Comments
4
Likes
26
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. modern iframeprogramming txjs 2011
    • 2. who invited this guy?• name’s ben• strange last name• work at disqus• hail from toronto
    • 3. disqus?• dis·cuss • dĭ-skŭs• third-party commenting platform• served on a bajillion sites• we use our fair share of iframes
    • 4. first, some history
    • 5. frames
    • 6. frames• introduced in netscape navigator 2.0 (1996)• standardized in html 4• frameset, frame, noframes• ... but obsolete in html5 (!)
    • 7. iframes
    • 8. iframes• introduced in internet explorer 4.0 (1997)• “inline” frame• not going anywhere (part of html5 spec)
    • 9. more than justembedding content
    • 10. “src-less” frames
    • 11. “src-less” frames• separate window, DOM environment• property access from parent• contents load independently
    • 12. restoring defaultbrowser objects
    • 13. default objects• undefined• window• JSON• #toString• #indexOf
    • 14. default objects• they can be modified - by anyone• often in incompatible ways• painful for third-party scripts
    • 15. undefined
    • 16. prototype & toJSON
    • 17. safari & chrome
    • 18. using iframes
    • 19. IE < 9
    • 20. not web scale
    • 21. sandboxing
    • 22. sandboxing• instead of taking objects/code out of an iframe, put it inside• execute in clean js environment• no global state leak
    • 23. sandboxing
    • 24. who’s doing this?
    • 25. twitter @anywhere• twitter widget library• supports multiple lib versions/ instances per page• each version is sandboxed in a separate iframe dev.twitter.com/anywhere
    • 26. twitter @anywhere
    • 27. hiro.js• unit testing lib• each test suite runs in a new iframe• optional: seed global environment http://hirojs.com
    • 28. asynchronousscript loading
    • 29. remember ...• stuff inside an iframe loads asynchronously• Souders says so!• still slower than other methods (script append, xhr)
    • 30. iframes = slow
    • 31. making synchronous scripts ... async
    • 32. document.write• sometimes necessary evil• doesn’t work with async scripts• “you’ll overwrite the whole page!”
    • 33. async + doc.write doesn’t mix
    • 34. doc.write w/ iframes• tiny, synchronous outer script (outer.js)• outer.js doc.writes an iframe, and loads inner.js from inside• inner.js can doc.write all it wants; iframe contents load async
    • 35. outer.js
    • 36. google adsense http://bit.ly/google-iframe-async
    • 37. cross-domain tunnels
    • 38. cross-domain ajax• it doesn’t work• affects subdomains too• www.example.com can’t reach api.example.com, or vice versa
    • 39. universal solution: JSONP
    • 40. JSONP
    • 41. JSONP• script tag element bypasses same-origin policy• but restricted to GET requests• also, difficult to cache
    • 42. alternatively, tunnels
    • 43. xd tunnels• host page creates iframe that points to url on target domain• iframe can freely make xhr requests• host page initiates requests through iframe
    • 44. xd tunnelsfoo.com bar.com/ xhr tunnel.html bar.com/api
    • 45. another wall• how does host page communicate with iframe?• same-origin policy prevents direct access• window messaging apis are the solution
    • 46. iframe messaging• postMessage (HTML5)• window.name• url fragments• flash• catch ‘em all: easyXDM
    • 47. iframe messaging = another talk http://bit.ly/cross-domain-barrier
    • 48. so let’s talk about subdomains
    • 49. subdomain tunnel• less complicated• property access is possible!• document.domain• host and iframe must both declare common document.domain, then they can access each other’s props
    • 50. www.example.comapi.example.com
    • 51. www.example.com
    • 52. tunnel.html
    • 53. downsides :(• have to wait for tunnel to load• extra requests, bandwidth• is there a better way?
    • 54. JSONPIjson + padding + iframes (aka my awful attempt to coin something)
    • 55. iframe POST
    • 56. iframe POST• create an iframe• create a form• set form’s target=”...” attribute to point to iframe• submit the form• response loads in iframe body
    • 57. JSONPI• use iframe POST• like jsonp: pass a callback fn• in response body, set common document.domain• js running in iframe can execute callback fn in parent window
    • 58. flashback: JSONP
    • 59. vs. JSONPI
    • 60. JSONPI response
    • 61. fin
    • 62. thanks!• @bentlegen• we’re looking for js engineers! disqus.com/jobs• slides, sample code on github

    ×