嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）

TKCB · 发表于 2020-1-3 13:54:46

【游客模式】——注册会员，加入11RIA 闪客社区吧！一起见证Flash的再次辉煌……

您需要登录才可以下载或查看，没有帐号？立即注册

x

本帖最后由 TKCB 于 2020-2-4 09:57 编辑

TKCB网站
网址：www.tkcb.cc

嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）
以前浏览器页面之间相互访问，是允许的，但后面就不允许了。
于是就找到了 postMessage  这个东西，用来进行通信。

下面是网上搜到的介绍：
window.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机  (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。

从广义上讲，一个窗口可以获得对另一个窗口的引用（比如 targetWindow = window.opener），然后在窗口上调用 targetWindow.postMessage() 方法分发一个  MessageEvent 消息。接收消息的窗口可以根据需要自由处理此事件。传递给 window.postMessage() 的参数（比如 message ）将通过消息事件对象暴露给接收消息的窗口。

这是第一个分享给大家的H5技术练习，希望大家喜欢。

不废话看demo，代码注释很多，相信你们能看懂，代码写的不够好，敬请谅解
demo：http://www.tkcb.cc/menu/skill/html/html_0001/
截图：
QQ截图20200103152009.png

源文件下载（包含注释）

嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）.zip.zip (69.58 KB, 下载次数: 9, 售价: 10 银子)

kasher · 发表于 2020-1-3 18:32:56

学习了

雪原xy · 发表于 2020-1-8 21:13:37

好东西收藏起来！！！！

[HTML] 嵌套iFrame使用postMessage相互传递消息（嵌套iFrame、跨父子窗口、跨页面）

【游客模式】——注册会员，加入11RIA 闪客社区吧！一起见证Flash的再次辉煌……

本帖被以下淘专辑推荐:

站长推荐 /1