vue 嵌入iframe页面,获取iframe元素修改样式

最新推荐文章于 2025-06-08 00:03:24 发布

原创

最新推荐文章于 2025-06-08 00:03:24 发布 · 1.2w 阅读

12 ·

CC 4.0 BY-SA版权

<template>
  <div class="workbench-container">
    <div v-if="idDev" style="width:100%;height:100px">
      <div style="margin-left:-162px;margin-top:-90px;">
        <iframe
          id="iFrame"
          ref="iframes"
          class="workbench-iframe"
          :height="heightH"
          :src="workbenchSrc"
          frameborder="0"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkBench',
  data() {
    return {
      workbenchSrc: ''
    }
  },
  computed: {
    heightH: function() {
      const windowH = document.documentElement.clientHeight + 'px'
      return windowH
    },
    idDev: () => {
      return process.env.NODE_ENV === 'production'
    }
  },
  mounted() {
    this.workbenchSrc = location.protocol + '//' + location.host + '/portal/ztzx_workbench'
    if (this.idDev) {
      this.$nextTick(() => {
        const iframe = win