优雅封装vue中的 iframe组件（可修改iframe内部样式）

<template>
  <div class="wrapper-c">
      <iframe id="fram_box" @load="loadFrame" :src="url"> </iframe>
  </div>
</template>

<script>
export default {
  name: 'CommonIframe',
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      loading: true
    }
  },
  mounted () {
    const close = this.closeLoading
    $('#fram_box').load(() => {
      close()
    })
  },
  methods: {
    closeLoading () {
      this.loading = false
    },
    // loadFrame函数是iframe加载完成后回调函数
    loadFrame () {
      // 获取iframe节点
      const iframeBox = document.getElementById('fram_box')
      iframeBox.height = document.documentElement.clientHeight
      iframeBox.width = document.documentElement.clientWidth - 260
      // 获取iframe html文件
      const doc = iframeBox.contentWindow.document
      // 获取iframe html文件head
      const head = doc.getElementsByTagName('head')
      // 新建style标签
      const stylee = document.createElement('style')
      const sHtml = '.container-fluid{padding: 0!important;}'
      stylee.innerHTML = sHtml
      // 将style标签添加进iframe html文件的head里
      head[0].append(stylee)
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper-c {
  #fram_box {
    border-width: 0px;
  }
}
</style>

<common-iframe :url="satpSrc"></common-iframe>