技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

iframe跨域父子页面相互访问操作页面元素的方法

作者:admin    时间:2020-2-29 3:39:36    浏览:

本文介绍iframe跨域父子页面相互访问操作页面元素的方法,不过这个跨域有个前提,就是都是同一主域,如:aaa.webkaka.com和bbb.webkaka.com。如果你的跨域符合这个前提,那么本文介绍的方法就非常实用,本人亲测有效。

 iframe跨域父子页面相互访问操作页面元素

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>

本文实例本人亲测有效,如果你的跨域访问在同一主域里,那么本文介绍的方法就非常实用。

相关文章推荐

标签: iframe  跨域  
相关文章
    • IT热文
    • 站长推荐