JS未跨域操作iframe里的DOM
更新時間：2016年06月01日 14:17:05 作者：九成
這篇文章主要介紹了JS未跨域操作iframe里的DOM 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下
這里簡單說明兩個方法，都是未跨域情況下在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"));
};
兩種的輸出結(jié)果都是
以上所述是小編給大家介紹的JS未跨域操作iframe里的DOM 的相關(guān)知識，希望對大家有所幫助！
您可能感興趣的文章:
- php main 與 iframe 相互通訊類(js+php同域/跨域)
- javascript iframe跨域詳解
- JavaScript實現(xiàn)iframe自動高度調(diào)整和不同主域名跨域
- AngularJS iframe跨域打開內(nèi)容時報錯誤的解決辦法
- js iframe跨域訪問(同主域/非同主域)分別深入介紹
- js跨域問題之跨域iframe自適應(yīng)大小實現(xiàn)代碼
- 跨域傳值即主頁面與iframe之間互相傳值
- IFrame跨域高度自適應(yīng)實現(xiàn)代碼
- 詳解iframe跨域的幾種常用方法(小結(jié))
- JS實現(xiàn)iframe中子父頁面跨域通訊的方法分析
相關(guān)文章
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)點擊圖片放大預(yù)覽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
下面小編就為大家?guī)硪黄獪\談js的解析順序 作用域 嚴格模式。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
javascript解析ajax返回的xml和json格式數(shù)據(jù)實例詳解
這篇文章主要介紹了javascript解析ajax返回的xml和json格式數(shù)據(jù),結(jié)合實例形式詳細分析了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)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
通過實例理解javascript中沒有函數(shù)重載的概念
這篇文章主要介紹了通過實例理解javascript中沒有函數(shù)重載的概念,十分的簡單易懂，需要的朋友可以參考下2015-06-06
JavaScript下一版本標(biāo)準ES6的Set集合使用詳解
ES6：全稱ECMAScript 6.0，是JavaScript語言的國際標(biāo)準，JavaScript是ECMAScript的實現(xiàn)。今天我們就來學(xué)習(xí)一下ES6的Set集合的使用2023-02-02
HTML+JavaScript實現(xiàn)筋斗云導(dǎo)航欄效果
這篇文章主要為大家介紹了如何利用HTML+JavaScript+CSS實現(xiàn)筋斗云導(dǎo)航欄效果，當(dāng)鼠標(biāo)經(jīng)過某個li，筋斗云跟著到當(dāng)前的位置，感興趣的小伙伴可以試一試2022-03-03
JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解
這篇文章的內(nèi)容是說說最近在工作中遇到過的常見的問題。主要是關(guān)于JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流，文中由一個常見的問題開始展開，一步步的介紹解決的方法，有需要的朋友們下面來跟著小編一起看看吧。2016-12-12
這篇文章主要介紹了BootStrap入門教程(二)之固定的內(nèi)置樣式的相關(guān)資料，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09