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

<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 = window.frames['iFrame']
        const handleLoad = () => {
          setTimeout(() => {
            const Do = (iframe.contentWindow || iframe.contentDocument)
            Do.document.getElementsByClassName('menu_wp')[0].style.display = 'none'
          }, 500)
        }
        iframe.addEventListener('load', handleLoad, true)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.workbench {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  &-iframe {
    width: 100%;
    margin-left: calc(0% - 14px);
  }
}

</style>