iframe communication in javascript
DESCRIPTION
Introduce multiple solutions for iframe communication in JavaScript.TRANSCRIPT
<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