javascript 獲取iframe中內容

antzone發表於2017-03-14
JavaScript

iframe當下有著廣發的應用，當然也是非常的遍歷，有時候我們需要操作iframe中的內容，那麼事先獲取iframe文件物件，下面就簡單對此做一下介紹。

這是main.html中的程式碼片段:

[HTML] 純文字檢視 複製程式碼
<body>
<iframe src="frame.html" id="theframe"></iframe>
</body>

這是frame.html中的程式碼片段:

[HTML] 純文字檢視 複製程式碼
<body>  
<div id="thediv">螞蟻部落</div> 
</body>

下面在main.html使用程式碼將frame.html中的div中的文字設定為紅色。

程式碼如下:

[JavaScript] 純文字檢視 複製程式碼
window.onload=function(){ 
  function getIframeContent(){ 
    var doc; 
    if (document.all){
      doc = document.frames["theframe"].document; 
    }
    else{
      doc=document.getElementById("theframe").contentDocument; 
    } 
    doc.getElementById("thediv").style.color="red";
  } 
  getIframeContent()
}

以上程式碼實現可以將frame.html中的文字顏色設定為紅色。

特別說明:谷歌瀏覽器必須在伺服器環境下測試才會生效。

下面對上面的程式碼進行簡單的說明:

1.window.onload=function(){},當文件內容完全載入完畢再去執行函式中的程式碼。

2.function getIframeContent(){}，此函式可以設定frame中div裡面文字的顏色。

3. var doc，宣告一個變數用語儲存獲得document物件。

4.if(document.all){doc = document.frames["theframe"].document; }，用來判斷是否是IE瀏覽器，因為IE8以下瀏覽器不支援contentDocument，但是所有的IE瀏覽器都支援document.frames["theframe"].document此中形式。

5.else{doc=document.getElementById("theframe").contentDocument; } ，IE8和IE8以上瀏覽器和谷歌或者火狐都支援此形式。

6.doc.getElementById("thediv").style.color="red"，獲取frame中的div物件並將其字型顏色設定為紅色。

相關文章