<iframe> Communication
in JavaScript
U3D Labs - Mitch Chen
Content
iframe communication in same domain
iframe communication in same domain, but different
subdomain
Cross domain ifra...
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
...
Same Domain
parent call iframe
window.iframeID.fnInIframe();

iframe call parent
parent.fnInParent();
Same Domain, Different Subdomain
www.a.com - a.html
document.domain = 'a.com';
var ifr = document.createElement('iframe');...
Cross Domain - location.hash
localhost - exA.html
function sendToIframe() {
var data = 'HelloWorld',
url = 'http://jsbin.c...
Cross Domain - location.hash
jsbin.com - exB.html
function checkHash() {
var data = location.hash ? location.hash.substrin...
Cross Domain - location.hash
localhost - exBridge.html
parent.parent.location.hash = self.location.hash.substring(1);
Cross Domain - Html5 postMessage
localhost - postMessage.html
function callIframe() {
var ifr = document.getElementById('m...
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/...
Q&A
Upcoming SlideShare
Loading in...5
×

iframe communication in JavaScript

5,151

Published on

Introduce multiple solutions for iframe communication in JavaScript.

Published in: Technology

iframe communication in JavaScript

  1. 1. <iframe> Communication in JavaScript U3D Labs - Mitch Chen
  2. 2. Content iframe communication in same domain iframe communication in same domain, but different subdomain Cross domain iframe communication
  3. 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. 4. Same Domain parent call iframe window.iframeID.fnInIframe(); iframe call parent parent.fnInParent();
  5. 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. 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. 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. 8. Cross Domain - location.hash localhost - exBridge.html parent.parent.location.hash = self.location.hash.substring(1);
  9. 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. 10. Browser Compatibility (postMessage) From: http://caniuse.com/#search=postMessage
  11. 11. Polyfill for Html5 postMessage jQuery postMessage plugin easyXDM
  12. 12. From: http://www.wix.com/blog/2012/03/why-html5-is-the-buzz-right-now/
  13. 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. 14. Q&A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×