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