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