JS操作未跨域iframe裡的DOM

2021-09-23 01:11:52 字數 779 閱讀 1266

這裡簡單說明兩個方法，都是未跨域情況下在index.html內操作b.html內的 dom。

如：index.html內引入iframe，在index內如何用js操作iframe內的dom元素？

先貼下index.html和iframe引入的a.html內容。

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


();
法二：js動態建立iframe並插入

var ifr = document.createelement('iframe');


ifr.src = 'a.html';


ifr.onload = function


();
兩種的輸出結果都是

操作跨域iframe 裡div

iframe裡的元素無法用css來直接控制，不管是同域還是跨域。可選方法 父window接收資料 window.addeventlistener message function event 父元素向子元素傳送資料 iframe.contentwindow.postmessage data,第二個引...

JS獲取iframe元素及跨域訪問操作

ipage.html，裡dom srcpage.html，裡dom 早上吃早點，中午約會吃飯，下午k歌，晚上和哥哥瞎折騰 下面討論ie下js是怎麼操作以上兩個頁面，再討論firefox的做法，最後給出相容ie,firefox瀏覽器操作iframe物件的方法。一 ie下訪問操作iframe裡內容 大家...

iframe跨域訪問父框架js方法

iframe跨域訪問父框架js方法 條件1.不在同乙個主域下 2.iframe呼叫父框架方法 環境說明 父框架有開啟tab頁方法，但是子頁面嵌入的是其他系統頁面，同樣需要開啟tab頁。方法描述 原理上就是通過子頁面嵌入父框架頁面來使用呼叫方法 父框架橋連頁面 1 5 6 section script...