Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modern iframe programming

20,027 views

Published on

Published in: Technology

Modern iframe programming

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

×