本文主要是介绍HTML5之窗口间通信,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
准备工作:虚拟主机相关配置
同域下窗口间通信的二种方式:1.iframe 2 window.open
同域下的窗口通信
方式一:iframe
1. iframe.html
(1) 父级页面(1.iframe.html)通过点击按钮改变子级页面(2.iframe.html)的背景颜色
<script>
/*
我们可以通过js去访问被包含页面的DOM元素
*/
window.onload = function() {
varoBtn = document.getElementById('btn');
varoMyIframe = document.getElementById('myframe');
oBtn.οnclick= function() {
//如果我们要操作一个iframe里面的dom元素,首先要获取到iframe引入的页面的window
//oMyIframe.contentWindow -> 被iframe包含的页面的window对象
//alert(oMyIframe.contentWindow); [object window]
oMyIframe.contentWindow.document.body.style.background= 'red';
}
}
</script>
</head>
<body>
<inputtype="button" value="点击我,改变2.iframe.html的背景色" id="btn" />
<iframeid="myframe" src="2.iframe.html"></iframe>
</body>
</
这篇关于HTML5之窗口间通信的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!