Modern iframe programming
Upcoming SlideShare
Loading in...5
×
 

Modern iframe programming

on

  • 14,552 views

 

Statistics

Views

Total Views
14,552
Views on SlideShare
13,935
Embed Views
617

Actions

Likes
21
Downloads
138
Comments
4

23 Embeds 617

http://abava.blogspot.com 165
http://speakerrate.com 140
http://madscript.com 121
http://lanyrd.com 60
http://vimeo.com 39
http://www.kolunar.com 26
http://www.blogger.com 14
http://abava.blogspot.ru 12
http://sansoftech.blogspot.in 10
http://www.ofps.dk 6
http://sansoftech.blogspot.com 6
https://twitter.com 3
http://a0.twimg.com 3
http://programelatv.blogspot.ro 2
http://localhost 2
http://abava.blogspot.com.es 1
http://preview.gujratonair.webnode.com 1
http://paper.li 1
http://sansoftech.blogspot.com.au 1
http://webcache.googleusercontent.com 1
http://kippt.com 1
http://coreader.com 1
http://twitter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Modern iframe programming Presentation Transcript

  • modern iframeprogramming txjs 2011
  • who invited this guy?• name’s ben• strange last name• work at disqus• hail from toronto
  • disqus?• dis·cuss • dĭ-skŭs• third-party commenting platform• served on a bajillion sites• we use our fair share of iframes
  • first, some history
  • frames
  • frames• introduced in netscape navigator 2.0 (1996)• standardized in html 4• frameset, frame, noframes• ... but obsolete in html5 (!)
  • iframes
  • iframes• introduced in internet explorer 4.0 (1997)• “inline” frame• not going anywhere (part of html5 spec)
  • more than justembedding content
  • “src-less” frames
  • “src-less” frames• separate window, DOM environment• property access from parent• contents load independently
  • restoring defaultbrowser objects
  • default objects• undefined• window• JSON• #toString• #indexOf
  • default objects• they can be modified - by anyone• often in incompatible ways• painful for third-party scripts
  • undefined
  • prototype & toJSON
  • safari & chrome
  • using iframes
  • IE < 9
  • not web scale
  • sandboxing
  • sandboxing• instead of taking objects/code out of an iframe, put it inside• execute in clean js environment• no global state leak
  • sandboxing
  • who’s doing this?
  • twitter @anywhere• twitter widget library• supports multiple lib versions/ instances per page• each version is sandboxed in a separate iframe dev.twitter.com/anywhere
  • twitter @anywhere
  • hiro.js• unit testing lib• each test suite runs in a new iframe• optional: seed global environment http://hirojs.com
  • asynchronousscript loading
  • remember ...• stuff inside an iframe loads asynchronously• Souders says so!• still slower than other methods (script append, xhr)
  • iframes = slow
  • making synchronous scripts ... async
  • document.write• sometimes necessary evil• doesn’t work with async scripts• “you’ll overwrite the whole page!”
  • async + doc.write doesn’t mix
  • 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
  • outer.js
  • google adsense http://bit.ly/google-iframe-async
  • cross-domain tunnels
  • cross-domain ajax• it doesn’t work• affects subdomains too• www.example.com can’t reach api.example.com, or vice versa
  • universal solution: JSONP
  • JSONP
  • JSONP• script tag element bypasses same-origin policy• but restricted to GET requests• also, difficult to cache
  • alternatively, tunnels
  • 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
  • xd tunnelsfoo.com bar.com/ xhr tunnel.html bar.com/api
  • another wall• how does host page communicate with iframe?• same-origin policy prevents direct access• window messaging apis are the solution
  • iframe messaging• postMessage (HTML5)• window.name• url fragments• flash• catch ‘em all: easyXDM
  • iframe messaging = another talk http://bit.ly/cross-domain-barrier
  • so let’s talk about subdomains
  • 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
  • www.example.comapi.example.com
  • www.example.com
  • tunnel.html
  • downsides :(• have to wait for tunnel to load• extra requests, bandwidth• is there a better way?
  • JSONPIjson + padding + iframes (aka my awful attempt to coin something)
  • iframe POST
  • 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
  • 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
  • flashback: JSONP
  • vs. JSONPI
  • JSONPI response
  • fin
  • thanks!• @bentlegen• we’re looking for js engineers! disqus.com/jobs• slides, sample code on github