JS未跨域操作iframe里的DOM
更新時間：2016年06月01日 14:17:05 作者：九成
這篇文章主要介紹了JS未跨域操作iframe里的DOM 的相關資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
這里簡單說明兩個方法，都是未跨域情況下在index.html內(nèi)操作b.html內(nèi)的 DOM。
如：index.html內(nèi)引入iframe，在index內(nèi)如何用JS操作iframe內(nèi)的DOM元素？
先貼下index.html和iframe引入的a.html內(nèi)容。
index-> <div class="d1"> <iframe src="a.html" frameborder="0" name="one" id="iframeId"></iframe> </div>
a.html
<div id="dd"> <h1>iframe里的元素！</h1> </div>
法一：
var d=window.frames["one"].window;
d.onload=function(){
console.log(d.document.getElementById("dd"));
};
法二：
JS動態(tài)創(chuàng)建iframe并插入
var ifr = document.createElement('iframe');
ifr.src = 'a.html';
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
// 在這里操縱b.html
console.log(doc.getElementById("dd"));
};
兩種的輸出結果都是
以上所述是小編給大家介紹的JS未跨域操作iframe里的DOM 的相關知識，希望對大家有所幫助！
您可能感興趣的文章:
相關文章
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)點擊圖片放大預覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
下面小編就為大家?guī)硪黄獪\談js的解析順序 作用域 嚴格模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
javascript解析ajax返回的xml和json格式數(shù)據(jù)實例詳解
這篇文章主要介紹了javascript解析ajax返回的xml和json格式數(shù)據(jù),結合實例形式詳細分析了JS ajax調(diào)用及返回值中xml與json格式數(shù)據(jù)的處理技巧,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了JS基于Mootools實現(xiàn)的個性菜單效果代碼,涉及JavaScript頁面元素的遍歷及樣式的動態(tài)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
axios如何利用promise無痛刷新token的實現(xiàn)方法
這篇文章主要介紹了axios如何利用promise無痛刷新token的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
通過實例理解javascript中沒有函數(shù)重載的概念
這篇文章主要介紹了通過實例理解javascript中沒有函數(shù)重載的概念,十分的簡單易懂，需要的朋友可以參考下2015-06-06
ES6：全稱ECMAScript 6.0，是JavaScript語言的國際標準，JavaScript是ECMAScript的實現(xiàn)。今天我們就來學習一下ES6的Set集合的使用2023-02-02
HTML+JavaScript實現(xiàn)筋斗云導航欄效果
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實現(xiàn)筋斗云導航欄效果，當鼠標經(jīng)過某個li，筋斗云跟著到當前的位置，感興趣的小伙伴可以試一試2022-03-03
JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解
這篇文章的內(nèi)容是說說最近在工作中遇到過的常見的問題。主要是關于JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流，文中由一個常見的問題開始展開，一步步的介紹解決的方法，有需要的朋友們下面來跟著小編一起看看吧。2016-12-12
這篇文章主要介紹了BootStrap入門教程(二)之固定的內(nèi)置樣式的相關資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09