直接上例子:
子页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script >
$(document).ready(function(){
$("#qq").click(function(){
$("#aaa").toggle();
window.top.postMessage("aa","*");
});
$("#qq1").click(function(){
$("#aaa").show();
})
});
</script>
<head>
<body>
<form></form><input id="txt" class="txt" type="hidden" />
<button id = "qq">
隐藏
</button>
<button id = "qq1">
显示
</button>
<p id= "aaa">会尽快哈发件客户的福建安徽</p>
</body>
</html>
父页面:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq学习</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script >
window.addEventListener('message',function(event) {
if(event.data == "aa"){
$("abc").toggle();
var p = document.getElementById("abc");
p.innerText = event.data;
}
},false);
</script>
<head>
<body>
<div>
<iframe style="width: 300px;height:300px" src = "xuanz.html"></iframe>
</div>
<div id = 'parent'></div>
<p id= "abc">会尽快哈发件客户的福建安徽</p>
</body>
</html>
直接把俩个页面复制粘贴,然后在浏览器打开父页面,就可以看到效果了。