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

　　最后，也希望大家可以关注下我的个人公众号《前端美食汇》。