1. 那些年，我们一起跨过域
Theowang

2. 讨论什么？
我们不神化跨域方法，跨域没有完美
我们不罗列跨域方法，不讲n大跨域方法
我们解决工作遇见的跨域问题，偏实战

3. 其实这是个古老而又猥琐的话题
为什么要跨域呢？ 什么情况是跨域？
 我要自适应高度  子域名不同
 我要实现多域名单点登录  主域名不同
 我要和第三方网站通信  协议不同
 我要跨域种cookie  端口不同
 我要……
2012-6-7 3

4. 我们要说的跨域方法
 document.domain
 location.hash
 window.name
 postMessage
 flash

5. iframe Tips
父窗口获取子窗口的window对象方法
 Iframe.contentWindow
父窗口获取子窗口document对象方法
 iframe.contentWindow.document || iframe.contentDocument;
 document.frames[id].document; //IE6-7
子窗口获取父窗口window对象
 parent
iframe父窗口和子窗口通信符合同源策略
 即同域名下才可以进行window和dom操作
使用JavaScript在IE和Firefox下进行iframe的DOM操作
2012-6-7 5

6. http://www.qq.com/
<iframe id=“iframe” src=“iframe.html”>
var iframe = document.getElementById('iframe');
var iframeWin = iframe.contentWindow;
var someFn = function(){};
http://www.qq.com/iframe.html
var pSomeFn = parent.someFn;
Iframe之间操作window对象
查看在线demo
2012-6-7 6

7. 准备好了吗？

8. document.domain
原理：
化跨域通信问题为frame之间的跨域操作
两个不同子域名通过设置 document.domain='主
域名' 获取操作对方的跨域权限

9. http://4.qdemo.sinaapp.com/xdomain/document.domain/
document.domain = 'sinaapp.com';
var iframe = document.getElementById('iframe');
var iframeWin = iframe.contentWindow;
var iframeXHR = iframeWin.xmlHttp();
http://dali.sinaapp.com/proxy.htm
document.domain = 'sinaapp.com';
xmlHttp = function() { return new XMLHttpRequest();};
Document.domain跨域实例
查看在线demo
2012-6-7 9

10. Document.domain跨域优缺点
 子域名双向跨域  安全！！！
 post/get轻松搞定  不能跨主域名
 跟本域操作无异
优点 缺点
2012-6-7 10

11. location.hash
原理：
hash指的是url中#之后的部分，跨域时通过
iframe.src设置，子窗口通过location.hash取到
设置url的hash不需要页面跳转，而是当前页面锚
点跳转

12. http://js8.in/demos/xdomain/location.hash/
document.getElementById('iframe').src = proxyHost + '#'+val;
http://dali.sinaapp.com/proxy.htm
window.onhashchange = hashchange;//不支持用定时器
http://js8.in/demos/xdomain/location.hash/parentproxy.htm
var hash = location.hash.substr(1).split('=');
var height = hash[1];
parent.parent.setHeigth(height);
Location.hash跨域实例
查看在线demo
2012-6-7 12

13. Location.hash跨域优缺点
 可跨主域名  产生浏览器历史记录
 操作简单  受URL长度限制
 可以双向跨域
优点 缺点
2012-6-7 13

14. window.name
原理：
window.name属性可以在不同域下访问，当
iframe的url改变也不改变name的值
页面建立setTimeout/setInterval监听
window.name变化

15. http://js8.in/demos/xdomain/window.name/
doc.getElementById(„iframeA‟).contentWindow.name = value;
http://4.qdemo.sinaapp.com/xdomain/window.name/proxy.html
var hash = window.name;
setInterval(function(){
if (window.name !== hash) {
hash = window.name;
cb.call(window, hash);
}
}, 50);
Window.name跨域实例
查看在线demo(IE6-7)
2012-6-7 15

16. window.name跨域优缺点
 可跨主域名  只有IE6-7等低版本浏
 操作简单 览器支持
 可以双向跨域  通信数据量不大
优点 缺点
2012-6-7 16

17. postMessage
原理：
html5新增的postMessage方法，通过
postMessage来传递信息，对方可以通过监听
message事件来监听信息
2012-6-7 17

18. postMessage浏览器支持情况

19. http://js8.in/demos/xdomain/postmessage/
var ifr = doc.getElementById('iframeA').contentWindow;
ifr.postMessage(data,'*');
http://4.qdemo.sinaapp.com/xdomain/postmessage/proxy.html
//监听
Win.addEventListener("message",function(e){
cb.call(win,e.data);
},false);
//发送
var ifr = win.parent;
ifr.postMessage(data,'*');
PostMessage跨域实例
查看在线demo(需要支持postMessage浏览器)
2012-6-7 19

20. postMessage跨域优缺点
 Html5原生支持
 可跨主域名
 需要浏览器支持html5
 可以双向跨域
 可控制跨域域名
优点 缺点
2012-6-7 20

21. Flash跨域
原理：
利用flash的URLLoader，也可以轻松实现跨域数据交互
只要站点B的跨域策略文件(crossdomain.xml)中包含了站
点A
Flash提供ExternalInterface接口与JavaScript通信，
ExternalInterface有两个方法，call和addCallback，call的
作用是让Flash调用js里的方法，addCallback是用来注册
flash函数让js调用

22. http://js8.in/demos/xdomain/flash/
引入crossxhr.js，创建swf：
http://js8.in/demos/xdomain/flash/crossxhr.swf
http://4.qdemo.sinaapp.com/crossdomain.xml
<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
<allow-access-from domain="js8.in"/>
</cross-domain-policy>
flash跨域实例
查看在线demo
2012-6-7 22

23. flash跨域优缺点
 可跨主域名
 需要浏览器flash插件
 可以双向跨域
 开发成本大
 可控制跨域域名
优点 缺点
2012-6-7 23

24. PK
优点 缺点 适合场景
子域名间无障碍通 不能跨主域，安全 跨子域，安全性高
document.domain 信 性
简单，跨主域，可 url限制（ie4k， 简单需求，例如高
location.hash 双向 ff40k），历史记录 度自适应
简单，跨主域，可 数据量限制，只有 配合其他跨域方式
window.name 双向 IE6-7支持 命令式跨域
跨主域，可双向 html5限制 可与其他跨域方式
postMessage ，Html5原生支持， 组合的命令式跨域
可控制访问域名
跨主域，可双向， flash限制，开发相 一般通过控制跨域
flash 可控制跨域域名 对复杂 域名来单向跨域

25. 好吧，我们也凑齐十大跨域方式
 JSONP
 后端代理
 表单+重定向callback（一般用于跨域上传图片）
 跨域资源共享（CORS）
 Flash LocalConnection

26. 跨域开源项目
 CrossXHR：flash
 easyXDM：flash+postMessage+win.name
 AJAXCDR：flash

27. Q&A
Thanks