vue iframe嵌套页面高度自适应 (ios 宽度扩大的bug , ios展示比例问题)

Posted 2020-11-24 假装学习

<template>

  <div class="card-index pt-relative">

    <div id="wrapper" :style="‘height:‘+Height+‘px;‘">

      <iframe

        v-if="iframeType"

        :src="srcUrl"

        sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals"

        id="iframe"

        marginwidth="0"

        marginheight="0"

        align="center"

      ></iframe>

 

      <iframe

        v-else

        :src="srcUrl"

        sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-modals"

        id="iframe"

        scrolling="no"

        marginwidth="0"

        marginheight="0"

        align="center"

      ></iframe>

 

   

    </div>

  </div>

</template>

 

 

 data() {

    return {

      srcUrl: "",

      iframeType: false

    };

  },

 created() {

 var u = navigator.userAgent;

    var isandroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端

    // var isios = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

    // console.log(‘是否是Android：‘+isAndroid);

    // console.log(‘是否是iOS：‘+isiOS);

    if (isAndroid) {

      this.iframeType = true;

    } else {

      this.iframeType = false;

    }

}

<style lang=‘scss‘ scoped>

.card-index /deep/ {

  width: 100%;

  position: relative;

  #iframe {

    width: 100%;

    height: 100%;

    overflow: scroll;

    -webkit-overflow-scrolling: touch;

    min-width: 100%;

    *width: 100%;

    width: 1px;

  }

  #wrapper {

    -webkit-overflow-scrolling: touch;

    overflow: auto;

    position: fixed;

    right: 0;

    left: 0;

    top: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

  }

 

</style>