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

前端跨域总结

3,771

Published on

总结各种前端跨域情况及解决办法,包括ajax跨域,iframe跨域,cookie跨域,flash跨域

总结各种前端跨域情况及解决办法,包括ajax跨域,iframe跨域,cookie跨域,flash跨域

Published in: Technology
1 Comment
16 Likes
Statistics
Notes
  • 跨域
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,771
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
142
Comments
1
Likes
16
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. 前端 跨域 总结 张所勇( suoyong ) [email_address] [email_address]
  • 2. Ajax 跨域 Iframe 跨域 Cookie 跨域 Flash 跨域 跨域情况
  • 3. 跨域是什么?
  • 4. 同源策略
    • 同源策略是对 javascript 代码能够和哪些 Web 内容交互的一条完整的安全限制。
  • 5. 什么情况会跨域?
  • 6. 什么情况会跨域? 主域不同
  • 7. 什么情况会跨域? 主域相同,子域不同
  • 8. 什么情况会跨域? 域名相同,协议不同
  • 9. 什么情况会跨域? 域名相同,端口不同
  • 10. 什么情况 不会 跨域? 域名完全相同
  • 11. Ajax 跨域解决办法
  • 12. 示例 jiaju.com 和 zhangsuoyong.com 通信
  • 13. 按照能力分
    • 能掌控对方
    • 不能掌控对方
  • 14. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 一、直接引入 javascript
    • 二、 JSONP
  • 15. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 一、直接引入 javascript
    • demo:
    • http://news.jiaju.com/images/sy/demo/a.htm
  • 16. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 一、直接引入 javascript
    • php:
  • 17. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 二、 JSONP
    • demo:
    • http://news.jiaju.com/images/sy/demo/b.htm
  • 18. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 二、 JSONP
    • js:
    $. getJSON (" http://www.zhangsuoyong.com/demo/cross/ajax01/2.php? jsoncallback=? ",function(data){ alert(data); }); $. ajax ({ url : 'http://www.zhangsuoyong.com/demo/cross/ajax01/2.php? jsoncallback=? ', dataType : " jsonp ", type : " GET ", success : function(data){ alert(data); } });
  • 19. 能掌握 zhangsuoyong.com 时
    • 两种方法:
    • 二、 JSONP
    • php:
  • 20. 不能 掌握 zhangsuoyong.com 时
    • 使用后端代理:
    • demo:
    • http://www.zhangsuoyong.com/demo/cross/ajax02/a.htm
  • 21. 不能 掌握 zhangsuoyong.com 时
    • 使用后端代理:
    • php:
  • 22. iFrame 跨域解决办法
  • 23. 按情境分
    • 1 、不跨域时
    • 2 、主域相同、子域不同时
    • 3 、主域不同
  • 24. 不 跨域时
    • 1 、不跨域时
    • 访问 iframe : contentWindow
    • 访问父级: parent
    • 访问顶级: top
    • demo
    • http://news.jiaju.com/images/sy/demo/iframe01/a.htm
  • 25. 跨域时
    • 2 、主域相同、子域不同
    • 使用 document.domain= 主域名
    • demo :
    • 未设置 document.domain 情况 :
    • http://news.jiaju.com/images/sy/demo/iframe02/a.htm
    • 设置 document.domain 情况 :
    • http://news.jiaju.com/images/sy/demo/iframe02/c.htm
  • 26. 跨域时
    • 2 、主域相同、子域不同
    • 两个域都设置: document.domain=‘jiaju.com’
  • 27. 跨域时
    • 3 、主域不同
    • 解决办法 :
      • 1 、 location.hash
      • 2 、 window.name
  • 28. 主域不同时
    • 3 、 location.hash
    • location.hash 是什么:
    • hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分( 从 # 号开始的部分 )
  • 29. 主域不同时
    • 3 、 location.hash
    • location.hash 是什么:
    • demo :
    • http://static.jiaju.com/jiaju/com/js/crossdomain/proxy.html # iframeID=google&height=362&JJtype=height
  • 30. location.hash( A 操作 B )
    • 解决方法: http://news.jiaju.com/images/sy/demo/iframe03/a.htm
    1 、 通过 location.hash 方式传递参数 2 、 通过定时器检测 hash 变化,执行对应操作
  • 31. location.hash( B 操作 A )
    • 解决方法: http://news.jiaju.com/images/sy/suoyongtest.htm
    1 、 创建和上层同域的 iframe 通过 location.hash 方式传递参数 2 、 通过 top.window 获取顶层 window 对象
  • 32. location.hash
    • 原理:
    • 1 、动态改变 location.hash , iframe 不会重载
    • 2 、无论跨域与否, iframe 内可以获取自己的 location.hash
    • 3 、只要域名相同就能通信,即使 ABC 三层嵌套
  • 33. location.hash
    • 线上实例:
    • 1 、 v1pai.jiaju.com 跨域无刷新登陆、
    • 2 、 v1pai.jiaju.com 短信认证
    • 3 、 72 炫专题 iframe 跨域自适应
  • 34. location.hash
    • 通用解决办法:
    • 被嵌入的跨域的 iframe 中引入
    • <script src=&quot;http://static.jiaju.com/jiaju/com/js/crossdomain/crossdomain.js&quot;></script>
    • 提供以下方法:
      • JJcrossiframe. setHeight ( ‘youiframeID’ ) // 自动设定跨域 iframe 高度
      • JJcrossiframe. setWidth ( ‘youiframeID’ ) // 自动设定跨域 iframe 宽度
      • JJcrossiframe. callback ( ‘fn’ , paramobj ) // 调用顶层 iframe 中 fn 函数
      • JJcrossiframe. init ( paramobj , type ) // 自定义向顶层传参数
      • // (type 目前有: height,width,callback),
      • // 新增 type 需在代理页面内自定义开发
  • 35. location.hash 缺点
    • 1 、传递数据量有限
    • 2 、不太安全
  • 36. 主域不同时
    • 3 、 window.name
    • window.name 是什么:
      • name 在浏览器环境中是一个全局 window 对象的属性
      • 当在 iframe 中加载新页面时, name 的属性值依旧保持不变
      • name 属性仅对相同域名的 iframe 可访问
  • 37. window.name
    • window.name 的优势:
      • 数据量更大( 2M )
      • 更安全
      • 可传递多种数据格式
  • 38. window.name
    • window.name 的劣势:
      • 只适用于隐藏 iframe 的情形
  • 39. window.name
    • window.name :
      • demo : http://news.jiaju.com/images/sy/demo/iframe04/a.htm
      • 国内起源:
        • 怿飞博客: http://www.planabc.net/2008/09/01/window_name_transport/
        • 张克军的例子
        • http://hikejun.com/demo/windowname/demo_windowname.html
  • 40. window.name
    • 原理 (1) :
    window.name=‘Hello kitty!’ 1 、 创建 iFrame B 2 、 把要传递的数据放入 window.name
  • 41. window.name
    • 原理 (2) :
    3 、 在 A 中将 B 替换 成 C 4 、 读取 C 的 window.name 以获取数据
  • 42. window.name
    • window.name 线上使用 :
      • 新浪乐居、百度乐居、新浪家居 SSO 登陆
  • 43. Cookie 跨域解决办法
  • 44. Cookie 跨域
    • 主域相同、子域不同时:
      • 设置 cookie 的
      • domain= . 主域名 ;
      • 各个子域均可获取
  • 45. Cookie 跨域
    • 主域相同、子域不同时:
      • 示例
      • document.cookie =
      • “ JIAJU_SITE_CH=bj;path=/; domain=.jiaju.com; expires= 1323326186697 ”
  • 46. Cookie 跨域
    • 主域相同、子域不同时:
      • 线上示例
      • 家居就切换城市
  • 47. Cookie 跨域
    • 主域不同时:
      • 不能获取
  • 48. Flash 跨域解决办法
  • 49. Flash 跨域
    • flash 与后台通信:
        • 根目录下放置 crossdomain.xml
    • flash 与 flash 通信:
        • Security.allowDomain(&quot;*&quot;);
        • Security.allowInsecureDomain(&quot;*&quot;);
  • 50. Flash 跨域
    • flash 与 js 通信
      • HTML 中
        • 当 AllowScriptAccess 设置为 &quot;never&quot; 时,运行对外脚本会失败;
        • 当 AllowScriptAccess 设置为 &quot;always&quot; 时,可以成功运行对外脚本;
      • flash 中
        • Security.allowDomain(&quot;*&quot;);
        • Security.allowInsecureDomain(&quot;*&quot;);
  • 51. Flash 跨域
    • 以上内容来源于 小微哥
    • 感谢 小微哥 的总结
  • 52.
    • Q&A
  • 53.
    • thanks

×