标签：页面 传输数据 解决 调用 ash OLE 适应 var 对象
1.父窗口向子窗口获取数据
1 //html1父级窗口 2 <iframe src="./2.html"></iframe> 3 <script type="text/javascript"> 4 var oIframe = document.getElementsByTagName(‘iframe‘)[0]; 5 oIframe.onload = function(){ 6 console.log(oIframe.contentWindow.a);//打印出：22a 7 } 8 </script> 9 //html2子级窗口 10 <script type="text/javascript"> 11 var a = "22a"; 12 </script>
2.子窗口向父窗口获取数据
1 //父级窗口 2 <iframe src="./2.html"></iframe> 3 <script type="text/javascript"> 4 var a = "11a"; 5 </script> 6 //子级窗口 7 <script type="text/javascript"> 8 var a = "22a"; 9 console.log(window.parent.a);//11a 10 </script>
注：
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
1.通过hash值向子窗口传送数据：父窗口代码==》
1 //父级窗口 2 <iframe src="http://xxx.cn/iframe/2.html"></iframe> 3 <script type="text/javascript"> 4 //实现每点击一次修改一次内联框架的hash值 5 var oIframe = document.getElementsByTagName(‘iframe‘)[0]; 6 var a = 1; 7 var oSrc = oIframe.src; 8 document.onclick = function(){ 9 oIframe.src = oSrc + "#" + a; 10 a++; 11 } 12 </script>
子窗口代码==》
1 //子窗口 2 <script type="text/javascript"> 3 //通过定时器时时获取父窗口修改的hash值(注意没修改时不获取) 4 var ohash = window.hash;//获取初始hash值 5 setInterval(function(){ 6 if(ohash != window.location.hash){//判断时时hash值是否等于上一次的 7 console.log(window.location.hash); 8 ohash = window.location.hash;//将修改的hash值赋给ohash 9 } 10 },10); 11 </script>
这种做法是可以实现时时的跨域内联框架的数据传输，但是定时器的性能损耗太大，并不适合。而且这种方法也仅仅适应父级窗口向子级窗口传输数据。
2.通过window.name实现跨域内联框架数据传输（需要借助一个同源的页面），解决子窗口向父级窗口传输数据：
//子窗口有一个变量 var a = 1; window.name = a;
在非同源的父级窗口（跨域获取子窗口变量的值的方法）
<iframe src="http:xxx.cn\iframe\2.html"></iframe>
<script type="text/javascript">
//实现每点击一次修改一次内联框架的hash值
var oIframe = document.getElementsByTagName(‘iframe‘)[0];
oIframe.src = "3.html";//3是一个同源同源的页面
oIframe.onload = function(){
console.log(oIframe.contentWindow.name);
}
</script>
标签：页面 传输数据 解决 调用 ash OLE 适应 var 对象
原文地址：https://www.cnblogs.com/ZheOneAndOnly/p/10699506.html
