多种方案教你实现iframe嵌套页面相互传参(父子通信)

最新推荐文章于 2024-09-24 18:48:48 发布

tangdou369098655

最新推荐文章于 2024-09-24 18:48:48 发布

阅读量2.8w

点赞数 42

分类专栏：前端必备文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/tangdou369098655/article/details/131467799

版权

前端必备专栏收录该内容

64 篇文章 5 订阅

订阅专栏

文章目录

需求描述

在工作中，我们会遇到一些需求，使用iframe嵌套另一个页面，这个页面大部分情况下不会部署在父页面相同的域名下，但是又需要父子页面进行数据交互，那么我们该怎么处理呢？

开始上手

上代码

父页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./common.css" />
    <title>Document</title>
  </head>
  <body>
    <h2>父页面</h2>
    <button onclick="doAction()">❤ 点击触发父页面的事件 ❤</button>
    <br />
    <iframe
      id="iframeContainer"
      name="iframePage"
      src="./iframe-page.html"
      frameborder="0"
      scrolling="no"
    >
    </iframe>
    <script>
   
      const doAction = () => {
        console.log("父页面的事件");
      };
    </script>
  </body>
</html>

iframe页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      queryName="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <link rel="stylesheet" type="text/css" href="./common.css" />
    <title>Document</title>
  </head>
  <body style="background-color: black">
    <h2>iframe页面</h2>
    <button onclick="iframeDoAction()">❤ 点击触发iframe页面的事件 ❤</button>
    <script>
      const iframeDoAction = () => {
        console.log("iframe页面的事件：iframeDoAction");
      };
      
    </script>
  </body>
</html>

父向子传值

方法一：通过URL传参

父页面添加代码

 // 页面初始化完成自动传递数据给子页面 方案一：--start
      const iframeDom = document.getElementById("iframeContainer");
      let url = iframeDom.src + "?id=1&name=糖豆豆"; //拼接上需要传递的参数
      document.getElementById("iframeContainer").src = url;
      // 页面初始化完成自动传递数据给子页面 方案一：--end

iframe页面添加代码

// 页面初始化完成自动传递数据给子页面 方案一：--start
      function getUrlQuery(queryName) {
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return r[2];
        return null;
      }
      window.onload = function () {
        console.log("iframe页面的事件：window.onload");
        console.log(getUrlQuery("id"), decodeURIComponent(getUrlQuery("name")));
      };
      // 页面初始化完成自动传递数据给子页面 方案一：--end

方法二：通过window.postMessage()方法

父页面添加代码

// 父页面传递数据给子页面：--start
      const doAction = () => {
        console.log("父页面的事件");
        let send = document.getElementById("iframeContainer").contentWindow;
        send.postMessage("我是父页面发的数据", "*");
      };
      // 父页面传递数据给子页面：--end

iframe页面添加代码

 // 父页面传递数据给子页面：--start
      const iframeReceiveData = (data) => {
        console.log("iframe页面的事件：iframeReceiveData");
                console.log(data)
      };
      window.onload = function(){
            window.addEventListener('message',function(e){
                iframeReceiveData(e.data)
            })
       }
      // 父页面传递数据给子页面：--end

注意事项

postMessage方法有三个参数

参数1 ：发送的数据；
参数2 ：哪些窗口能收到消息事件，用来指定接收消息事件的窗口，其值可以是一个URI或者字符串"*"（表示无限制）举个栗子：window.postMessage(‘hello!’, ‘http://127.0.0.1:5005’);
参数3：是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

接收postMessage方的怎么用呢？

e.source --消息源，消息发送的窗口/iframe
e.origin – 消息源的URI,用来验证数据源
e.data – 数据

子向父传值

方法一：通过通过全局变量方式处理

父页面添加代码

  window.onload = function(){
            console.log(document.getElementById('iframeContainer').contentWindow.commonData4)
            console.log(document.getElementById('iframeContainer').contentWindow.commonData5)
            console.log(document.getElementById('iframeContainer').contentWindow.commonData6)
            // 调用方法
            document.getElementById('iframeContainer').contentWindow.commonData6()
         }

iframe页面添加代码

 var commonData4 = { name: "xiaojin", id: 1 };
      var commonData5 = 'xiaojin'
      var commonData6 = ()=>{console.log(123)}

一起来看一下效果吧

方法二：通过通过window.parent.postMessage()方法

父页面添加代码


      // 子页面传输数据给父页面 方案二： ---start
        window.onload = function(){
            window.addEventListener('message',function(e){
                console.log(e.data)
            })
      // 子页面传输数据给父页面 方案二： ---end

iframe页面添加代码

 // 子页面传输数据给父页面 方案二： ---start
      const iframeDoAction = () => {
        console.log("点击触发iframe页面的事件：iframeDoAction");
        window.parent.postMessage("I am xiaojin", "*");
      };
      // 子页面传输数据给父页面 方案二： ---end

一起来看一下效果吧~