iframe communication in JavaScript

<iframe> Communication in JavaScriptU3D Labs - Mitch Chen

Content

iframe communication in same domain

iframe communication in same domain, but different subdomain

Cross domain iframe communication

URL Description Communicate

http://www.a.com/a.jshttp://www.a.com/b.js Same Domain Allow

http://www.a.com/app/a.jshttp://www.a.com/core/b.js

Same DomainDifferent Folder Allow

http://www.a.com:8888/a.jshttp://www.a.com/b.js

Same DomainDifferent Port Deny

http://www.a.com/a.jshttps://www.a.com/b.js

Same DomainDifferent Protocol Deny

http://www.a.com/a.jshttp://110.111.1.10/b.js Domain and IP Deny

http://www.a.com/a.jshttp://labs.a.com/b.js

Same DomainDifferent Subdomain Deny

http://www.a.com/a.jshttp://www.b.com/b.js Cross Domain Deny

Same Domain

parent call iframe

iframe call parent

window.iframeID.fnInIframe();

parent.fnInParent();

Same Domain, Different Subdomain

www.a.com - a.html

labs.a.com - b.html

document.domain = 'a.com';var ifr = document.createElement('iframe');

ifr.src = 'http://labs.a.com/b.html';document.body.appendChild(ifr);

ifr.onload = function() { var doc = ifr.contentDocument || ifr.contentWindow.document;

alert(doc.getElementById('header'));};

document.domain = 'a.com';

Cross Domain - location.hashlocalhost - exA.html

function sendToIframe() { var data = 'HelloWorld', url = 'http://jsbin.com/lazacizi/2#'; document.getElementById('myIframe').setAttribute('src', url+data);};function checkHash() { var data = location.hash ? location.hash.substring(1):''; if (data) { document.getElementById('msg').innerHTML = 'iframe said: ' + data; };};setInterval(checkHash, 2000);

<iframe id="myIframe" src="http://jsbin.com/lazacizi/2"></iframe>

Cross Domain - location.hashjsbin.com - exB.html

function checkHash() { var data = location.hash ? location.hash.substring(1) : '',

url = 'http://localhost/iframe_example/location_hash/exBridge.html#', sendData = 'HelloParent';

if (data) { document.getElementById('test').innerHTML = 'Parent said: '+data;

document.getElementById('myIframe').setAttribute('src', url+sendData); };

};setInterval(checkHash, 2000);

<iframe id="myIframe"></iframe>

Cross Domain - location.hashlocalhost - exBridge.html

parent.parent.location.hash = self.location.hash.substring(1);

Cross Domain - Html5 postMessagelocalhost - postMessage.html

jsbin.com - iframe.html

function callIframe() { var ifr = document.getElementById('myIframe'),

targetOrigin = 'http://jsbin.com'; ifr.contentWindow.postMessage('Hello iframe !', targetOrigin);

};

window.addEventListener('message', function(e){ if (e.origin !== 'http://localhost') return;

document.getElementById('test').innerHTML = e.origin+' said: '+e.data;}, false);

<iframe id="myIframe" src="http://jsbin.com/damunuru/2"></iframe>

Browser Compatibility (postMessage)

From: http://caniuse.com/#search=postMessage

Polyfill for Html5 postMessage

jQuery postMessage plugin

easyXDM

From: http://www.wix.com/blog/2012/03/why-html5-is-the-buzz-right-now/

Reference

http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

http://dev.w3.org/html5/postmsg/#dom-window-postmessage

http://html5demos.com/

http://ejohn.org/blog/postmessage-api-changes/

https://github.com/oyvindkinsey/easyXDM

http://benalman.com/projects/jquery-postmessage-plugin/

Q & A