Modern iframe programming

17,642 views
17,282 views

Published on

Published in: Technology
4 Comments
28 Likes
Statistics
Notes
No Downloads
Views
Total views
17,642
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
157
Comments
4
Likes
28
Embeds 0
No embeds

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
  • 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

    ×