首頁>網頁設計教程>Javascript教程

用javascript存取操作iframe裡的dom

作者：Eve Cole 更新時間：2009-06-11 16:22:06

很多人一直都有個想法，要是可以隨心所欲的操作iframe就好了。這樣靜態頁面也就有了相當於後台動態頁面php,jsp,asp中include，require實作統一多頁面佈局的能力。

透過Javascript的幫忙我們可以像後台一樣動態載入操作iframe物件屬性src指向的html頁面的內容。這樣的操作需要提供兩個頁面，一個頁面是iframe所在頁面(頁面名稱：iPage.html )，另一個頁面是iframe屬性src指向頁面（頁面名稱：srcPage.html ）。

iPage.html，<body>裡dom：

  1. < iframe id = “ iId “ name = “ iName “ src = “ srcPage.html “ scrolling = “不“ frameborder = “ 0 “ ></ iframe >

srcPage.html，<body>裡dom：

  1. < h1 >妹妹的一天</ h1 >  
  2. < p >早上吃早點，中午約會吃飯，下午K歌，晚上和哥哥瞎折騰</ p >

下面討論ie下JS是怎麼操作以上兩個頁面，再討論firefox的做法，最後給出兼容ie,firefox瀏覽器操作iframe物件的方法。

一、ie下訪問操作iframe裡內容

 

大家都知道iframe是非標準html標籤，它是由ie瀏覽器推出的多佈局標籤, 隨後Mozilla也支援了這個標籤。 (閒話，嘿嘿)

1. ie透過document.frames

  1. [ " IframeName " ]取得它，範例：我們在iPage.html裡輸出srcPage.html裡h1的內容，JS如下： alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' )[ 0 ] . firstChild . data ) ;

你會發現這樣在頁面裡加入程式碼，好像並沒有輸出想要的東東，為什麼呢？這個我也沒有搞清楚，只是習慣性的加入了window.onload就有輸出了（註：JS程式碼都寫到這個事件裡去），知道的人士可否告訴我下。 why?更改之後程式碼ie下有了輸出，firefox下document.frames沒有定義錯誤提示

  1. ： window .onload = ( function () {  
  2.   alert ( document . frames [ " iName " ] . document . getElementsByTagName ( ' h1 ' )[ 0 ] . firstChild . data ) ;
  3. }) ;

2. ie另一種方法contentWindow取得它，程式碼：

  1. window . onload = ( function () {  
  2.   var iObj = document . getElementById ( ' iId ' ) . contentWindow ;
  3.   alert ( iObj . document . getElementsByTagName ( ' h1 ' )[ 0 ] . firstChild . data ) ;
  4. }) ;

此方法經過ie6,ie7,firefox2.0,firefox3.0測試都通過，好事啊！嘿嘿。 （網路上一查，發現Mozilla Firefox iframe.contentWindow.focus緩衝區溢位漏洞，有腳本注入攻擊的危險。

後來聽說可以在後台防止這樣的事情發生，算是鬆了口氣。不過還是希望firefox新版本可以解決這樣

的

  1. 危險。​​​​​​​​​​​​​​​​​

​

的節點就跟以前一樣了。

二、firefox下存取操作iframe裡內容

Mozilla支援透過IFrameElmRef.contentDocument存取iframe的document物件的W3C標準，透過標準可以少寫一個document,程式碼：

  1. var iObj = document . getElementById ( ' iId ' ) . contentDocument ;
  2. alert ( iObj . getElementsByTagName ( ' h1 ' )[ 0 ] . innerHTML = '我想變成她一天的一部分
  3. ' ) ; alert ( iObTag . ElementElementsB ' )[ 0 ] . firstChild . data ) ;

相容這兩個瀏覽器的方法，現在也出來了，就是使用contentWindow這個方法。

嘿嘿！操作iframe是不是可以隨心所欲了呢？如果還覺得不爽，甚至可以重寫iframe裡的內容。

三、重寫iframe裡的內容

透過designMode（設定文件為可編輯設計模式）和contentEditable（設定內容為可編輯），你可以重寫iframe裡的內容。代碼：

  1. var iObj = document . getElementById ( ' iId ' ) . contentWindow ;
  2. iObj . document . designMode = ' On ' ;
  3. iObj . document . contentEditable = true
  4. ; iObj . document 。​​​
  5. ​​​​​​​​ head> ' ) ;
  6. iObj . document . writeln ( ' <style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style> ' ) ;
  7. iObj . document . writeln ( ' </head><body></body></html> ' ) ;
  8. iObj . document . close () ;

這兩個物件的資料可參考：http: //msdn.microsoft.com/en-us/ library/ms533720(VS.85).aspx

firebug測試以上程式碼效能,如圖

註解掉iObj.document.designMode = 'On';

iObj.document.contentEditable = true;

如圖：

效果沒有變，時間效率是註解前的將近三倍。嘿嘿。那兩個物件是參考網路一些人的寫法，重寫iframe裡內容，其實沒有必要用designMode和contentEditable，除非有其他的需求。

四、iframe自適應高度

有了上面的原理要實現這個相當簡單，就是把iframe的height值設定成它裡面文檔的height值就可以。程式碼：

  1. window . onload = ( function () {  
  2. var   iObj = document . getElementById ( ' iId ' ) ;
  3. iObj . height = iObj . contentWindow . document . documentElement . scrollHeight ;
  4. }) ;

現在對JS操作iframe你已經有了全新的認識，說什麼新不定那天有這個有這個操作的web技術名詞，嘿嘿，臭美下！

參考資料：

https://developer.mozilla.org/cn/Migrate_apps_from_Internet_Explorer_to_Mozilla

http://msdn.microsoft.com/en-us/library/ms533690(VS.85).aspx

http://www.kuqin.com/ webpagedesign/20080516/8536.html

http://www.nohack.cn/jsj/safe/2006-10-05/8156.html
相關文章