Introduce multiple solutions for iframe communication in JavaScript.

1. <iframe> Communication
in JavaScript
U3D Labs - Mitch Chen

2. Content
iframe communication in same domain
iframe communication in same domain, but different
subdomain
Cross domain iframe communication

3. URL
Description
Communicate
http://www.a.com/a.js
http://www.a.com/b.js
Same Domain
Allow
http://www.a.com/app/a.js
http://www.a.com/core/b.js
Same Domain
Different Folder
Allow
http://www.a.com:8888/a.js
http://www.a.com/b.js
Same Domain
Different Port
Deny
http://www.a.com/a.js
https://www.a.com/b.js
Same Domain
Different Protocol
Deny
http://www.a.com/a.js
http://110.111.1.10/b.js
Domain and IP
Deny
http://www.a.com/a.js
http://labs.a.com/b.js
Same Domain
Different Subdomain
Deny
http://www.a.com/a.js
http://www.b.com/b.js
Cross Domain
Deny

4. Same Domain
parent call iframe
window.iframeID.fnInIframe();
iframe call parent
parent.fnInParent();

5. Same Domain, Different Subdomain
www.a.com - a.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'));
};
labs.a.com - b.html
document.domain = 'a.com';

6. Cross Domain - location.hash
localhost - 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>

7. Cross Domain - location.hash
jsbin.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>

8. Cross Domain - location.hash
localhost - exBridge.html
parent.parent.location.hash = self.location.hash.substring(1);

9. Cross Domain - Html5 postMessage
localhost - postMessage.html
function callIframe() {
var ifr = document.getElementById('myIframe'),
targetOrigin = 'http://jsbin.com';
ifr.contentWindow.postMessage('Hello iframe !', targetOrigin);
};
<iframe id="myIframe" src="http://jsbin.com/damunuru/2"></iframe>
jsbin.com - iframe.html
window.addEventListener('message', function(e){
if (e.origin !== 'http://localhost') return;
document.getElementById('test').innerHTML = e.origin+' said: '+e.data;
}, false);

10. Browser Compatibility (postMessage)
From: http://caniuse.com/#search=postMessage

11. Polyfill for Html5 postMessage
jQuery postMessage plugin
easyXDM

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

13. 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/

14. Q&A