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

需求描述

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

开始上手

上代码

父页面

  
    
    
    
    
    
  
  
    
父页面
    ❤ 点击触发父页面的事件 ❤
    

    
    
  

iframe页面

  
    
    
    
    
    
  
  
    
iframe页面
    ❤ 点击触发iframe页面的事件 ❤
    
  

父向子传值

方法一：通过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

一起来看一下效果吧~

待继续补充

• 今天就写到这里啦~
• 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
• 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~