iframe在ios上无端扩大以及无法滑动的问题

近期公司因为需要把自己的项目部署到别人的服务器上,然后再自己的h5页面打开部署到别人服务器的项目,所以用到了iframe(绝逼不推荐使用,太多的坑,),然后ios上各种不兼容
找到一种兼容的方式,就是把iframe换成object,其他传值都一样,只是需要把宽高写死

 <object
                    ref="iframe"
                    :data="src"
                    height="667px"
                    width="375px"
                    
            />

上面如果不行的话,又有两种方式
第一种方式:直接判断机型是否是ios,然后如果是ios,换跳转方式为href

  getOsVersion() {
                var ua = navigator.userAgent.toLowerCase();
                var version = {};
                if (ua.indexOf("like mac os x") > 0) {
                    version.os='ios'
                    var reg = /os [\d._]+/gi;
                    var v_info = ua.match(reg);
                    version.number = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本号9.3.2或者9.0
                    version.number = parseInt(version.number.split('.')[0]); // 得到版本号第一位
                    if(version.os=='ios'){
                        this.jumpWay=true
                    }
                    if(version.number && version.number < 10){
                        this.osUnSupport = true
                    }
                }
                if (ua.indexOf("android") > 0) {
                    version.os='android'
                    var reg = /android [\d._]+/gi;
                    var v_info = ua.match(reg);
                    version.number = (v_info + "").replace(/[^0-9|_.]/ig, "").replace(/_/ig, "."); //得到版本号4.2.2
                    version.number = parseInt(version.number.split('.')[0]);// 得到版本号第一位
                }
                return version
            },
if(this.jumpWay){
                 this.isLoading = false
                 this.jumpWay=false
                //  通过重定向,使得路由不记录这一层
                 location.replace(this.getSrc())
             }else {
                 this.src = this.getSrc()
             }

第二种方式,通过postmessage动态获取dom高度,然后在赋值给iframe

 window.addEventListener('message', this.handelMessage)

handelMessage(e){
                if(this.listen){
                    console.log(e)
                    const data = e.data
                    switch(data.cmd){
                        case 'buying':
                            console.log(`i am buying a fund ${ JSON.stringify(data.params) }`)
                            break
                        case 'height':
                            console.log(`i get height  ${ JSON.stringify(data.params) }`)
                            if(data.params.height==false){
                                this.height=document.body.clientHeight+'px'
                            }else{
                                this.height=data.params.height+"px"
                            }

                            break
                        case 'scollTop':
                            console.log(`i get scolltop  ${ JSON.stringify(data.params) }`)
                            // console.log( document.getElementById('content').scrollTop );
                            //  document.getElementById('content').scrollTop = 0
                            //  todo -如何实现把滚动调到最上面的位置第一位
                               document.documentElement.scrollTop=ata.params.scollTop
                            break
                        case 'load-completed':
                            console.log(`i am load-completed ${ JSON.stringify(data.params) }`)
                            this.isLoading = false
                            break
                        default:
                            console.log('do nothing ouside...')
                            break
                    }
                }
            }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,686评论 4 61
  • 这周用三天半时间参加了一个针对管理层的集中培训和拓展训练,思考到了很多道理 在这三天培训开始之前,我听到一个问题 ...
    齐发财阅读 1,724评论 0 1
  • 答顾东桥书 【原典119】来书云:“闻语学者,乃谓 ‘即物穷理’之说亦是玩物丧志,又取其‘厌繁就约、涵养本原’数说...
    海上明月共阅读 3,658评论 0 0

友情链接更多精彩内容