iframe programming with jquery jquery Summit 2011
who invited this guy? name s ben strange last name work at disqus co-author, Third-party JavaScript
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 just embedding content
src-less frames
src-less frames separate window, DOM environment property access from parent contents load independently
restoring default browser 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
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
jquery sandbox
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 iframe A iframe B
hiro.js QUnit-like testing library each test suite runs in a new iframe optional: seed iframe environment http://hirojs.com
asynchronous script 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
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
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 tunnels foo.com bar.com/ tunnel.html xhr 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.com api.example.com
www.example.com
tunnel.html
downsides :( have to wait for tunnel to load extra requests, bandwidth is there a better way?
JSONPI json + 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
iframe POST
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
flashback: JSONP
vs. JSONPI
JSONPI response
questions?
thanks! @bentlegen we re looking for js engineers! disqus.com/jobs slides, sample code on github book available sometime in 2018