A variety of solutions teach you to realize the mutual parameter transfer of iframe nested pages (parent-child communication)

Article Directory

Description of Requirement

In our work, we will encounter some requirements to use iframe to nest another page. In most cases, this page will not be deployed under the same domain name as the parent page, but it needs data interaction between parent and child pages. So how should we deal with it? Woolen cloth?

get started

upper code

parent page

<!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 page

<!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>

Pass value from parent to child

Method 1: Pass parameters through the URL

Parent page add code

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

iframe page add code

// 页面初始化完成自动传递数据给子页面 方案一：--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

Method 2: Through the window.postMessage() method

Parent page add code

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

iframe page add code

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

Precautions

The postMessage method has three parameters

Parameter 1: the data sent;
Parameter 2: Which windows can receive message events, used to specify the windows that receive message events, its value can be a URI or the string "*" (indicating unlimited) For example: window.postMessage('hello!', 'http://127.0.0.1:5005');
Parameter 3: It is a string of Transferable objects passed along with the message. Ownership of these objects will be transferred to the recipient of the message, and the sender will no longer retain ownership.

How to use the receiving postMessage side?

e.source -- message source, the window/iframe where the message is sent
e.origin – the URI of the message source, used to verify the data source
e.data – data

Pass value from child to parent

Method 1: By processing through global variables

Parent page add code

  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 page add code

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

Let's see the effect together

Method 2: Through the window.parent.postMessage() method

Parent page add code


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

iframe page add code

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

Let's take a look at the effect~

to be added

I will write here today~
Friends, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ See you tomorrow~~
Everyone be happy every day

Everyone is welcome to point out where the article needs to be corrected~
Learning is endless, cooperation is win-win

insert image description here