Uma variedade de soluções ensina você a realizar a transferência mútua de parâmetros de páginas aninhadas de iframe (comunicação pai-filho)

Diretório de artigos

Descrição do Requisito

Em nosso trabalho, encontraremos alguns requisitos para usar o iframe para aninhar outra página. Na maioria dos casos, essa página não será implantada no mesmo nome de domínio da página pai, mas precisa de interação de dados entre as páginas pai e filho. Então, como devemos lidar com isso? Pano de lã?

iniciar

código superior

página pai

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

página 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>

Passar valor de pai para filho

Método 1: passar parâmetros pela URL

Código de adição da página pai

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

página iframe adicionar código

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

Método 2: Através do método window.postMessage()

Código de adição da página pai

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

página iframe adicionar código

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

Precauções

O método postMessage tem três parâmetros

Parâmetro 1: os dados enviados;
Parâmetro 2: Quais janelas podem receber eventos de mensagem, usado para especificar as janelas que recebem eventos de mensagem, seu valor pode ser uma URI ou a string "*" (indicando ilimitado) Por exemplo: window.postMessage('hello!', 'http ://127.0.0.1:5005');
Parâmetro 3: É uma string de objetos transferíveis passados junto com a mensagem. A propriedade desses objetos será transferida para o destinatário da mensagem e o remetente não mais manterá a propriedade.

Como usar o lado postMessage receptor?

e.source -- origem da mensagem, a janela/iframe para onde a mensagem é enviada
e.origin – o URI da fonte da mensagem, usado para verificar a fonte de dados
e.dados - dados

Passar valor de filho para pai

Método 1: processando por meio de variáveis globais

Código de adição da página pai

  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()
         }

página iframe adicionar código

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

Vamos ver o efeito juntos

Método 2: Através do método window.parent.postMessage()

Código de adição da página pai


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

página iframe adicionar código

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

Vamos dar uma olhada no efeito~

para ser adicionado

Vou escrever aqui hoje~
Amigos, (￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ Até amanhã~~
Todos sejam felizes todos os dias

Todos são bem-vindos para apontar onde o artigo precisa ser corrigido~ O
aprendizado é infinito, a cooperação é ganha-ganha

insira a descrição da imagem aqui