Your SlideShare is downloading. ×
0
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
那些年,我们一起跨过域
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

那些年,我们一起跨过域

6,811

Published on

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

No Downloads
Views
Total Views
6,811
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
74
Comments
0
Likes
14
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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对象 查看在线demo2012-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跨域实例 查看在线demo2012-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跨域实例 查看在线demo2012-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)中包含了站点AFlash提供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跨域实例 查看在线demo2012-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&AThanks

×