iFrame跨域解决办法

按情境分
1、不跨域时
2、主域相同、子域不同时
3、主域不同
不跨域时
访问iframe： contentWindow
访问父级：parent
访问顶级：top

 a.html 

 
 
     
     
 
 
    这是高层的密码！
 
    看看员工在说什么



    员工们：
 
     
     
 

 b.html 

 
      
 
    这是员工的密码！

    看看领导在说什么
 
    

 

跨域时

1、主域相同、子域不同
使用document.domain=主域名

a.html (http://a.xxx.com/js/crossdomain/demo/a.htm)

这是高层的密码！

看看员工在说什么


员工们：

b.html ((http://b.xxx.com/com/js/crossdomain/demo/b.htm ))

这是员工的密码！

看看领导在说什么

 

两个域都设置：document.domain=‘jiaju.com’

2、主域不同
解决办法：
1、location.hash
2、window.name
location.hash
location.hash 是什么：
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）
http://www.xxx.com/js/crossdomain/proxy.html#iframeID=google&height=362&JJtype=height

例子
location.hash(A操作B)
A通过location.hash方式传递参数给B，B通过定时器检测hash变化，执行对应操作。
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)

这是高层的密码！

看看员工在说什么


员工们：

b.html

这是员工的密码！

看看领导在说什么

location.hash(B操作A)
A创建和上层同域的iframe通过location.hash方式传递参数给B ，B通过top.window获取顶层window对象A
a.html(http://www.aaa.com/demo/cross/iframe03/a.htm)

这里是A（第一层）

b.html(http://www.bbb.com/demo/crossiframe/b.html)

这里是B（第二层）iframe

这里高度可以变化
点击改变高度点击调用顶层callback

 

location.hash原理：
1、动态改变location.hash，iframe不会重载
2、无论跨域与否，iframe内可以获取自己的location.hash
3、只要域名相同就能通信，即使ABC三层嵌套
location.hash通用解决办法：
被嵌入的跨域的iframe中引入


提供以下方法：
JJcrossiframe.setHeight(‘youiframeID’) //自动设定跨域iframe高度
JJcrossiframe.setWidth(‘youiframeID’)  //自动设定跨域iframe宽度
JJcrossiframe.callback(‘fn’，paramobj)  //调用顶层iframe中fn函数
JJcrossiframe.init(paramobj , type)             //自定义向顶层传参数
//  (type目前有：height,width,callback),
//  新增type需在代理页面内自定义开发

location.hash缺点
1、传递数据量有限
2、不太安全



window.name
window.name 是什么：
name 在浏览器环境中是一个全局window对象的属性
当在 iframe 中加载新页面时，name 的属性值依旧保持不变
name 属性仅对相同域名的 iframe 可访问
window.name 的优势：
数据量更大（2M）
更安全
可传递多种数据格式
window.name 的劣势：
只适用于隐藏iframe的情形

国内起源：
怿飞博客： http://www.planabc.net/2008/09/01/window_name_transport/
张克军的例子
http://hikejun.com/demo/windowname/demo_windowname.html
原理(1) ：
A创建iFrame B,把要传递的数据放入window.name