## 前言
如果你的頁面是一個后臺管理頁面,那么你一定對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")
```
- 前端入門
- 前端入職須知
- 前端自我定位
- pc與手機頁面差別
- 前端書單
- 前端種子計劃
- 前端技術棧
- ps
- ps入門階段
- html
- html入門
- html代碼規范
- meta
- table
- iframe
- a標簽詳解
- image
- html代碼審查工具
- h5專題
- h5入門
- h5新增屬性
- canvas畫布教程
- audio/video
- Geolocation
- Websockets
- Web storage
- Communication
- Web Workers
- requestAnimationFrame
- css
- css入門必學
- css代碼規范
- 項目字體規范
- css基本位置布局
- css常見樣式命名規則
- css代碼優化建議
- css常用樣式名
- css選擇器攻略
- css盒子模型的理解
- css屬性繼承與默認值
- css代碼審查工具
- css中常見的知識盲區
- css3新特性淺談
- css新特性了解
- border-radius
- background
- transform
- animation
- white-space
- css常用技術
- 文本兩端對齊
- css之浮動解決方案
- css優化建議
- 文本超出省略
- img-sprites
- rem布局教程
- 水平居中&垂直居中
- 固寬&變寬布局
- 寬高固定比例的盒模型
- 樣式預處理語言
- less教程
- sass教程
- postcss教程
- js
- javascript入門
- js代碼規范
- js基礎拓展
- js代碼審查工具
- js性能優化
- js基本語句
- 基本運算
- 基本語句語法
- js對象
- es6入門
- obj
- Array
- Date
- String
- Boolean
- Number
- Json
- RegExp
- Math
- function
- jquery入門
- jq核心思想
- jq基本語法
- jq插件庫匯總
- js常用技術
- break&continue區別
- js對日期轉換
- js控制運動-move.js
- 原生js-cookie語法
- ajax請求后回調
- 表單數據序列化
- zepto
- zepto入門
- 百度touchjs
- js編程
- 插件庫
- 功能性插件
- pdfjs
- wdatepicker
- qrcoder
- barcode插件
- photoviewer
- hammer.js
- echarts
- 交互組件
- layerjs
- java
- java入門
- java基本語句
- springMVC
- javaweb
- vm模板引擎
- freemarker
- maven教程
- mySql教程
- flex教程
- flex入門
- git教程
- git入門
- git分支
- git-tag管理
- git注意事項
- git-torise入門
- ide-git插件使用
- web
- web兼容
- web兼容思想
- pc端兼容適配文檔
- pc端兼容bug匯總
- ie兼容bug匯總
- 手機兼容bug匯總
- web安全
- jeecms
- web存儲
- app/h5組件
- 安卓教程
- ios教程
- 前端教程
- rubikx的教程
- 其他
- artTemplate
- tmod使用
- 跨域問題
- markdown教程
- 常用工具
- postman-api調試
- web常識
- 瀏覽器ua統計
- ui框架
- easyui
- bootstrap
- 入門推薦
- weui
- sui-pc
- sui-mobile
- layerUi