最近在專案中用到了iframe，寫出來做個記錄，能幫到大家最好。
一.首先簡單介紹一下iframe
iframe 元素會建立包含另外乙個文件的內聯框架（即行內框架）。
所有瀏覽器都支援 標籤。
二.頁面引用
三.設定iframe的高度自適應
iframe的使用是為了引入乙個子頁面，如果說子頁面是自適應的，那麼寬度自適應自然很容易解決。
但是如果子頁面是通過內容編輯器生成並且沒有做自適應處理，那麼問題就沒那麼簡單了。
或許你會用viewport進行解決，這個也是乙個思路，但是子頁面與主頁面的viewport之間的關聯需要處理。
我說的這種情況自然不是用viewport。而是使用-webkit-transform:scale();對iframe進行縮放。實現裝置是iphone8與華為p8高配版。
首先說明，iframe的寬度如果不能自適應那麼在兩個裝置的展現情況不一樣。iphone上邊可以左右滾動以檢視所有的內容，但是在安卓上邊會自動擷取手機螢幕寬度的iframe，也就是不會左右滾動。參考資料：
其次介紹一下有關-webkit-transform:scale();的用法，參考資料：
整體的思想就是計算出手機寬度與iframe內容寬度的比例，然後按照這個比例進行縮放，即-webkit-transform:scale();的作用。
所以就要獲得兩個寬度的值。
獲取iframe的不同型別的寬度：android iphone 手機瀏覽器獲取子頁面寬度。
// var phonewidth = document.body.clientwidth;//手機寬度
// var iframewidth = document.getelementbyid("myiframe").contentwindow.document.body.offsetheight;//iframe寬度
// 360 2602 -> 375 2628
// var phonewidth = document.body.clientwidth;//手機寬度
// var iframewidth = document.getelementbyid("myiframe").contentdocument.body.clientwidth;//iframe寬度
// 360 310 -> 375 876
// var phonewidth = document.body.clientwidth;//手機寬度
// var iframewidth = document.body.scrollwidth;//iframe寬度
// 360 360 -> 375 910
// var phonewidth = document.body.clientwidth;//手機寬度
// var iframewidth = document.getelementbyid("myiframe").contentwindow.document.body.scrollwidth;//iframe寬度
// 360 884 -> 375 892 採用的這一種。
核心**：
var obj = document.getelementbyid("myiframe");
var phonewidth = document.body.clientwidth;//手機寬度
var iframewidth = document.getelementbyid("myiframe").contentwindow.document.body.scrollwidth;//iframe寬度
var n = phonewidth/iframewidth;//縮放比例
if (useragentinfo.indexof('android') > -1 || useragentinfo.indexof('linux') > -1)
obj.style.webkittransform="scale("+ n +")";
經過縮放之後會出現左右滑動，但是內容區域已經適應了手機寬度，這時再用document.body.style.overflowx="hidden";禁止左右滾動即可。以上均是自己的見解，如有不足之處還望多多見諒。
五.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 自適應高度
由於html沒有include或require，做網頁時我們會用iframe來達到包含頁面的目的。如果呼叫的iframe頁面高度會根據內容多少而發生變化，這時通常要保持iframe與內容頁面的高度，以避免出現iframe的滾動條。先搜尋了一下，有不少好的例子，但總覺得說的還不夠明了。下面給出詳細例子...
iframe自適應高度
來自 http ued.koubei.com 2008 05 07 iframe auto fit height 這貼比較長，沒有耐性的朋友請直接拖到帖子末尾的 示例，或者直接去玩我提供的demo。demo頁面 主頁面 iframe a.html 被包含頁面 iframe b.htm 和 ifram...
iframe高度自適應
nl ad this.height document.frames src document.body.scrollheight 例子 1，建立頁面 test.html 頁面中含有乙個 iframe，name為 ifrname id為 ifrid，src 為 iframe.html頁面。2，建立 i...