yifeng_integration/src/views/next/screen-content-map/cpt/hsyf-iframe.vue

<!--
 * @Author: mk 2403457699@qq.com
 * @Date: 2024-01-15 10:07:45
 * @LastEditors: mk 2403457699@qq.com
 * @LastEditTime: 2024-02-27 15:10:40
 * @Description: 介绍一下改动了什么
 *
 *
-->
<template>
  <div style="width: 100%; height: 100%;">
    <iframe  v-if="vrImg" src="https://quanjingtong.cn/t/h3qde4mz8ly" frameborder="no" width="100%" height="100%" id="myIframe">
    </iframe>
    <div class='bg_img' v-else>
    </div>
  </div>
</template>

<script>
import { mapGetters} from 'vuex'
export default {
  data() {
    return {}
  },
  created() { },
  mounted() {
    this.editIframeStyle()
  },
  methods: {
    editIframeStyle() {
      var iframeDocument = document.getElementById('myIframe').contentWindow.document;
      console.log(iframeDocument,'seee');
      // 获取目标元素集合
      var elements = iframeDocument.getElementsByClassName('vrModal-inner');
      console.log(elements,'elements');
      // 确保元素存在，并修改第一个匹配元素的样式
      if (elements.length > 0) {
        var element = elements[0];
        element.style.width = "50%";   // 修改宽度
        element.style.height = "50%";  // 修改高度
      }
    }
  },
  components: {},
  computed: {
    ...mapGetters(['vrImg'])
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.bg_img {
  background: url('~@/assets/images/map/hsyf.jpg');
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>