• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
14,348
On Slideshare
0
From Embeds
0
Number of Embeds
14

Actions

Shares
Downloads
141
Comments
4
Likes
24

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