iframe适配iPhone时iframe样式会乱的问题

最新推荐文章于 2024-08-18 21:47:24 发布

石佛皮尔斯

最新推荐文章于 2024-08-18 21:47:24 发布

阅读量2.9k

点赞数

分类专栏： JavaScript关于冒泡的案例文章标签： iframe适配iPhone 宽度变大 iPhone iframe !!u.match(/\(i[^;] ;( U;)? CPU

本文链接：https://blog.csdn.net/qq_41028553/article/details/85002172

版权

JavaScript关于冒泡的案例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天遇到的问题，iframe适配iPhone时会出现iframe的大小会变很大，完全看不成，我一搜索大部分都是这个问题。

这个是iframe部分

注意with和height都给100%

<iframe id="mainIframe" class="iframe" src="./home.html" name="mainIframe" width="100%" height="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" >
</iframe>

js部分

var frame = document.getElementById('mainIframe')
frame.onload = function () {
    var u = navigator.userAgent
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if ( isiOS ) {
        var iframebody = frame.contentWindow.document.body;
        console.log(iframebody)
        iframebody.style.width = document.body.clientWidth + 'px';
        // alert('iphone')
    }
}

先判断一下是不是ios系统，然后将body宽度给到iframe，这样就ok了。