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