JavaScript iframe 实现多窗口通信实例详解

2026-02-06 12:27:40

引言

我最近在完善 easyjobs 代码共享的功能。

左侧是代码编辑器，右侧下方有一个控制台。

当我们在左侧编辑完成代码后，点击运行 JS，右侧的控制台就可以输出内容。

而右侧上方有一个渲染画布，用来作为代码运行的容器。

你可以打开网址尝试：www.easyjobs.biz/code-sharin…。

因为同时需要运行 JavaScript 代码，所以需要对环境进行隔离。也就是要有一个独立的 JavaScript 运行环境，也可以叫做沙箱。

该怎么做呢？

实现 JavaScript 沙箱的方案有很多，比如 iframe、with+Proxy、还有基于 Object.freeze 的不成熟提案，如果不涉及 Web API 的话，甚至可以借助 nodejs 的 vm 模块。

不过 JavaScript 沙箱不是本文的重点。我的场景决定了 iframe 是最好的选择，因为我不仅仅需要隔离 JS 代码，还要隔离 HTML 和 CSS 代码。

如何做沙箱呢？

iframe 有一个 srcdoc 属性，把要执行的代码传给它就可以了。

<iframe srcdoc="<script>alert('hello')</script>"></iframe>

为了方便查看 iframe 中 console 输出的内容，我们还需要想办法接收 iframe 传递过来的消息。

这也就是本文的主要内容，iframe 通信实战。

iframe 基本通信

我在这里用代码来演示一下 iframe 最基本的通信是如何做的。

基本的 HTML 结构

首先我们有一个 index.html 文件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>父窗口</title>
  </head>
  <body>
    <p>父窗口</p>
    <iframe src="./sub.html"></iframe>
    <button onclick="sendMessage()">发送一条消息给子窗口</button>
    <p id="response"></p>
  </body>
</html>

然后有一个 sub.html。

<!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" />
    <title>子窗口</title>
  </head>
  <body>
    <p>子窗口</p>
    <button onclick="sendMessage()">发送一条消息给父窗口</button>
    <p id="response"></p>
  </body>
</html>

它们的关系就是相互嵌套的关系。

打开 index.html，大概是下面这样。

需要注意，多窗口通信需要使用 http(s) 协议。

使用 JavaScript 在窗口之间发送消息

我们来实现一下父窗口的 sendMessage 方法。

let sub = window.frames[0]
function sendMessage() {
  sub.postMessage({ msg: "来自父窗口的一条消息" })
}

其中 window.frames 是获取当前窗口的所有 iframe 元素，它返回一个类似数组的结构。

通过调用 sub 的 postMessage 方法可以传递消息。

然后我们来到 sub.html 中编写接收端的代码。

const responseEl = document.getElementById("response")
window.addEventListener("message", function (e) {
  responseEl.innerHTML += `收到一条消息:${e.data.msg}`
})

接收端使用 window.addEventListener 来监听 message 事件。当有其他窗口通过 poseMessage 来向当前窗口发送消息时，会触发这个事件。

我们来点击父窗口的「发送一条消息给子窗口」按钮。

可以看到子窗口可以打印父窗口的消息。

同理，我们也可以通过 parent.postMessage 反向向父窗口传递消息。

在 sub.html 中继续增加 sendMessage 代码。

function sendMessage() {
  parent.postMessage({ msg: "来自子窗口的一条消息" })
}

这个代码和 index.html 中发送消息的代码很相似，唯一的区别就是接受者变成了 parent。parent 就是指当前窗口的父窗口。

回到 index.html 中，增加监听代码。监听代码与子窗口完全一致，可以直接复制过来。

const responseEl = document.getElementById("response")
window.addEventListener("message", function (e) {
  responseEl.innerHTML += `收到一条消息:${e.data.msg}</br>`
})

我们来点击子窗口的「发送一条消息给父窗口」按钮。

这样就实现了 iframe 窗口间双向通信。

注意事项

类型

需要注意的是，postMessage 仅支持 JSON 支持的类型。

string
number
null
boolean
object
array

如果传递 undefined 的话，会自动转成 null。

除了上述类型以外的其他类型都不支持，比如 function、symbol。如果传递了这些类型，浏览器会报错。

如何传递函数并执行

传递函数是一个很常见的需求，我们可以通过把函数转换为字符串的方式进行传递。

比如下面这样：

function fn () {}
sub.postMessage({ fn: fn.toString() })

在接收方只需要通过 eval 就可以调用函数字符串了。

不过如果函数内引用了外部变量的话，那就不行了。

比如下面这样：

let name = '代码与野兽'
function fn () {
  console.log(name)
}
sub.postMessage({ fn: fn.toString() })

因为接收端无法获取到发送端的变量。

如果碰巧接收端也存在 name 这个变量的话，eval 在执行时就会访问到接收端的变量而非发送端的变量。

这里也体现出了纯函数的优势。如果我们遵循函数式编程范式编写了纯函数，就不会导致这个问题。

如何在父窗口访问到子窗口的 console

回到文章开头，虽然我们可以通过 iframe 通信来传递消息，但实现 iframe 执行 console 同步到父窗口，仍然是个问题。

其实非常简单，把 console 对象上的所有方法劫持，然后把这段代码加入到 iframe 最顶部就可以了。

var fns = new Map()
for(let key in console) {
  fns.set(key, console[key])
  console[key] = (...args) => {
    funcToString(args)
    window.parent.postMessage({ type: 'console.' + key, args }, "*")
    return fns.get(key)(...args)
  }
}

其中会调用 funcToString 方法，这个方法就是把所有的 function 字符串化。

因为我们不确定传入的结构的嵌套深度，所以需要使用递归来转换。

function funcToString(args) {
  Object.keys(args).forEach((key) => {
    const arg = args[key]
    if (typeof arg === "function") {
      args[key] = arg.toString()
    } else if (typeof arg === "object") {
      funcToString(arg)
    }
  })
}

以上就是JavaScript iframe 实现多窗口通信实例详解的详细内容，更多关于JavaScript iframe多窗口通信的资料请关注我们其它相关文章！

php main 与 iframe 相互通讯类(js+php同域/跨域)

main 与 iframe 相互通讯类之前写过一篇<iframe与主框架跨域相互访问方法>,介绍了main与iframe相互通讯的原理,不了解原理的可以先看看. 今天把main与iframe相互通讯的方法封装成类,主要有两个文件, JS:FrameMessage.js 实现调用方法的接口,如跨域则创建临时iframe,调用同域执行者. PHP:FrameMessage.class.php 实现接收到跨域请求时,根据参数返回执行方法的JS code. 功能如下: 1.支持同域与跨域通讯 2.传
JS实现iframe中子父页面跨域通讯的方法分析

本文实例讲述了JS实现iframe中子父页面跨域通讯的方法.分享给大家供大家参考,具体如下: 在非跨域的情况下,iframe中的子父页面可以很方便的通讯,但是在跨域的情况下,只能通过window.postMessage()方法来向其他页面发送信息,其他页面要通过window.addEventListener()监听事件来接收信息: #跨域发送信息 #window.postMessage()语法 otherWindow.postMessage(message, targetOrigin, [tra
Javascript之图片的延迟加载的实例详解

Javascript之图片的延迟加载的实例详解作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了) 原理: 1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片 2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面
JavaScript复制变量三种方法实例详解

这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,
C#使用命名管道Pipe进行进程通信实例详解

1.新建解决方案NamedPipeExample 新建两个项目:Client和Server,两者的输出类型均为"Windows 应用程序".整个程序的结构如下图所示. 此Form1为Client的窗体,如下图所示. 后端代码,如下. using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using Syst
JavaScript设计模式之调停者模式实例详解

本文实例讲述了JavaScript设计模式之调停者模式.分享给大家供大家参考,具体如下: 1.定义调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用.从而使他们可以松散偶合.当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用.保证这些作用可以彼此独立的变化.调停者模式将多对多的相互作用转化为一对多的相互作用.调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理. 2.使用的原因当对象之间的交互操作很多,且每个对象的行为操
Iframe跨窗口通信原理详解

目录同源 iframe window:document.domain iframe:错误文档陷阱 window.frames “sandbox” iframe 特性 iframe 通信:postMessage onmessage 1 postMessage 2 onmessage 跨窗口的 cookie 同源同源策略会限制窗口(window) 和 frame 之间的通信,因此首先要知道同源策略. 同源策略目的是保护用户信息免遭信息盗窃:加入小王有两个打开的页面:一个是 shop.com,一
JavaScript函数节流概念与用法实例详解

本文实例讲述了JavaScript函数节流概念与用法.分享给大家供大家参考,具体如下: 最近在做网页的时候有个需求,就是浏览器窗口改变的时候需要改一些页面元素大小,于是乎很自然的想到了window的resize事件,于是乎我是这么写的 <!DOCTYPE html> <html> <head> <title>Throttle</title> </head> <body> <script type="text
Windows窗口消息实例详解

本文实例总结了Windows窗口消息.分享给大家供大家参考.具体如下: 复制代码代码如下: ////////////////////////////////////////////////////////////////////////// #include "AFXPRIV.H"//消息值的定义来源 #include "Dde.h"//DDE消息值的定义来源 #include "CPL.H"//控制面板消息值的定义来源
javascript原型继承工作原理和实例详解

先为大家分享JS原型继承实例,供大家参考,具体内容如下一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body>  <script type="text/javascript"> //cl
javascript数据结构之双链表插入排序实例详解

本文实例讲述了javascript数据结构之双链表插入排序实现方法.分享给大家供大家参考,具体如下: 数组存储前提下,插入排序算法,在最坏情况下,前面的元素需要不断向后移,以便在插入点留出空位,让目标元素插入. 换成链表时,显然无需做这种大量移动,根据每个节点的前驱节点"指针",向前找到插入点后,直接把目标值从原链表上摘下,然后在插入点把链表断成二截,然后跟目标点重新接起来即可. <!doctype html> <html> <head> <t
javascript性能优化之事件委托实例详解

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa