iframe programming with jquery jquery Summit 2011

Size: px

Start display at page:

Download "iframe programming with jquery jquery Summit 2011"

Barnard Gaines
6 years ago
Views:

1 iframe programming with jquery jquery Summit 2011

2 who invited this guy? name s ben strange last name work at disqus co-author, Third-party JavaScript

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 prototype & tojson

20 safari & chrome

21 using iframes

22 IE < 9

23 not web scale

24 sandboxing

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

26 jquery sandbox

27 who s doing this?

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

29 iframe A iframe B

30 hiro.js QUnit-like testing library each test suite runs in a new iframe optional: seed iframe environment

31 asynchronous script loading

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

33 iframes = slow

34 making synchronous scripts... async

35 document.write sometimes necessary evil doesn t work with async scripts you ll overwrite the whole page!

36 async + doc.write doesn t mix

37 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

38 outer.js

39 google adsense

40 cross-domain tunnels

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

42 universal solution: JSONP

43 JSONP

44 JSONP

45 JSONP script tag element bypasses same-origin policy restricted to GET requests script loading can t detect 400, 500 errors (rely on timeouts) caching is also tricky

46 alternatively, tunnels

47 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

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

49 another wall how does host page communicate with iframe? same-origin policy prevents direct access window messaging apis are the solution

50 iframe messaging postmessage (HTML5) window.name url fragments flash catch em all: easyxdm

51 iframe messaging = another talk

52 so let s talk about subdomains

53 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

54 api.example.com

56 tunnel.html

57 downsides :( have to wait for tunnel to load extra requests, bandwidth is there a better way?

58 JSONPI json + padding + iframes (aka my awful attempt to coin something)

60 iframe POST

61 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

62 iframe POST

63 JSONPI uses 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

64 flashback: JSONP

65 vs. JSONPI

66 JSONPI response

67 questions?

68 we re looking for js engineers! disqus.com/jobs slides, sample code on github book available sometime in 2018

User Interaction: jquery

User Interaction: jquery Assoc. Professor Donald J. Patterson INF 133 Fall 2012 1 jquery A JavaScript Library Cross-browser Free (beer & speech) It supports manipulating HTML elements (DOM) animations