Tweet
Tweet

Slide 1

Slide 1 text

A look at the weird ass bit of the browser Remy Sharp • @rem • Left Logic

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

2008: 1.jsbin.com

Slide 4

Slide 4 text

2010: 2.jsbin.com

Slide 5

Slide 5 text

2012: 3.jsbin.com

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Amazingly still work!

Slide 8

Slide 8 text

Scott Isaacs @ Microsoft 1997

Slide 9

Slide 9 text

iframe support dropped in XHTML 1.1 Lack of support in IE7 meant iframes stuck around.

Slide 10

Slide 10 text

document.head.appendChild

Slide 11

Slide 11 text

Foundation of early comet techniques 2000/2006 var iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.head.appendChild(iframe); iframe.src = '/live-stream'; require('http').createServer(function (req, res) { res.writeHead(200, { 'content-type': 'text/html' }); res.write(sendPadding()); setInterval(function () { res.write(getLiveData()); }, 1000); });

Slide 12

Slide 12 text

2007: detect globals 2008: jsbin 2010: jsconsole 2011: responsivepx

Slide 13

Slide 13 text

Let's explore this ugly mutha.

Slide 14

Slide 14 text

Samsung S3 phone wipe

Slide 15

Slide 15 text

Auto-play iOS 4 only :(

Slide 16

Slide 16 text

iframe must be in DOM to start writing to it var window = iframe.contentWindow || iframe.contentDocument.parentWindow;

Slide 17

Slide 17 text

function iframe() { var iframe = document.createElement('iframe'); document.body.appendChild(iframe); return iframe.contentWindow || iframe.contentDocument.parentWindow; } var window = iframe(), document = window.document; document.open(); document.write(myAwesomeHTML); document.close();

Slide 18

Slide 18 text

Load won't fire until .close is called - though content loads.

Slide 19

Slide 19 text

Take a generated iframe out of the DOM, it'll reset

Slide 20

Slide 20 text

Dynamic iframes ignore the mime type that should prevent assets loading...

Slide 21

Slide 21 text

Web Previews

Slide 22

Slide 22 text

WebKit browser don't have innerWidth/Height until next tick

Slide 23

Slide 23 text

var iframedelay = (function () { var iframedelay = { active : false }, iframe = document.createElement('iframe'), doc, callbackName = '__callback' + (+new Date); iframe.style.height = iframe.style.width = '1px'; iframe.style.visibility = 'hidden'; document.body.appendChild(iframe); doc = iframe.contentDocument || iframe.contentWindow.document; window[callbackName] = function (width) { iframedelay.active = width === 0; try { iframe.parentNode.removeChild(iframe); delete window[callbackName]; } catch (e){}; }; try { doc.open(); doc.write('window.parent.' + callbackName + '(window.innerWidth)'); doc.close(); } catch (e) { iframedelay.active = true; } return iframedelay; }());

Slide 24

Slide 24 text

Nuke blocking methods (before JS runs, then restore)

Slide 25

Slide 25 text

Opera + iframe + alert = suppressed

Slide 26

Slide 26 text

Remove autofocus

Slide 27

Slide 27 text

Cancel focus event

Slide 28

Slide 28 text

Consider restoring the scroll position

Slide 29

Slide 29 text

Detecting globals

Slide 30

Slide 30 text

PhoneGap

Slide 31

Slide 31 text

Custom API out of JavaScript embeds

Slide 32

Slide 32 text

x-domain comms

Slide 33

Slide 33 text

For bi-directional non- sockets comms

Slide 34

Slide 34 text

Used in jsconsole's remote

Slide 35

Slide 35 text

your mobile site add iframe origin: jsconsole.com jsconsole.com postMessage & onmessage EventSource Ajax post

Slide 36

Slide 36 text

Also fake live reload - but it didn't work - sorta viewport is ignored in iframes

Slide 37

Slide 37 text

document.domain

Slide 38

Slide 38 text

Comet, duh.

Slide 39

Slide 39 text

iframe a.com - iframe b.com -- iframe a.com

Slide 40

Slide 40 text

Passing data before load event via: window.name

Slide 41

Slide 41 text

Click-jacking

Slide 42

Slide 42 text

Now preventable in IE9+ via X-Frame-Options: SAMEORIGIN

Slide 43

Slide 43 text

Enable appcache on unknown urls

Slide 44

Slide 44 text

•Request / == "app chrome" •All other urls include iframe to light manifest page •Manifest says: FALLBACK: /* / •Therefore: any request to an unknown url, the "app chrome" will load via the fallback

Slide 45

Slide 45 text

Theory: iframe + appcache for offline assets

Slide 46

Slide 46 text

Future / Now / Good Parts • postMessage/onMessage • seamless • srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/

Slide 47

Slide 47 text

Cheers. Remy Sharp • @rem • Left Logic talk for 2013 anyone?