最近在專案中用到了iframe，寫出來做個記錄，能幫到大家最好。

一.首先簡單介紹一下iframe

     iframe 元素會建立包含另外一個文件的內聯框架（即行內框架）。

    所有瀏覽器都支援 <iframe> 標籤。

二.頁面引用

<iframe src="index.html" id="myiframe" scrolling="no" frameborder="0" width="100%" onload="changeFrameHeight()" frameborder="0"></iframe>

三.設定iframe的高度自適應     

<!--set iframe height  -->
    <script type="text/javascript">
        function changeFrameHeight(){
            var iframe= document.getElementById("myiframe");
            iframe.height = iframe.contentDocument.body.clientHeight;
        }
        window.onresize=function(){
            changeFrameHeight();
        }
    </script>
 

四.設定iframe的寬度自適應

iframe的使用是為了引入一個子頁面，如果說子頁面是自適應的，那麼寬度自適應自然很容易解決。
但是如果子頁面是通過內容編輯器生成並且沒有做自適應處理，那麼問題就沒那麼簡單了。
或許你會用viewport進行解決，這個也是一個思路，但是子頁面與主頁面的viewport之間的關聯需要處理。

我說的這種情況自然不是用viewport。而是使用-webkit-transform:scale();對iframe進行縮放。實現裝置是iPhone8與華為P8高配版。

首先說明，iframe的寬度如果不能自適應那麼在兩個裝置的展現情況不一樣。iPhone上邊可以左右滾動以檢視所有的內容，但是在安卓上邊會自動擷取手機螢幕寬度的iframe，也就是不會左右滾動。參考資料：https://www.cnblogs.com/qiuer/p/6420130.html

http://blog.csdn.net/u011511086/article/details/78519681

其次介紹一下有關-webkit-transform:scale();的用法，參考資料：http://caibaojian.com/transform.html

http://www.w3school.com.cn/cssref/pr_transform.asp

整體的思想就是計算出手機寬度與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  採用的這一種。
 

註釋：箭頭前是安卓裝置，之後是蘋果裝置。第一個數是手機寬度，第二個數是iframe的寬度。

核心程式碼：

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.width = iframeWidth + "px";
        }
        obj.style.webkitTransform="scale("+ n +")";

以上測試均是真機測試，瀏覽器包括QQ瀏覽器安卓與蘋果版本，以及蘋果和安卓的自帶瀏覽器。

經過縮放之後會出現左右滑動，但是內容區域已經適應了手機寬度，這時再用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參考文件

https://segmentfault.com/a/1190000004502619#articleHeader6
https://www.cnblogs.com/inJS/p/6129945.html
http://www.cnblogs.com/tugenhua0707/p/3346522.html