## 前言 如果你的頁面是一個后臺管理頁面，那么你一定對iframe不陌生。從h5定稿開始，在涉及框架引入頁面時，統一建議使用iframe來進行相關的資源嵌入。 ## 使用場景 1. 通常在不希望整體頁面跳轉，只需要主體頁面跳轉，則需要加入iframe標簽來作為展示頁面的窗口，通常在管理后臺 、qq郵箱等管理界面應用比較多。 2. iframe 的屬性中有src以及name屬性 ，通過這兩個屬性可以搭配a標簽實現第一條的需求，name是a連接target屬性的指向地址，而src的地址可以通過a的href來改變 ## 基本屬性 * src 屬性 指向該框架鏈接的頁面地址，可以為相對請求地址，也可以為絕對地址，也可以為外網地址，當為不同服務器項目涉及跨域時，控制臺會報錯，但不會影響正常的顯示 * name 大多數標簽都有的自帶屬性，在input中為特殊含義 指代數據項的類型，而在iframe中可以用來當做目標 * frameborder 框架的邊框可以用cssborder 代替 * width 一般由展示的空間決定寬度 ，height一般由載入頁面的高度確定 * scrolling :auto yes no ,也可以用css 的overflow 的相關屬性來控制 ## iframe獲取子頁面的高度 * 通常用于正確設置嵌入頁的高度，一般情況下要設置展示嵌入頁為固定大小的。 ``` javascript //父頁面載入獲取高度　 標簽內事件 ： onload="this.height=this.contentWindow.document.documentElement.scrollHeight" js腳本通用事件 $( "iframe").load( function () { $(this).height($(this).contents().find( "body" ).height() + 30 ); }) //子頁面載入之后　改變高度　 var htmlHeight=$("body").height()+30; $("#iframe", window.parent.document).height(htmlHeight); ``` ## 父子頁面元素的獲取 * 父頁面以及子頁面位置的元素獲取 ``` javascript // 父頁面獲取子頁面的元素 $("#iframe").contents().find("#body") //子頁面獲取父頁面的元素 $(window.parent.document).find("#iframe") ```