Upgrade to Pro — share decks privately, control downloads, hide ads and more …

iframes: a look at the weird ass bit of the bro...

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!

Remy Sharp

October 07, 2012
Tweet

More Decks by Remy Sharp

Other Decks in Technology

Transcript

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

    browser Remy Sharp • @rem • Left Logic
  2. 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); });
  3. iframe must be in DOM to start writing to it

    var window = iframe.contentWindow || iframe.contentDocument.parentWindow;
  4. 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();
  5. 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; }());
  6. Also fake live reload - but it didn't work -

    sorta viewport is ignored in iframes
  7. •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
  8. Future / Now / Good Parts • postMessage/onMessage • seamless

    • srcdoc • sandbox="allow-same-origin allow-forms allow-scripts" http://benvinegar.github.com/seamless-talk/