0
点赞
收藏
分享

微信扫一扫

用原生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>

父页面传信息给子页面 

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

子页面传信息给父页面 

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

举报

相关推荐

0 条评论