Js之获取iframe中的元素

<template>
  <iframe id="runMonitor-iframe" :src="url" frameborder="0" >
  </iframe>
</template>

<script>
import { onMounted, onBeforeUnmount } from 'vue';

export default {
  name: 'RunMonitorIdx',
  setup () {
    const url = '/commerce/#/home';

    onMounted(() => {
      let [curIframe] = document.getElementsByTagName('iframe');

      /** when iframe onload ok */
      curIframe.onload = () => {
        const idoc = curIframe.contentWindow.document,
          ibody = idoc.body,
          iBodyApps = ibody.querySelectorAll('#app');

        /** css selector loop */
        iBodyApps.forEach((ele) => {
          ele.style.background = '#f0f2f5';
        });

        /** delete other system own navbar */
        let iBodyNav = ibody.querySelector('#navbar');

        iBodyNav.style.display = 'none';
      };
    });

    return { url };
  }
};
</script>

<style lang="scss" scoped>
#runMonitor-iframe {
  width: 100%;
  height: 100%;
}
</style>

参考文章：

iframe的运用---特别是获取父子页面的元素 - 掘金