天天看點

HTML的iframe使用

IFRAME是HTML标簽,作用是文檔中的文檔,或者浮動的架構(FRAME)。iframe元素會建立包含另外一個文檔的内聯架構(即行内架構)。

定義和用法

iframe 元素會建立包含另外一個文檔的内聯架構(即行内架構)。

HTML 與 XHTML 之間的差異

在 HTML 4.1 Strict DTD 和 XHTML 1.0 Strict DTD 中,不支援 iframe 元素。

TIY 執行個體

<html>

<body>

<iframe src="/i/eg_landscape.jpg"></iframe>

<p>一些老的浏覽器不支援 iframe。</p>
<p>如果得不到支援,iframe 是不可見的。</p>


</body>
</html>      

提示和注釋

提示:HTML 與 XHTML 之間的差異:在HTML4.1 Strict DTD和XHTML1.0 Strict DTD中,不支援iframe元素。

可以把需要的文本放置在和之間,這樣就可以應對無法了解iframe的浏覽器。

iframe常用屬性:

1.frameborder:是否顯示邊框,1(yes),0(no)

2.height:架構作為一個普通元素的高度,建議在使用css設定。

3.width:架構作為一個普通元素的寬度,建議使用css設定。

4.name:架構的名稱,window.frames[name]時專用的屬性。

5.scrolling:架構的是否滾動。yes,no,auto。

6.src:内架構的位址,可以使頁面位址,也可以是圖檔的位址。

7.srcdoc , 用來替代原來HTML body裡面的内容。但是IE不支援, 不過也沒什麼卵用

8.sandbox: 對iframe進行一些列限制,IE10+支援

我們通常使用iframe最基本的特性,就是能自由操作iframe和父架構的内容(DOM). 但前提條件是同域. 如果跨域頂多隻能實作頁面跳轉

擷取iframe裡的内容

主要的兩個API就是contentWindow,和contentDocument

iframe.contentWindow, 擷取iframe的window對象

iframe.contentDocument, 擷取iframe的document對象

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
       console.log("window",iwindow);//擷取iframe的window對象
       console.log("document",idoc);  //擷取iframe的document
       console.log("html",idoc.documentElement);//擷取iframe的html
       console.log("head",idoc.head);  //擷取head
       console.log("body",idoc.body);  //擷取body      

繼續閱讀