首页/文章/javascript

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

2024-09-19

613 字约 3 分钟

...

需求描述

在工作中，我们会遇到一些需求，使用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传参

父页面添加代码

 
      const iframeDom = document.getElementById("iframeContainer");
      let url = iframeDom.src + "?id=1&name=糖豆豆"; 
      document.getElementById("iframeContainer").src = url;

iframe页面添加代码

      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")));
      };

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

父页面添加代码

      const doAction = () => {
        console.log("父页面的事件");
        let send = document.getElementById("iframeContainer").contentWindow;
        send.postMessage("我是父页面发的数据", "*");
      };

iframe页面添加代码

 
      const iframeReceiveData = (data) => {
        console.log("iframe页面的事件：iframeReceiveData");
                console.log(data)
      };
      window.onload = function(){
            window.addEventListener('message',function(e){
                iframeReceiveData(e.data)
            })
       }

注意事项

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()方法

父页面添加代码

      
        window.onload = function(){
            window.addEventListener('message',function(e){
                console.log(e.data)
            })

iframe页面添加代码

 
      const iframeDoAction = () => {
        console.log("点击触发iframe页面的事件：iframeDoAction");
        window.parent.postMessage("I am xiaojin", "*");
      };

一起来看一下效果吧~

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →

javascript2026-02-24

navigator.sendBeacon全指南

在前端开发中，埋点系统是必不可少的一环。我们经常需要在用户关闭页面、刷新或跳转路由时，向服务器发送最后一条统计数据（比如用户停留时长、页面跳出率）。但这看似简单的需求，在实现时却危机四伏：请求发不出去？页面跳转卡顿？今天我们就来聊聊这个问题的终极解决方案 —— 。一、痛点与传统方案的挣扎场景还原当用户点击关闭按钮时，浏览器会触发生命周期事件（或）。如果我们直接使用普通的异步 AJAX ( 或 ) 发送请求，浏览...

javascript2025-11-02

理解浏览器事件系统,从用户点击到事件对象的完整旅程

深入理解浏览器事件系统：从用户点击到事件对象的完整旅程 “当我点击页面按钮时，背后发生了什么？为什么回调函数能收到一个包含丰富信息的event对象？今天，让我们一起揭开浏览器事件系统的神秘面纱。” 一个令人困惑的现象作为前端开发者，我们每天都在写这样的代码：这段代码如此熟悉，以至于我们很少停下来思考：这个对象到底从哪里来？它为什么能知道点击的精确坐标？为什么能识别是哪个元素被点击了？更神奇的是，当我们手动创建事件时：...

javascript2025-10-01

实现大文件上传全流程详解

在日常开发中，大文件上传是个绕不开的坎——动辄几百 MB 甚至 GB 级的文件，直接上传不仅容易超时，还会让用户体验大打折扣。最近我用 Vue+Express 实现了一套完整的大文件上传方案，支持分片上传、断点续传、秒传和手动中。一、先看效果：我们要实现什么？先上核心功能清单，确保大家明确目标，知道我们要解决哪些实际问题：大文件分片上传：将文件切成固定大小的小片段分批上传，避免单次请求超时秒传：服务器已存在完整文件时，直接返...

javascript2025-09-18

JavaScript 的多线程能力：Worker

如果你写过一些计算量稍大的 JavaScript 代码，比如图像处理、大量数据排序或者复杂的算法，你几乎肯定遇到过浏览器“卡死”的现象。点击页面没反应，动画也停了，就像整个世界都静止了。这就是主线程被阻塞的典型后果。因为主线程既要负责执行 JavaScript，又要负责渲染页面、响应用户操作，一旦它被繁重的计算任务占满，就无暇顾及其他，用户体验便直线下降。这个问题的根源，正是“主线程是单线程的”。那么，如何解决呢？答案很简单：把这...

javascript2025-09-15

一张 8K 海报差点把首屏拖垮

你给后台管理系统加了一个「企业风采」模块，运营同学一口气上传了 200 张 8K 宣传海报。首屏直接飙到 8.3 s，LCP 红得发紫。老板一句「能不能像朋友圈那样滑到哪看到哪？」——于是你把懒加载重新翻出来折腾了一轮。解决方案：三条技术路线，你全踩了一遍 1\. 最偷懒：原生一行代码就能跑，浏览器帮你搞定。 🔍 关键决策点 2020 年后现代浏览器全覆盖，IE 全军覆没。必须写死，否则 CLS 会抖成 PPT。适用场景...

javascript2025-09-10

🚀 Web Worker让你的应用丝滑

🌟 引言在日常的前端开发中，你是否遇到过这样的困扰：大数据处理时页面卡死：处理几万条数据时，页面直接卡成PPT，用户点击毫无反应复杂计算阻塞UI ：图片处理、数据分析等计算密集型任务让整个应用假死文件上传/下载卡顿：大文件操作时，其他功能完全无法使用实时数据处理性能差：WebSocket接收大量数据时，页面渲染严重滞后今天分享6个Web Worker的核心技巧，让你的应用告别卡顿，用户体验丝滑如德芙！ 💡 核心技巧...

评论

请登录后发表评论

加载评论中...

目录