<iframe>標簽規定一個內聯框架（即行內框架)。被用來在當前 HTML 文檔中嵌入另一個文檔。所有的主流瀏覽器都支持<iframe>標簽。
1、常用屬性：
| 屬性 | 值 | 描述 |
|---|---|---|
| name | frame_name | 規定 iframe 的名稱 |
| src | URL | 規定在 iframe 中顯示的文檔的 URL。 |
| width | pixels% | 規定 iframe 的寬度。 |
| height | pixels% | 規定 iframe 的高度。 |
| marginwidth | pixels | 規定 iframe 的左側和右側的邊距。 |
| marginheight | pixels | 規定 iframe 的頂部和底部的邊距。 |
| frameborder | 0/1 | 規定是否顯示框架周圍的邊框。 |
| scrolling | yes/no/auto | 規定是否在 iframe 中顯示滾動條。 |
2、iframe的使用
通常使用iframe直接在頁面嵌套iframe標簽指定的src就可以了。
示例如下：
<iframe id="myFrame" scrolling="no" frameborder="0" src=" " style="width:100%;height:100%"></iframe>
iframe的
src屬性指定本地的一個頁面,交互部分寫到這個頁面中，iframe會自動傳到引入的頁面。
3、獲取iframe中的內容
var iframe = document.getElementById("myFrame"); //獲取iframe標簽
var iwindow = iframe.contentWindow; //獲取iframe的window對象
var idoc = iwindow.document; //獲取iframe的document對象
console.log(idoc.documentElement); //獲取iframe的html
console.log("body",idoc.body);
4、iframe 子頁面調用父頁面的方法
子頁面使用
parent.method()調用父頁面方法，示例如下：
父頁面代碼：
<body>
<div id="default">div內容</div>
<iframe src="child.html"></iframe>
</body>
<script>
function test() {
alert('Hello World!');
}
</script>
子頁面代碼：
<body>
<div>iframe子頁面內容</div>
</body>
<script>
$(function() {
//在iframe子頁面中查找父頁面元素
alert($('#default', window.parent.document).html());
//在iframe中調用父頁面中定義的變量
alert(parent.value);
//在iframe中調用父頁面中定義的方法
parent.test();
});
</script>
5、iframe嵌套音樂播放器
使用<iframe> 標簽可以在網頁中嵌入網易雲音樂播放器。 代碼如下：
<iframe frameborder="no" border="0"
marginwidth="0" marginheight="0"
width=350 height=90
src="https://music.163.com/outchain/player?type=2&id=2081092&auto=0&height=66">
</iframe>
參數解釋：
id：歌曲id
auto：0/1
0表示打開網頁的時候不自動播放；
1表示打開網頁的時候自動播放。
效果如下：
6、iframe 的優缺點
-
優點：
- 重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁（減少數據的傳輸，減少網頁的加載時間）；
- 技術簡單，使用方便，主要應用於不需要搜索引擎來搜索的頁面；
- 方便開發，減少代碼的重復率（比如頁面的header，footer）；
-
缺點：
- 會產生很多的頁面，不易於管理；
- 不易打印；
- 多框架的頁面會增加服務氣得http請求；
- 瀏覽器的后退按鈕無效等；