iframe communication in JavaScript
Upcoming SlideShare
Loading in...5
×
 

iframe communication in JavaScript

on

  • 927 views

Introduce multiple solutions for iframe communication in JavaScript.

Introduce multiple solutions for iframe communication in JavaScript.

Statistics

Views

Total Views
927
Slideshare-icon Views on SlideShare
897
Embed Views
30

Actions

Likes
0
Downloads
7
Comments
0

2 Embeds 30

http://www.kolunar.com 26
http://localhost 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    iframe communication in JavaScript iframe communication in JavaScript Presentation Transcript

    • <iframe> Communication in JavaScript U3D 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.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
    • 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'); 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';
    • 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>
    • 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>
    • 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('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);
    • 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