用JS訪問操作iframe裡的dom @ Felix's Second Life 電腦數碼世界

轉自http://ued.alipay.com/?p=420

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

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

iPage.html，<body>裡dom：

<iframe id=「iId「 name=「iName「 src=「srcPage.html「 scrolling=「no「 frameborder=「0「></iframe>

srcPage.html，<body>裡dom：

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

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

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

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

1. ie通過document.frames["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沒有定義錯誤提示：

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

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

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

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

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

3.改變srcPage.html裡h1標題內容，代碼：

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

通過contentWindow後訪問裡面的節點就和以前一樣了。

二、firefox下訪問操作iframe裡內容

Mozilla支持通過IFrameElmRef.contentDocument訪問iframe的document對象的W3C標準，通過標準可以少寫一個document,代碼：

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

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

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

三、重寫iframe裡的內容

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

var iObj = document.getElementById(『iId『).contentWindow;
iObj.document.designMode = 『On『;
iObj.document.contentEditable = true;
iObj.document.open();
iObj.document.writeln(『<html><head>『);
iObj.document.writeln(『<style>body {background:#000;font-size:9pt;margin: 2px; padding: 0px;}</style>『);
iObj.document.writeln(『</head><body></body></html>『);
iObj.document.close();