Modern iframe programming

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

ﬁrst, 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• undeﬁned• window• JSON• #toString• #indexOf

default objects• they can be modiﬁed - by anyone• often in incompatible ways• painful for third-party scripts

undeﬁned

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• 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• ﬂash• 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

ﬂashback: JSONP

vs. JSONPI

JSONPI response

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

http://abava.blogspot.com	158
http://speakerrate.com	133
http://madscript.com	64
http://lanyrd.com	43
http://vimeo.com	39
http://www.blogger.com	14
http://sansoftech.blogspot.in	10
http://abava.blogspot.ru	9
http://www.ofps.dk	6
http://sansoftech.blogspot.com	5
http://a0.twimg.com	3
http://localhost	2
http://programelatv.blogspot.ro	2
http://sansoftech.blogspot.com.au	1
http://kippt.com	1
http://coreader.com	1
http://webcache.googleusercontent.com	1
http://paper.li	1
http://twitter.com	1

Modern iframe programming

by benvinegar

Accessibility

Categories

Upload Details

Usage Rights

19 Embeds 494

Statistics