Save 37% off PRO during our Black Friday Sale! »

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

C8b387c489181844b3ffc704fadc0f14?s=47 Remy Sharp
October 07, 2012

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!

C8b387c489181844b3ffc704fadc0f14?s=128

Remy Sharp

October 07, 2012
Tweet

Transcript

  1. <iframe> A look at the weird ass bit of the

    browser Remy Sharp • @rem • Left Logic
  2. None
  3. 2008: 1.jsbin.com

  4. 2010: 2.jsbin.com

  5. 2012: 3.jsbin.com

  6. None
  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?