解決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在移動端上的使用出現的問題可能不止這些，或者不止這些方法，要是你有更好的方法能夠留言讓更多的須要的看到喔。

　　最後，也但願你們能夠關注下個人我的公衆號《前端美食匯》。