vue项目动态设置iframe元素高度的操作代码

<template>
  <div class="iframe-container">
    <iframe ref="iframe" :src="iframeSrc" @load="onIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://example.com'
    };
  },
  methods: {
    onIframeLoad() {
      const iframe = this.$refs.iframe;
      if (iframe && iframe.contentWindow) {
        const iframeBody = iframe.contentWindow.document.body;
        const iframeHeight = iframeBody.scrollHeight;
        iframe.style.height = `${iframeHeight}px`;
      }
    }
  }
};
</script>

<style scoped>
.iframe-container {
  width: 100%;
  overflow: hidden;
}
</style>

<template>
  <div class="iframe-container">
    <iframe ref="iframe" :src="iframeSrc" allowtransparency="true" frameborder="0"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://cross-origin.example.com'
    };
  },
  mounted() {
    window.addEventListener('message', this.handleMessage, false);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage, false);
  },
  methods: {
    handleMessage(event) {
      if (event.origin !== 'https://cross-origin.example.com') return;
      const iframe = this.$refs.iframe;
      iframe.style.height = event.data + 'px';
    }
  }
};
</script>

<template>
  <div class="iframe-container">
    <iframe :style="{ height: iframeHeight + 'px' }" :src="iframeSrc" @load="onIframeLoad"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeSrc: 'https://example.com',
      contentHeight: 0
    };
  },
  computed: {
    iframeHeight() {
      // 可以在这里添加额外的逻辑来决定iframe的高度
      return this.contentHeight;
    }
  },
  methods: {
    onIframeLoad() {
      const iframe = this.$refs.iframe;
      if (iframe && iframe.contentWindow) {
        const iframeBody = iframe.contentWindow.document.body;
        this.contentHeight = iframeBody.scrollHeight;
      }
    }
  }
};
</script>