iframe跨域父子页面相互访问操作页面元素的方法
作者:admin 时间:2020-2-29 3:39:36 浏览:本文介绍iframe跨域父子页面相互访问操作页面元素的方法，不过这个跨域有个前提，就是都是同一主域，如：aaa.webkaka.com和bbb.webkaka.com。如果你的跨域符合这个前提，那么本文介绍的方法就非常实用，本人亲测有效。
iframe跨域父子页面相互访问操作页面元素
实现的关键点，是在父、子页面都加入一条js语句：
<script language="javascript">
document.domain = "webkaka.com";
</script>
注意，这条JS代码要放在iframe元素的前面。
父页面代码如这样（父页面所在域是aaa.webkaka.com）：
<body>
<div id="parentPage">aaa</div>
</body>
<script type="text/javascript">
document.domain = "webkaka.com";
setTimeout(function(){
//父页面获得子页面某元素的html内容
console.log(document.getElementById("iframe1").contentWindow.document.getElementById("sonPage").innerHTML);
},3000);
</script>
<iframe id="iframe1" name="iframe1" style="width:0px;height:0px" src="http://bbb.webkaka.com/test.html">
子页面代码如这样（子页面所在域是bbb.webkaka.com）：
<body>
<div id="sonPage">bbb</div>
</body>
<script type="text/javascript" >
document.domain = "webkaka.com";
//子页面赋html内容给父页面某元素
window.parent.document.getElementById("parentPage").innerHTML = "123";
</script>
</html>
本文实例本人亲测有效，如果你的跨域访问在同一主域里，那么本文介绍的方法就非常实用。
相关文章推荐
- 站长推荐
