前言:
在實際開發過程中:會使用iframe嵌套其他頁面,並且會有參數傳遞,以下爲完成例子
(本人項目案例:通過子頁面事件觸發,改變父頁面的頁面狀態)
父頁面:a.html
<!DOCTYPE html>
<html>
<head>
<title>父頁面</title>
</head>
<body>
<div class="parent">
<iframe src="./b.html"></iframe>
</div>
</body>
<script type="text/javascript">
// 接收子頁面參數
window.addEventListener('message', function(result){
// 審批返回數據,頁面調條數
var data = JSON.parse(result.data);
// 彈出框-展示子頁面傳過來的參數
alert(data.value);
})
</script>
</html>
子頁面:b.html
<!DOCTYPE html>
<html>
<head>
<title>子頁面</title>
</head>
<body>
<div class="children" onclick="toParent()">子頁面按鈕:傳參給父頁面</div>
</body>
<style type="text/css">
.children{
background-color: #1ab394;
cursor: pointer;
}
</style>
<script type="text/javascript">
/**
* 觸發事件,傳參給父頁面
*/
function toParent() {debugger
// 自定義對象
var obj = {
value: '我是子頁面傳過來的參數'
};
// 傳參給父頁面
window.parent.postMessage(JSON.stringify(obj),'*');
}
</script>
</html>