技術(shù)頻道導航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

iframe跨域父子頁面相互訪問操作頁面元素的方法

作者:admin    時間:2020-2-29 3:39:36    瀏覽:

本文介紹iframe跨域父子頁面相互訪問操作頁面元素的方法,不過這個跨域有個前提,就是都是同一主域,如:aaa.webkaka.com和bbb.webkaka.com。如果你的跨域符合這個前提,那么本文介紹的方法就非常實用,本人親測有效。

 iframe跨域父子頁面相互訪問操作頁面元素

iframe跨域父子頁面相互訪問操作頁面元素

實現(xiàn)的關(guān)鍵點,是在父、子頁面都加入一條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內(nèi)容
    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內(nèi)容給父頁面某元素
    window.parent.document.getElementById("parentPage").innerHTML = "123";
</script>
</html>

本文實例本人親測有效,如果你的跨域訪問在同一主域里,那么本文介紹的方法就非常實用。

相關(guān)文章推薦

標簽: iframe  跨域  
相關(guān)文章
    x
    • 站長推薦
    /* 左側(cè)顯示文章內(nèi)容目錄 */