JS實現跨域訪問iframe里的dom
本文和大家重點討論一下JS跨域訪問操作iframe里的dom，很多人一直都有個想法，要是可以隨心所欲的操作iframe就好了。這樣靜態頁面也就有了相當于后臺動態頁面php,jsp,asp中include，require實現統一多頁面布局的能力。
JS跨域訪問操作iframe里的dom
通過Javascript的幫忙我們可以像后臺一樣動態加載操作iframe對象屬性src指向的html頁面的內容。這樣的操作需要提供兩個頁面，一個頁面是iframe所在頁面(頁面名稱：iPage.html)，另一個頁面是iframe屬性src指向頁面（頁面名稱：srcPage.html）。
◆iPage.html，<body>里dom：
- <iframeidiframeid=“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(){
- variObj=document.getElementById(‘iId‘).contentWindow;
- alert(iObj.document.
- getElementsByTagName(‘h1‘)[0].firstChild.data);
- });
此方法經過IE6,IE7,firefox2.0,firefox3.0測試都通過，好事?。『俸?。（網上一查，發現MozillaFirefoxiframe.contentWindow.focus緩沖區溢出漏洞，有腳本注入攻擊的危險。
后來聽說可以在后臺防止這樣的事情發生，算是松了口氣。不過還是希望firefox新版本可以解決這樣的危險。）
3.改變srcPage.html里h1標題內容，代碼：
- iObj.document.getElementsByTagName(‘h1‘)[0].
- innerHTML=‘我想變成她一天的一部分‘;
通過contentWindow后訪問里面的節點就和以前一樣了。
二、firefox下訪問操作iframe里內容
Mozilla支持通過IFrameElmRef.contentDocument訪問iframe的document對象的W3C標準，通過標準可以少寫一個document,代碼：
- variObj=document.getElementById(‘iId‘).contentDocument;
- alert(iObj.getElementsByTagName(‘h1‘)[0].
- innerHTML=‘我想變成她一天的一部分‘);
- alert(iObj.getElementsByTagName(‘p‘)[0].firstChild.data);
兼容這兩種瀏覽器的方法，現在也出來了，就是使用contentWindow這個方法。
操作iframe是不是可以隨心所欲了呢？如果還覺得不爽，你甚至可以重寫iframe里的內容。#p#
三、重寫iframe里的內容
通過designMode（設置文檔為可編輯設計模式）和contentEditable（設置內容為可編輯），你可以重寫iframe里的內容。代碼：
- variObj=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(){
- variObj=document.getElementById(‘iId‘);
- iObjiObj.height=iObj.
- contentWindow.document.documentElement.scrollHeight;
- });
【編輯推薦】
- JS控件在IFrame中的應用
- JS方法在iframe父子窗口間的調用
- C#代碼與JavaScript函數的相互調用
- JavaScript函數中arguments對象
- Javascript中CSS屬性float特殊寫法
