码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-04-13 09:16:02      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:页面   传输数据   解决   调用   ash   OLE   适应   var   对象   

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

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

 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

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

 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>

 

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

标签:页面   传输数据   解决   调用   ash   OLE   适应   var   对象   

原文地址:https://www.cnblogs.com/ZheOneAndOnly/p/10699506.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!