1. modern iframe
programming
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

7. frames
• introduced in netscape navigator
2.0 (1996)
• standardized in html 4
• frameset, frame, noframes
• ... but obsolete in html5 (!)

8. iframes

10. iframes
• introduced in internet explorer 4.0
(1997)
• “inline” frame
• not going anywhere (part of html5
spec)

11. more than just
embedding content

12. “src-less” frames

13. “src-less” frames
• separate window, DOM environment
• property access from parent
• contents load independently

14. restoring default
browser objects

15. default objects
• undefined
• window
• JSON
• #toString
• #indexOf

16. default objects
• they can be modified - by anyone
• often in incompatible ways
• painful for third-party scripts

17. undefined

18. prototype & toJSON

19. safari & chrome

20. using iframes

21. IE < 9

22. not web scale

23. sandboxing

24. sandboxing
• instead of taking objects/code out
of an iframe, put it inside
• execute in clean js environment
• no global state leak

25. sandboxing

26. who’s doing this?

27. twitter @anywhere
• twitter widget library
• supports multiple lib versions/
instances per page
• each version is sandboxed in a
separate iframe
dev.twitter.com/anywhere

28. twitter @anywhere

29. hiro.js
• unit testing lib
• each test suite runs in a new iframe
• optional: seed global environment
http://hirojs.com

30. asynchronous
script loading

31. remember ...
• stuff inside an iframe loads
asynchronously
• Souders says so!
• still slower than other methods
(script append, xhr)

32. iframes = slow

33. making synchronous
scripts ... async

34. document.write
• sometimes necessary evil
• 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. outer.js

38. google adsense
http://bit.ly/google-iframe-async

39. cross-domain
tunnels

40. cross-domain ajax
• it doesn’t work
• affects subdomains too
• www.example.com can’t reach
api.example.com, or vice versa

41. universal solution:
JSONP

42. JSONP

43. JSONP
• script tag element bypasses
same-origin policy
• but restricted to GET requests
• also, difficult to cache

44. alternatively,
tunnels

45. 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

46. xd tunnels
foo.com
bar.com/ xhr
tunnel.html
bar.com/api

47. another wall
• how does 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 talk about
subdomains

51. 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

52. www.example.com
api.example.com

53. www.example.com

54. tunnel.html

55. downsides :(
• have to 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. iframe POST

59. 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

61. 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

62. flashback: JSONP

63. vs. JSONPI

64. JSONPI response

65. fin

66. thanks!
• @bentlegen
• we’re looking for js engineers!
disqus.com/jobs
• slides, sample code on github