iframes: a look at the weird ass bit of the browser

Black magic, voodoo and David Blaine have nothing on iframes. iframes, for better or worse are used all over the web for all manor of dark arts. They’re capable of protecting your site from other people’s content, and equally capable of creating public APIs out of thin air.

Through developing JS Bin over the last 4 years, Remy has come to be very intimate with the iframe and it’s tricksey ways. This talk will share stories, tricks and upcoming new features of iframes.

iframes: sexy they are not. Freaky: they are!

Transcript

1. <iframe> A look at the weird ass bit of the browser Remy Sharp • @rem • Left Logic
3. 2008: 1.jsbin.com
4. 2010: 2.jsbin.com
5. 2012: 3.jsbin.com
7. Amazingly still work!
8. Scott Isaacs @ Microsoft 1997
9. iframe support dropped in XHTML 1.1 Lack of <object> support in IE7 meant iframes stuck around.
10. document.head.appendChild
11. 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); });
12. 2007: detect globals 2008: jsbin 2010: jsconsole 2011: responsivepx
13. Let's explore this ugly mutha.
14. Samsung S3 phone wipe <iframe src="tel:*2767*3855%23"></iframe>
15. Auto-play iOS 4 only :(
16. iframe must be in DOM to start writing to it var window = iframe.contentWindow || iframe.contentDocument.parentWindow;
17. 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();
18. Load won't fire until .close is called - though content loads.
19. Take a generated iframe out of the DOM, it'll reset
20. Dynamic iframes ignore the mime type that should prevent assets loading...
21. Web Previews
22. WebKit browser don't have innerWidth/Height until next tick
23. 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('<script>window.parent.' + callbackName + '(window.innerWidth)</script>'); doc.close(); } catch (e) { iframedelay.active = true; } return iframedelay; }());
24. Nuke blocking methods (before JS runs, then restore)
25. Opera + iframe + alert = suppressed
26. Remove autofocus
27. Cancel focus event
28. Consider restoring the scroll position
29. Detecting globals
30. PhoneGap
31. Custom API out of JavaScript embeds
32. x-domain comms
33. For bi-directional non- sockets comms
34. Used in jsconsole's remote
35. your mobile site add <script> iframe origin: jsconsole.com jsconsole.com postMessage & onmessage EventSource Ajax post
36. Also fake live reload - but it didn't work - sorta viewport is ignored in iframes
37. document.domain
38. Comet, duh.
39. iframe a.com - iframe b.com -- iframe a.com
40. Passing data before load event via: window.name
41. Click-jacking
42. Now preventable in IE9+ via X-Frame-Options: SAMEORIGIN
43. Enable appcache on unknown urls
44. •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
45. Theory: iframe + appcache for offline assets
46. Future / Now / Good Parts • postMessage/onMessage • seamless • srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/
47. Cheers. Remy Sharp • @rem • Left Logic <marquee> talk for 2013 anyone?