a頁面通過框架嵌套了b頁面，在a頁面中有一個下拉列表，選擇這個下拉列表，會及時將值傳給b頁面，並在b頁面中通過接收到的值做任何操作，比如查詢數據庫等。這就用到了js的監聽事件，代碼如下：
主頁代碼：
<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>
</head>
<body>
主頁
<iframe src="a.html" frameborder="0"></iframe>
</body>
</html>
a頁面代碼：
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
window.onload = function() {
document.getElementById("parentSelect").onclick = function() {
var val = this.options[this.selectedIndex].value;
document.getElementById("childIframe").contentWindow.postMessage({
value: val
},"*");
};
}
</script>
<body>
a頁面
<select name="parentIframe" id="parentSelect">
<option value="1">aaa</option>
<option value="2">bbb</option>
</select>
<iframe src="b.html" frameborder="0" id="childIframe"></iframe>
</body>
</html>
b頁面代碼：
<html lang="en">
<head>
<title>Document</title>
</head>
<script type="text/javascript">
window.onload = function() {
//子頁面監聽：
window.addEventListener("message", function(event) {
var data = event.data;
//以下內容為處理業務和調用當前頁面的函數方法
if(data.value && data.value ==1){
document.getElementsByClassName("showOption")[0].innerHTML = `
<select name="" id="">
<option value="">請選擇</option>
<option value="1">aaaa</option>
<option value="2">bbbbbbb</option>
</select>`
} else {
document.getElementsByClassName("showOption")[0].innerHTML = `
<select name="" id="">
<option value="">請選擇</option>
<option value="3">111111111</option>
<option value="4">22222222</option>
</select>`
}
});
}
</script>
<body>
b頁面
<div class="showOption">
</div>
</body>
</html>