很多人一直都有個想法,要是可以隨心所欲的操作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();
這兩個對象的資料可參考:
firebug測試以上代碼性能,如圖
註釋掉 iObj.document.designMode = ‘On’;
iObj.document.contentEditable = true;
如圖:
效果沒有變,時間效率是註釋前的將近三倍。嘿嘿。那兩個對象是參考網絡一些人的寫法,重寫iframe裏內容,其實沒有必要用designMode和contentEditable,除非有其他的需求。
四、iframe自適應高度有了上面的原理要實現這個相當簡單,就是把iframe的height值設置成它裏面文檔的height值就可以。代碼:
- window.onload = (function () {
- var iObj = document.getElementById(‘iId‘);
- iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;
- });
現在對JS操作iframe你已經有了全新的認識,說不定那天會因爲這個有什麼新的web技術名詞,嘿嘿,臭美下!
很多人一直都有個想法,要是可以隨心所欲的操作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();
這兩個對象的資料可參考:
firebug測試以上代碼性能,如圖
註釋掉 iObj.document.designMode = ‘On’;
iObj.document.contentEditable = true;
如圖:
效果沒有變,時間效率是註釋前的將近三倍。嘿嘿。那兩個對象是參考網絡一些人的寫法,重寫iframe裏內容,其實沒有必要用designMode和contentEditable,除非有其他的需求。
四、iframe自適應高度有了上面的原理要實現這個相當簡單,就是把iframe的height值設置成它裏面文檔的height值就可以。代碼:
- window.onload = (function () {
- var iObj = document.getElementById(‘iId‘);
- iObj.height = iObj.contentWindow.document.documentElement.scrollHeight;
- });
現在對JS操作iframe你已經有了全新的認識,說不定那天會因爲這個有什麼新的web技術名詞,嘿嘿,臭美下!
原文:http://hi.baidu.com/longqiqi521/item/4ef376d78c36541a20e2506c