iframe自适应屏幕大小

<template>
  <div class="iframeBox">
    <el-button style="top:10px;right: 2%;position: absolute;" @click="back">返回上一页</el-button>
    <iframe :src="url" frameborder="0" scrolling="auto" id="iframe" @load="adjustIframe" style="position: absolute; top: 50px; left: 0px"></iframe>
  </div>
</template>

<script>
export default {
    
    
  name:'IframePage',
  data(){
    
    
    return {
    
    
      url:''
    }
  },

  mounted () {
    
    
    this.url = localStorage.getItem('URL');
  },

  methods: {
    
    
    adjustIframe() {
    
    
      var ifm = document.getElementById("iframe");
      ifm.height = document.documentElement.clientHeight;
      ifm.width = document.documentElement.clientWidth;
    },

    back(){
    
    
      this.$router.push({
    
    
        name: "prePage",
      });
    }
  },
  destroyed () {
    
    
    localStorage.removeItem('URL');
  }
}
</script>

<style lang="less" scoped>
.iframeBox{
    
    
  height: 100%;
  width: 100%;
}
.headNav{
    
    
  display: none;
}
</style>

猜你喜欢

转载自blog.csdn.net/weixin_43732777/article/details/135078551