解決iframe在移動端(主要iPhone)上的問題

前言

　　才發現已經有一段時間沒有寫博客了，就簡單的說了最近干了啥吧。前段時間忙了雜七雜八的事情，首先弄了個個人的小程序，對的，老早就寫了篇從零入手微信小程序開發，然后到前段時間才弄了個簡單的個人小程序，主要是關於菜式方面制作的，原因么，就在我另外一件事情上有說到了，就是然后又弄了個個人的公眾號《前端美食匯》（附：個人介紹鏈接）。大概之前就干了這兩事。不過老實說也不用多少時間。搞得好像用了我很多時間似的，哈哈，還是懶~~~

 

　　重點補充下，以為博客的文章的側重點會在解決項目上遇到的實際問題，而在公眾號上會側重於技術提升方面的分享，喜歡的可以關注下我的公眾號喔~~~

　　小程序二維碼

正文

　　好了說了這么多，正式如題。

　　iframe我覺得應該是用得不多了吧，由於對性能影響比較大，所以應該沒啥特殊情況的話不會用的吧，好巧不巧，我們項目用到了，也好巧不巧，還是應用到移動端上了，頭大了。當然，iframe的引用可以不影響本身頁面的布局這點還是不錯的。

　　這次主要說的就是iframe在移動端上使用存在的問題。

　　主要問題：

　　1.iframe在iPhone上滾動條失效

　　2.iframe在移動端上顯示時不能全部展示完全

　　3.iframe在iPhone上寬度被撐開

　　ok，這些問題就是我在項目上應用iframe時發現的。開始來一一解決。

iframe在iPhone上滾動條失效

　　主要原因是由於iframe設定了一定的高度之后，由於iframe內容的足夠長超過了iframe的設定高度時，在iPhone上滾動條沒效。

　　而解決辦法也比較簡單，就是給iframe設定一個外層div，並設定外層div的樣式：

-webkit-overflow-scrolling: touch; /* 當手指從觸摸屏上移開，會保持一段時間的滾動 */
 overflow-y: scroll;

　　這樣就可以實現iframe在iPhone上的滾動了。

iframe在移動端上顯示時不能全部展示完全

　　如果不想以滾動條的形式顯示，而是把iframe內容全部展示的話，OK，通過設定iframe高度height="100%"，實際一般標簽確實這樣就實現了內容展開。但是，問題又來了。發現並沒有，還是只顯示一部分，於是，只能通過js的手段進行高度的動態設置，見代碼：

function setIframeHeight(id){
        try{
            var iframe = document.getElementById(id);
            if(iframe.attachEvent){
                iframe.attachEvent("onload", function(){
                    iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;
                });
                return;
            }else{
                iframe.onload = function(){
                    iframe.height = iframe.contentDocument.body.scrollHeight;

                };
                return;
            }
        }catch(e){
            console.warn('setIframeHeight Error');
        }
    }

　　通過這樣，就能實現完全的展開iframe內容了。好了，以為完美的解決問題了，一上正式服，納尼，測試服上沒有，正式服上iPhone瀏覽竟然發現內容被撐開，出現了左右的滾動條，原因get不到，有知道的大神可以留言，先謝過了。

iframe在iPhone上寬度被撐開

　　於是就開始頭大怎么解決這個問題了，當然，按照上面設定高度的方法設置寬度發現無效...。於是，經過一輪糾結，決定直接獲取iframe內的內容進行填充。於是這個是我想到的唯一解決在iPhone上寬度被撐開的問題。由於本來項目的原因還是得加載iframe，所以還是得從iframe加載完然后動態獲取內容再加載進設定的div內，見代碼：

function setIframeContent(id){
        try{
            var iframe = document.getElementById(id);
            if(iframe.attachEvent){
                iframe.attachEvent("onload", function(){                   console.log(iframe.contentWindow.document.body.innerHTML);
                    document.getElementById("iframeInner").innerHTML=iframe.contentWindow.document.body.innerHTML;
                return;
            }else{
                iframe.onload = function(){                //console.log(iframe.contentDocument.body.innerHTML);
                    document.getElementById("iframeInner").innerHTML=iframe.contentDocument.body.innerHTML;
                return;
            }
        }catch(e){
            console.warn('setIframeHeight Error');
        }
    }

　　ok，這樣就能獲取到iframe的內容了。

　　當然，問題1到3就是我遇到加載iframe在移動端上的存在的問題的解決路上遇到的問題，並且一路解過來時發現的各種問題。並且一一解決各問題最后決定應用的方式。也一一列舉出來，看獲取你只需要實現某一步即可。

寫到最后

　　iframe在移動端上的使用出現的問題可能不止這些，或者不止這些方法，要是你有更好的方法可以留言讓更多的需要的看到喔。

　　最后，也希望大家可以關注下我的個人公眾號《前端美食匯》。