用原生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>父頁面傳信息給子頁面?
子頁面傳信息給父頁面?
總結
以上是生活随笔為你收集整理的用原生js的postMessage实现iframe传值，也可以用于跨域嵌套iframe传值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【全网最短】实现倒计时：时分秒的功能
- 下一篇： 只需三分钟您就可以用nodejs搭建静态