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)知識，希望對大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

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