本文和大家重點(diǎn)討論一下JS跨域訪問(wèn)操作iframe里的dom，很多人一直都有個(gè)想法，要是可以隨心所欲的操作iframe就好了。這樣靜態(tài)頁(yè)面也就有了相當(dāng)于后臺(tái)動(dòng)態(tài)頁(yè)面php,jsp,asp中include，require實(shí)現(xiàn)統(tǒng)一多頁(yè)面布局的能力。

JS跨域訪問(wèn)操作iframe里的dom

通過(guò)Javascript的幫忙我們可以像后臺(tái)一樣動(dòng)態(tài)加載操作iframe對(duì)象屬性src指向的html頁(yè)面的內(nèi)容。這樣的操作需要提供兩個(gè)頁(yè)面，一個(gè)頁(yè)面是iframe所在頁(yè)面(頁(yè)面名稱：iPage.html)，另一個(gè)頁(yè)面是iframe屬性src指向頁(yè)面（頁(yè)面名稱：srcPage.html）。

◆iPage.html，里dom：

 
 
 
 

  
  
  
  

  
  
  
  
src=“srcPage.html“scrolling=“no“frameborder=“0“> 
  
  
  
  
 
  
  
  
  
 
 
 
 
 

◆srcPage.html，里dom：

 
 
 
 

  
  
  
  
妹妹的一天
 
  
  
  
  
早上吃早點(diǎn)，中午約會(huì)吃飯，下午K歌
 
 
 
 
 

下面討論IE下JS是怎么操作以上兩個(gè)頁(yè)面，再討論firefox的做法，最后給出兼容IE,firefox瀏覽器操作iframe對(duì)象的方法。

一、IE下訪問(wèn)操作iframe里內(nèi)容

大家都知道iframe是非標(biāo)準(zhǔn)html標(biāo)簽，它是由IE瀏覽器推出的多布局標(biāo)簽,隨后Mozilla也支持了這個(gè)標(biāo)簽。(閑話，嘿嘿)

1.IE通過(guò)document.frames["IframeName"]獲取它，例子：我們?cè)趇Page.html里輸出srcPage.html里h1的內(nèi)容，JS如下：

 
 
 
 

  
  
  
  
alert(document.frames["iName"].document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data); 
 
 
 
 

你會(huì)發(fā)現(xiàn)這樣在頁(yè)面里加入代碼，好像并沒(méi)有輸出想要的東東，為什么呢？這個(gè)我也沒(méi)有搞清楚，只是習(xí)慣性的加入了window.onload就有輸出了（注：JS代碼都寫(xiě)到這個(gè)事件里去），知道的人士可否告訴我下。why?更改之后代碼IE下有了輸出，firefox下document.frames沒(méi)有定義錯(cuò)誤提示：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
alert(document.frames["iName"].document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data);  
  
  
  
  
}); 
 
 
 
 

2.IE另一種方法contentWindow獲取它，代碼：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
variObj=document.getElementById(‘iId‘).contentWindow;  
  
  
  
  
alert(iObj.document.  
  
  
  
  
getElementsByTagName(‘h1‘)[0].firstChild.data);  
  
  
  
  
}); 
 
 
 
 

此方法經(jīng)過(guò)IE6,IE7,firefox2.0,firefox3.0測(cè)試都通過(guò)，好事啊！嘿嘿。（網(wǎng)上一查，發(fā)現(xiàn)MozillaFirefoxiframe.contentWindow.focus緩沖區(qū)溢出漏洞，有腳本注入攻擊的危險(xiǎn)。

后來(lái)聽(tīng)說(shuō)可以在后臺(tái)防止這樣的事情發(fā)生，算是松了口氣。不過(guò)還是希望firefox新版本可以解決這樣的危險(xiǎn)。）

3.改變srcPage.html里h1標(biāo)題內(nèi)容，代碼：

 
 
 
 

  
  
  
  
iObj.document.getElementsByTagName(‘h1‘)[0].  
  
  
  
  
innerHTML=‘我想變成她一天的一部分‘; 
 
 
 
 

通過(guò)contentWindow后訪問(wèn)里面的節(jié)點(diǎn)就和以前一樣了。

二、firefox下訪問(wèn)操作iframe里內(nèi)容

Mozilla支持通過(guò)IFrameElmRef.contentDocument訪問(wèn)iframe的document對(duì)象的W3C標(biāo)準(zhǔn)，通過(guò)標(biāo)準(zhǔn)可以少寫(xiě)一個(gè)document,代碼：

 
 
 
 

  
  
  
  
variObj=document.getElementById(‘iId‘).contentDocument;  
  
  
  
  
alert(iObj.getElementsByTagName(‘h1‘)[0].  
  
  
  
  
innerHTML=‘我想變成她一天的一部分‘);  
  
  
  
  
alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data); 
 
 
 
 

兼容這兩種瀏覽器的方法，現(xiàn)在也出來(lái)了，就是使用contentWindow這個(gè)方法。

操作iframe是不是可以隨心所欲了呢？如果還覺(jué)得不爽，你甚至可以重寫(xiě)iframe里的內(nèi)容。#p#

三、重寫(xiě)iframe里的內(nèi)容

通過(guò)designMode（設(shè)置文檔為可編輯設(shè)計(jì)模式）和contentEditable（設(shè)置內(nèi)容為可編輯），你可以重寫(xiě)iframe里的內(nèi)容。代碼：

 
 
 
 

  
  
  
  
variObj=document.getElementById(‘iId‘).contentWindow;  
  
  
  
  
iObj.document.designMode=‘On‘;  
  
  
  
  
iObj.document.contentEditable=true;  
  
  
  
  
iObj.document.open();  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.writeln(‘‘);  
  
  
  
  
iObj.document.close(); 
 
 
 
 

firebug測(cè)試以上代碼性能,如圖

注釋掉

 
 
 
 

  
  
  
  
iObj.document.designMode=‘On’;  
  
  
  
  
 
  
  
  
  
iObj.document.contentEditable=true;  
  
  
  
  
 
 
 
 
 

 結(jié)果如圖：

效果沒(méi)有變，時(shí)間效率是注釋前的將近三倍。嘿嘿。那兩個(gè)對(duì)象是參考網(wǎng)絡(luò)一些人的寫(xiě)法，重寫(xiě)iframe里內(nèi)容，其實(shí)沒(méi)有必要用designMode和contentEditable，除非有其他的需求。

四、iframe自適應(yīng)高度

有了上面的原理要實(shí)現(xiàn)這個(gè)相當(dāng)簡(jiǎn)單，就是把iframe的height值設(shè)置成它里面文檔的height值就可以。代碼：

 
 
 
 

  
  
  
  
window.onload=(function(){  
  
  
  
  
variObj=document.getElementById(‘iId‘);  
  
  
  
  
iObjiObj.height=iObj.  
  
  
  
  
contentWindow.document.documentElement.scrollHeight;  
  
  
  
  
}); 
 
 
 
 

【編輯推薦】

1. JS控件在IFrame中的應(yīng)用
2. JS方法在iframe父子窗口間的調(diào)用
3. C#代碼與JavaScript函數(shù)的相互調(diào)用
4. JavaScript函數(shù)中arguments對(duì)象
5. Javascript中CSS屬性float特殊寫(xiě)法

網(wǎng)站標(biāo)題：JS實(shí)現(xiàn)跨域訪問(wèn)iframe里的dom
標(biāo)題來(lái)源：http://www.dlmjj.cn/article/dhpssic.html