计算机网络之iframe内联框架跨域

• iframe框架同源下的数据调用
• iframe框架非同源下的数据传输

 一、iframe框架同源下的数据调用

 1.父窗口向子窗口获取数据

 1 //html1父级窗口
 2 
 3 
 9 //html2子级窗口
10 

2.子窗口向父窗口获取数据

 1 //父级窗口
 2 
 3 
 6 //子级窗口
 7 

 注：

1.获取iframe内的window又多种方法，示例中采用获取iframe标签再通过contentWindow属性获取，是一种通用的写法。

标准浏览器：window.frames['iframe的name']。采用window上的frame属性然后通过内联框架的name属性获取。

IE专用：document.iframes[‘iframe的name’].contentWindow。

　　　  docuemtn.iframes[i].contentWindow。(i表示索引)

2.获取父级窗口的对象：window.parent

3.获取顶级窗口的对象：window.top

4.获取属于自己的窗口对象：window.self

 二、iframe框架非同源下的数据传输（跨域传输）

 1.通过hash值向子窗口传送数据：父窗口代码==》

 1 //父级窗口
 2 
 3 

 子窗口代码==》

 1 //子窗口
 2 

这种做法是可以实现时时的跨域内联框架的数据传输，但是定时器的性能损耗太大，并不适合。而且这种方法也仅仅适应父级窗口向子级窗口传输数据。

2.通过window.name实现跨域内联框架数据传输（需要借助一个同源的页面），解决子窗口向父级窗口传输数据：

//子窗口有一个变量
var a = 1;
window.name = a;

在非同源的父级窗口（跨域获取子窗口变量的值的方法）