前言
才发现已经有一段时间没有写博客了，就简单的说了最近干了啥吧。前段时间忙了杂七杂八的事情，首先弄了个个人的小程序，对的，老早就写了篇从零入手微信小程序开发，然后到前段时间才弄了个简单的个人小程序，主要是关于菜式方面制作的，原因么，就在我另外一件事情上有说到了，就是然后又弄了个个人的公众号《前端美食汇》（附：个人介绍链接）。大概之前就干了这两事。不过老实说也不用多少时间。搞得好像用了我很多时间似的，哈哈，还是懒~~~
正文
好了说了这么多，正式如题。
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在移动端上的使用出现的问题可能不止这些，或者不止这些方法，要是你有更好的方法可以留言让更多的需要的看到喔。
作者：PC.aaron
出处：http://www.cnblogs.com/aaron-pan/
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
随时随地看视频
