父頁面通過ifarame傳遞參數
有些時候，我們需要在嵌套頁面。
我們就需要使用iframe了。
通過iframe傳遞參數給子頁面。
需求描述，當我們點擊按鈕的時候。
傳遞參數給子頁面。子頁面接受后展示出來。
我們使用postMessage() 方法用於安全地實現跨源通信。
otherWindow.postMessage(message, targetOrigin, [transfer]);
第一個參數你傳遞的消息
第二個參數你傳遞的地址。(其值可以是 *（表示無限制）或者一個 URI)
第三個參數transfer可選，是一串和 message 同時傳遞的 Transferable 對象。
這些對象的所有權將被轉移給消息的接收方，而發送一方將不再保有所有權。
父頁面傳遞參數
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父頁面給子頁面傳遞參數</title>
<style>
html,
body {
height: 100%;
}
</style>
</head>
<body>
<div>
<input id="text" type="text" value="Runoob" />
<button id="sendMessage">發送消息</button>
</div>
<iframe id="receiver" src="http://127.0.0.1:8848/%E7%A5%9E%E5%A5%87%E7%9A%84display/index.html" width="100%" height="100%">
<p>我是標題</p>
</iframe>
<script>
window.onload = function() {
//獲取iframe窗口的 contentWindow 屬性
var receiver = document.getElementById('receiver').contentWindow;
console.log('receiver', receiver)
// 給按鈕綁定點擊事件
var btn = document.getElementById('sendMessage');
btn.addEventListener('click', function(e) {
// 阻止事件的默認行為
e.preventDefault();
var val = document.getElementById('text').value;
// 傳遞數據給子頁面.是我另外一個服務器的地址[http://127.0.0.1:8848]
receiver.postMessage("Hello " + val + "！", "http://127.0.0.1:8848");
});
}
</script>
</body>
</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>Document</title>
<style>
#divdemo{
background:pink;
}
</style>
</head>
<div id="recMessage">
我是子頁面
</div>
</body>
<script>
window.onload = function() {
var messageEle = document.getElementById('recMessage');
window.addEventListener('message', function (e) { // 監聽 message 事件
console.log("e",e)
alert('消息來自的地址',e.origin);
if (e.origin !== "http://127.0.0.1:5500") { // 驗證消息來源地址。這個地址是父頁面的地址
return;
}
messageEle.innerHTML = "從"+ e.origin +"收到消息： " + e.data;
});
}
</script>
</html>
