vue页面嵌套外部url

我的需求是一进入页面通过调接口获取页面的url，然后把url嵌套到当前页面。

<template>
  <div class="page-content" id="bi-div"></div>
</template>

<script>
  import reportFormApi from '@/api/reportForm'
  
  export default {
    name: 'reportComponent',
    props:{
      codeStr:String
    },
    data () {
      return {
        urlCode :"",
      }
    },
    mounted: function () {
      if(this.codeStr){
        this.urlCode = this.codeStr;
        this.getUrl();
      }
    },
    methods: {
      getUrl(){
        reportFormApi.getQuickBi({url : "/postUrl/" + this.urlCode}).then(res=>{
          if(res.code==0){
            var frame = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" width="100%" height="100%" src="' + res.data.previewUrl + '"></iframe>';
            var newNode = document.createElement('div');
            newNode.innerHTML = frame;
            newNode.style.height = '1200px';
            var htmlBody = document.getElementById('bi-div');
            htmlBody.insertBefore(newNode, htmlBody.firstChild);
          }else{
            this.$Message.error({
              content: res.message,
              duration: 2.5,
              closable:true,
            });
          }
        })
      }
    }
  }
</script>