那些年,我们一起跨过域

7,463 views
7,294 views

Published on

0 Comments
15 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,463
On SlideShare
0
From Embeds
0
Number of Embeds
3,481
Actions
Shares
0
Downloads
76
Comments
0
Likes
15
Embeds 0
No embeds

No notes for slide

那些年,我们一起跨过域

  1. 1. 那些年,我们一起跨过域 Theowang
  2. 2. 讨论什么?我们不神化跨域方法,跨域没有完美我们不罗列跨域方法,不讲n大跨域方法我们解决工作遇见的跨域问题,偏实战
  3. 3. 其实这是个古老而又猥琐的话题为什么要跨域呢? 什么情况是跨域? 我要自适应高度  子域名不同 我要实现多域名单点登录  主域名不同 我要和第三方网站通信  协议不同 我要跨域种cookie  端口不同 我要……2012-6-7 3
  4. 4. 我们要说的跨域方法 document.domain location.hash window.name postMessage flash
  5. 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. 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对象 查看在线demo2012-6-7 6
  7. 7. 准备好了吗?
  8. 8. document.domain原理:化跨域通信问题为frame之间的跨域操作两个不同子域名通过设置 document.domain=主域名 获取操作对方的跨域权限
  9. 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跨域实例 查看在线demo2012-6-7 9
  10. 10. Document.domain跨域优缺点  子域名双向跨域  安全!!!  post/get轻松搞定  不能跨主域名  跟本域操作无异 优点 缺点2012-6-7 10
  11. 11. location.hash原理:hash指的是url中#之后的部分,跨域时通过iframe.src设置,子窗口通过location.hash取到设置url的hash不需要页面跳转,而是当前页面锚点跳转
  12. 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跨域实例 查看在线demo2012-6-7 12
  13. 13. Location.hash跨域优缺点  可跨主域名  产生浏览器历史记录  操作简单  受URL长度限制  可以双向跨域 优点 缺点2012-6-7 13
  14. 14. window.name原理:window.name属性可以在不同域下访问,当iframe的url改变也不改变name的值页面建立setTimeout/setInterval监听window.name变化
  15. 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. 16. window.name跨域优缺点  可跨主域名  只有IE6-7等低版本浏  操作简单 览器支持  可以双向跨域  通信数据量不大 优点 缺点2012-6-7 16
  17. 17. postMessage原理: html5新增的postMessage方法,通过 postMessage来传递信息,对方可以通过监听 message事件来监听信息2012-6-7 17
  18. 18. postMessage浏览器支持情况
  19. 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. 20. postMessage跨域优缺点  Html5原生支持  可跨主域名  需要浏览器支持html5  可以双向跨域  可控制跨域域名 优点 缺点2012-6-7 20
  21. 21. Flash跨域原理:利用flash的URLLoader,也可以轻松实现跨域数据交互只要站点B的跨域策略文件(crossdomain.xml)中包含了站点AFlash提供ExternalInterface接口与JavaScript通信,ExternalInterface有两个方法,call和addCallback,call的作用是让Flash调用js里的方法,addCallback是用来注册flash函数让js调用
  22. 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跨域实例 查看在线demo2012-6-7 22
  23. 23. flash跨域优缺点  可跨主域名  需要浏览器flash插件  可以双向跨域  开发成本大  可控制跨域域名 优点 缺点2012-6-7 23
  24. 24. PK 优点 缺点 适合场景 子域名间无障碍通 不能跨主域,安全 跨子域,安全性高document.domain 信 性 简单,跨主域,可 url限制(ie4k, 简单需求,例如高 location.hash 双向 ff40k),历史记录 度自适应 简单,跨主域,可 数据量限制,只有 配合其他跨域方式 window.name 双向 IE6-7支持 命令式跨域 跨主域,可双向 html5限制 可与其他跨域方式 postMessage ,Html5原生支持, 组合的命令式跨域 可控制访问域名 跨主域,可双向, flash限制,开发相 一般通过控制跨域 flash 可控制跨域域名 对复杂 域名来单向跨域
  25. 25. 好吧,我们也凑齐十大跨域方式 JSONP 后端代理 表单+重定向callback(一般用于跨域上传图片) 跨域资源共享(CORS) Flash LocalConnection
  26. 26. 跨域开源项目 CrossXHR:flash easyXDM:flash+postMessage+win.name AJAXCDR:flash
  27. 27. Q&AThanks

×