![前端 跨域 总结 张所勇（ suoyong ） [email_address] [email_address]](https://image.slidesharecdn.com/random-111208040358-phpapp02/85/-1-320.jpg)
前端跨域总结
- 1. 前端 跨域 总结 张所勇（ suoyong ） [email_address] [email_address]
- 2. Ajax 跨域 Iframe 跨域 Cookie 跨域 Flash 跨域 跨域情况
- 3. 跨域是什么？
- 4. 同源策略 同源策略是对 javascript 代码能够和哪些 Web 内容交互的一条完整的安全限制。
- 5. 什么情况会跨域？
- 10. 什么情况 不会 跨域？ 域名完全相同
- 11. Ajax 跨域解决办法
- 12. 示例 jiaju.com 和 zhangsuoyong.com 通信
- 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=/slideshow/ss-10511572/10511572/"http:/static.jiaju.com/jiaju/com/js/crossdomain/crossdomain.js"></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("*"); Security.allowInsecureDomain("*");
- 50. Flash 跨域 flash 与 js 通信 HTML 中 当 AllowScriptAccess 设置为 "never" 时，运行对外脚本会失败； 当 AllowScriptAccess 设置为 "always" 时，可以成功运行对外脚本； flash 中 Security.allowDomain("*"); Security.allowInsecureDomain("*");
- 51. Flash 跨域 以上内容来源于 小微哥 感谢 小微哥 的总结
- 52. Q&A
- 53. thanks