解决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在移动端上的使用出现的问题可能不止这些，或者不止这些方法，要是你有更好的方法能够留言让更多的须要的看到喔。

　　最后，也但愿你们能够关注下个人我的公众号《前端美食汇》。