用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值

简介: 用原生js的postMessage实现iframe传值,也可以用于跨域嵌套iframe传值

Window postMessage() 方法

定义和用法

postMessage() 方法用于安全地实现跨源通信。

语法

otherWindow.postMessage(message, targetOrigin, [transfer]);

参数 说明
otherWindow 其他窗口的一个引用,比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
message 将要发送到其他 window的数据。
targetOrigin 指定哪些窗口能接收到消息事件,其值可以是 *(表示无限制)或者一个 URI。
transfer 可选,是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方,而发送一方将不再保有所有权。

index.html

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>父页面</title>
</head>
<body>
<h1>这是父页面</h1>
<div>
    <textarea id="text" value="消息内容"></textarea><br>
    <button id="sendMessage">发送消息</button>
</div>
<br><br>
<h3>这是被嵌套的页面</h3>
<iframe id="receiver" src="iframe.html" width="300" height="200">
    <p>你的浏览器不支持 iframe。</p>
</iframe>
<script>
    var btn = document.querySelector("#sendMessage");
    var input = document.querySelector("#text");
    btn.addEventListener("click", function (e) {
        document.querySelector("#receiver").contentWindow.postMessage(input.value, "http://localhost:8888");//传信息给iframe页面
    });
    function getIframeMessage(msg) {
        input.value = "获取到了子页面的信息:" + msg;
    }
</script>
</body>
</html>

iframe.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>被嵌套页面</title>
</head>
<body>
<div id="recMessage">
</div>
<br><br>
<div>
    <input id="text" type="text" value="传递给父页面的消息内容"/>
    <button id="sendMessage">发送消息</button>
</div>
<script>
    var messageEle = document.getElementById("recMessage");
    //监听父页面传递的信息----------------------------------------
    window.addEventListener("message", function (e) {
        /*
        e.source – 消息源,消息的发送窗口/iframe。
        e.origin – 消息源的 URI(可能包含协议、域名和端口),用来验证数据源。
        e.data – 发送过来的数据。
        */
        if (e.origin !== "http://localhost:8888") return alert("未知来源地址:" + e.origin);  // 验证消息来源地址
        messageEle.innerHTML = "从" + e.origin + "<br>收到消息: " + e.data;
    });
    //传递信息给父页面----------------------------------------
    var btn = document.getElementById("sendMessage");
    btn.addEventListener("click", function (e) {
        var val = document.getElementById("text").value;
        window.parent.getIframeMessage(val);
    });
</script>
</body>
</html>

父页面传信息给子页面


子页面传信息给父页面


相关文章
|
1月前
|
JSON JavaScript 前端开发
js跨域实现
【10月更文挑战第31天】在实际开发中,需要根据具体的需求和项目情况选择合适的跨域解决方案。
24 1
|
29天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
41 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
2月前
|
Web App开发 JavaScript 前端开发
Javascript嵌套函数的调用
Javascript嵌套函数的调用
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
42 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
40 0
|
5月前
|
JavaScript
js 校验括号——括号不可嵌套且需成对出现
js 校验括号——括号不可嵌套且需成对出现
63 2
|
6月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
6月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选