iframe通信

最新推荐文章于 2025-03-21 11:22:20 发布

面条请不要欺负汉堡

最新推荐文章于 2025-03-21 11:22:20 发布

阅读量479

点赞数

分类专栏： javascript+TypeScript 文章标签： javascript html 前端 iframe通信跨域

原文链接：https://blog.youkuaiyun.com/bslydhs/article/details/123473390

版权

javascript+TypeScript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了HTML的iframe标签，包括其属性、优缺点及非跨域通信的实现方式。通过示例展示了如何在同源策略下进行父子页面的交互，并探讨了跨域通信中使用postMessage的方法。同时，提到了通过设置document.domain解决同主域跨域问题以实现页面元素的访问。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.基础信息

简介：

    iframe作为一个html标签，可以让嵌入任何的html网页

属性：

    1.frameborder:是否显示边框，1(yes),0(no)
    2.height:height属性指定了iframe的像素高度，建议使用css設置。
    3.width:width属性指定了iframe的像素宽度，建议使用css設置。
    4.name:iframe的名称，window.frames[name]时专用的属性。
    5.scrolling:iframe是否滚动。yes,no,auto。
    6.src：iframe的网址。
    7.sandbox:控制iframe內的权限(html5新功能)，相关资料：[Play safely in sandboxed IFrames - HTML5 RocksHow to Safeguard your Site with HTML5 Sandbox](https://web.dev/sandboxed-iframes/) [| Microsoft Docs](https://docs.microsoft.com/en-us/previous-versions/msdn10/hh563496%28v=msdn.10%29)

缺点：

    1、iframe会阻塞主页面的Onload事件；
    2、搜索引擎的检索程序无法解读这种页面，不利于SEO；
    3、iframe和主页面共享连接池，而浏览器对同域的连接有限制，所以会影响页面的并行加载；
    4.因为iframe等于打开一个新的网页，所有的JS/CSS全部加载一遍，内存会增加；

二.iframe非跨域通信

有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;

父调子

// 父页面
<button id="button">给子页面发消息</button>
<iframe src="http://127.0.0.1:5500/iframe/children.html" name="childrenName"></iframe>
<script>
    var button = document.getElementById('button');
    button.onclick=function(){
        if(childrenName.document.readyState=="complete"){
            childrenName.window.fnChild('hello啊，在吗');  // 向子页面问好
        }
    }
</script>
 
 
 
// 子页面
<div id="hhhh">我是子页面</div>
<script>
    function fnChild (arg) {
        console.log(arg);  // 成功打印出‘hello啊，在吗’
    }
</script>

当然以上的前提的话是iframe中的内容已经加载完毕，否则是会报错的;
判断iframe 加载是否完成有2种方法
1,childrenName.document.readyState == 'complete’来判断；
2,childrenName.onload = function() {} 使用onload 回调函数,把调用的方法都写在这个回调函数里面

子调父

// 父页面
function receive(arg) {
    console.log(arg)
}
 
// 子页面
parent.window.receive('不在');

当然我们也会牵扯到父子元素的引用：

父页面获取子页面元素操作

我们还是使用上面的html

//原生js 获取子页面window对象
1、var childWindow = document.getElementById("hhhh").contentWindow;
2、var childWindow = document.getElementsByTagName('div')[0].contentWindow;
// 其实就是普通的获取方法,只是后面多了一个contentWindow;
// jquery
var childWindow = $('#hhhh').contentWindow;
 
// 获取子页面的document对象 (假设已经通过上面的方法得到了window对象)
var frameDoc = childWindow.document;
var frameBody = frameDoc.body;
// jquery 也是跟上面的一样
var frameDoc = $(childWindow.document);
 
// 原生获取元素
childWindow.document.getElementById('a') // 上面都已经拿到了子页面的window对象,所以获取子页面的元素也就只需要想普通操作那样获取就好
childWindow.document.getElementById('a').style.color='red' // 改个颜色
 
// jq拿子页面元素
$('#f').contents().find('#a'); // $('#f').contents 这相当于拿到了iframe 里面所有的dom;

子页面访问父页面元素

// 原生js
window.parent.document.getElementById('a'); // window.parent获取到父页面的window对象,那么接可以使用一般操作获取元素
window.parent.document.getElementById('a').style.color="red";// dom操作
// jquery
$("#a",parent.document); // $(父页面元素选择器, parent.document);
$("#a",parent.document).css('border','1px solid red');

三. iframe跨域通信

父传子

// 父页面
<iframe id="iframe" src="http://test.com/childrenCrossDomain.html" name="childrenName"></iframe>
   
<script>
      let iframe = document.getElementById('iframe');
      function sendToChildren(){
          iframe.contentWindow.postMessage('hello啊，在吗', 'http://test.com')
      }
</script>
 
// 子页面
<script>
      window.addEventListener("message", function(e){
          console.log(e.data)
      });
</script>

子传父

// 父页面
window.addEventListener('message',function(e){
    console.log(e.data)//不在
})
 
// 子页面
window.parent.postMessage('不在', 'http://父域名');
 window.parent.postMessage('fail', '*');

父子页面元素操作

跨域情况下是不能直接获取子页面元素的，但如果是同一主域的跨域，如：aaa.test.com和bbb.test.com，可以采用如下方法：
实现的关键点，是在父、子页面都加入一条js语句：

<script language="javascript">
  document.domain = "test.com";
</script>

父页面代码：

<body>
    <div id="parentPage">aaa</div>
</body>
<script type="text/javascript">
  document.domain = "test.com";
  setTimeout(function(){
  //父页面获得子页面某元素的html内容
       console.log(document.getElementById("iframe1").contentWindow.document.getElementById("sonPage").innerHTML);
  },3000);
</script>
<iframe id="iframe1" name="iframe1" style="width:0px;height:0px" src="http://bbb.test.com/test.html">

子页面代码：

<body>
   <div id="sonPage">bbb</div>
</body>
<script type="text/javascript" >
    document.domain = "test.com";
    //子页面赋html内容给父页面某元素
    window.parent.document.getElementById("parentPage").innerHTML = "123";
</script>