解决部分iphone上使用iframe标签变宽的异常情况
iframe在部分iphone手机上变宽
如下图:
百度查了很多也试了很多,最后的解决方式如下:
第一种:
我使用的是VUE
html代码:
<!-- 对于iphone中scrolling必须是no,不要担心一定会滚动的,对于安卓手机scrolling则是auto,否则在安卓移动端不会滚动 --> <iframe id="iframe1" class="iframeCss" height="100%" width="100%" :src="url" frameborder="0" :scrolling="type"></iframe>
css代码:
.iframeCss { min-width: 100%; width: 3.75rem !important; //设置iframe宽度,这个也尤其重要 }
JavaScript代码:
//onload方法在mounted()中执行 onload() { //获取iframe标签 var iframe = document.getElementById('iframe1') let _this = this iframe.onload = function() { // 判断当前的移动端是否是苹果系统 var u = navigator.userAgent var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (isiOS) { try { // 这个try catch可有可无 // 我测试了几遍自己程序,没有这一块代码的话,页面第一次展示的时候有可能页面会变宽一下,但是很快就又正常了,看着变宽只是一个过渡,我不知道是我手机问题还是其他问题,这个没有深究 document.body.style.width = (window.screen.availWidth / document.body.clientWidth) * 100 + '%' var iframebody = iframe.contentWindow.document.body iframebody.style.width = document.body.clientWidth + 'px' // eslint-disable-next-line no-empty } catch (error) {} // 这是设置iframe的scrolling属性 _this.type = 'no' } window.scrollTo(0, 0) } }
第二种:(这是补充的内容,优先考虑使用这种)
html代码:
<div class="header"></div> <div class="swapper"> <!-- scrolling必须是auto或者yes,iframe才能滚动,不区分安卓和苹果 --> <iframe id="iframe1" class="iframeCss" height="100%" width="100%" :src="linkurl" frameborder="0" scrolling="auto"></iframe> </div>
css代码:
.header { height: 0.44rem; width: 100%; background-color: #09b6f2; position: fixed; z-index: 2000; top: 0; left: 0; } .swapper { position: fixed; top: 0.44rem; left: 0; height: 100%; width: 100%; -webkit-overflow-scrolling: touch; overflow-y: scroll; }
没有JavaScript代码需要处理;
这样能保证头部固定,iframe的内容也可以滚动,不用处理不同移动端的情况。
赞 (0)