Download as KEY, PPTX
More Related Content
Similar to Modern iframe programming
Modern iframe programming
- 1. modern iframe programming txjs 2011
- 2. who invited thisguy? • 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.
- 5.
- 7. frames • introduced innetscape navigator 2.0 (1996) • standardized in html 4 • frameset, frame, noframes • ... but obsolete in html5 (!)
- 8.
- 10. iframes • introduced ininternet explorer 4.0 (1997) • “inline” frame • not going anywhere (part of html5 spec)
- 11. more than just embeddingcontent
- 12.
- 13. “src-less” frames • separatewindow, DOM environment • property access from parent • contents load independently
- 14.
- 15. default objects • undefined •window • JSON • #toString • #indexOf
- 16. default objects • theycan be modified - by anyone • often in incompatible ways • painful for third-party scripts
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. sandboxing • instead oftaking objects/code out of an iframe, put it inside • execute in clean js environment • no global state leak
- 25.
- 26.
- 27. twitter @anywhere • twitterwidget library • supports multiple lib versions/ instances per page • each version is sandboxed in a separate iframe dev.twitter.com/anywhere
- 28.
- 29. hiro.js • unit testinglib • each test suite runs in a new iframe • optional: seed global environment http://hirojs.com
- 30.
- 31. remember ... • stuffinside an iframe loads asynchronously • Souders says so! • still slower than other methods (script append, xhr)
- 32.
- 33. making synchronous scripts ... async
- 34. document.write • sometimes necessaryevil • doesn’t work with async scripts • “you’ll overwrite the whole page!”
- 35. async + doc.write doesn’t mix
- 36. 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
- 37.
- 38. google adsense http://bit.ly/google-iframe-async
- 39. cross-domain tunnels
- 40. cross-domain ajax • itdoesn’t work • affects subdomains too • www.example.com can’t reach api.example.com, or vice versa
- 41. universal solution: JSONP
- 42.
- 43. JSONP • script tagelement bypasses same-origin policy • but restricted to GET requests • also, difficult to cache
- 44. alternatively, tunnels
- 45. xd tunnels • hostpage creates iframe that points to url on target domain • iframe can freely make xhr requests • host page initiates requests through iframe
- 46. xd tunnels foo.com bar.com/ xhr tunnel.html bar.com/api
- 47. another wall • howdoes host page communicate with iframe? • same-origin policy prevents direct access • window messaging apis are the solution
- 48. iframe messaging • postMessage(HTML5) • window.name • url fragments • flash • catch ‘em all: easyXDM
- 49. iframe messaging = another talk http://bit.ly/cross-domain-barrier
- 50. so let’s talkabout subdomains
- 51. subdomain tunnel • lesscomplicated • property access is possible! • document.domain • host and iframe must both declare common document.domain, then they can access each other’s props
- 52.
- 53.
- 54.
- 55. downsides :( • haveto wait for tunnel to load • extra requests, bandwidth • is there a better way?
- 56. JSONPI json + padding+ iframes (aka my awful attempt to coin something)
- 58.
- 59. iframe POST • createan iframe • create a form • set form’s target=”...” attribute to point to iframe • submit the form • response loads in iframe body
- 61. JSONPI • use iframePOST • like jsonp: pass a callback fn • in response body, set common document.domain • js running in iframe can execute callback fn in parent window
- 62.
- 63.
- 64.
- 65.
- 66. thanks! • @bentlegen • we’relooking for js engineers! disqus.com/jobs • slides, sample code on github
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n