快捷導(dǎo)航

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ì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單拖拽效果,涉及javascript針對(duì)鼠標(biāo)事件與頁(yè)面樣式的操作技巧,需要的朋友可以參考下
2015-06-06
Javascript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輸入關(guān)鍵字添加標(biāo)簽效果實(shí)例
這篇文章主要給大家介紹了利用Javascript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的輸入關(guān)鍵字添加標(biāo)簽效果的相關(guān)資料，類似動(dòng)態(tài)添加標(biāo)簽的效果，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。
2017-06-06
GRID拖拽行的實(shí)例代碼
這篇文章介紹了GRID拖拽行的實(shí)例代碼，有需要的朋友可以參考一下
2013-07-07
Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動(dòng)態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下
2015-05-05
基于JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)版羊了個(gè)羊游戲
最近羊了個(gè)羊火的不得了，這篇文章主要為大家介紹了如何利用JS實(shí)現(xiàn)個(gè)網(wǎng)頁(yè)版羊了個(gè)羊游戲，有需要的朋友可以借鑒參考下，希望能夠有所幫助
2022-09-09
js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
這篇文章主要介紹了js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法,實(shí)例分析了javascript處理鼠標(biāo)事件及文字特效的技巧,需要的朋友可以參考下
2015-02-02
JavaScript設(shè)計(jì)模式之調(diào)停者模式實(shí)例詳解
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之調(diào)停者模式,詳細(xì)分析了調(diào)停者模式的概念、原理、優(yōu)缺點(diǎn)并結(jié)合javascript實(shí)例形式給出了相關(guān)使用技巧,需要的朋友可以參考下
2018-02-02
JS實(shí)現(xiàn)Enter鍵跳轉(zhuǎn)及控件獲得焦點(diǎn)
想讓Enter鍵跳轉(zhuǎn)的同時(shí)讓控件獲得焦點(diǎn)，具體實(shí)現(xiàn)js代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
淺談layui 表單元素的選中問(wèn)題
今天小編就為大家分享一篇淺談layui 表單元素的選中問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-10-10
微信小程序保存多張圖片的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序保存多張圖片的實(shí)現(xiàn)方法，使用promise 隊(duì)列，保存多張圖片到手機(jī)相冊(cè)，小編覺(jué)得具有一定的參考價(jià)值，有興趣的可以了解一下
2019-03-03