前言​

专注于问题解决的博客记录，语雀专注于知识的收集与汇总，包括分享前沿技术。

正文

首先，有一个需求，就是嵌套一个页面，但是这个页面会根据几个条件传参。 举例：http://ip:80/myApp/#/xxYw?xzqdm=3102931&zjdm=3102931231 xzqdm:行政区代码（可选）， zjdm：镇级代码（可选） 这个时候，我们直接使用iframe，页面是直接展示的。 因为这个展示的页面，并不在我的手里，即无法提需求，也没办法改动嵌套页面的代码。 后面百度或谷歌了多种方案，都无法实现这个需求。

但经过我的思考，既然都可以直接展示了，那我来一手，先删dom，在追加dom，不就ok！

有思路，就立马行动。

<template>
  <div>
  	<div>
  		<!-- 这里是一些下拉框，查询按钮HTML，封装成一个组件 -->
  		<Search @ontopfunction="ontopfunction" />
  	</div>
    <div id="doc"></div>
  </div>
</template>

<script>
export default {
            
     
  props: {
            
     
  },
  data() {
            
     
    return {
            
     
    }
  },
  mounted() {
            
     
    let doc = document.getElementById(doc)
    this.createIframe(doc, http://ip:80/myApp/#/)
  },
  methods: {
            
     
    ontopfunction(data, json) {
            
     
      let arr = {
            
     
        xzqdm: this.xzdm,
        zjzzdm: data.parameter.xz,
        cjzzdm: data.parameter.cwh,
        cmxzdm: data.parameter.cxz
      }
      let url = ;
      for (let i in arr) {
            
     
        if (arr[i] || ) {
            
     
          url += "&" + i + "=" + arr[i];
        }
      }
      debugger
      const urlSrc = "http://ip:80/myApp/#/?" + url + `&time=${ new Date().getTime()}`
      let doc = document.getElementById(doc)
      this.deleteIframe(doc)
      this.createIframe(doc, urlSrc)
    },
    createIframe(dom, src) {
            
     
      //在document中创建iframe
      var iframe = document.createElement("iframe");
      //设置iframe的样式
      iframe.style.width = "100%";
      iframe.style.height = "800px";
      iframe.style.margin = "0";
      iframe.style.padding = "0";
      iframe.style.overflow = "hidden";
      iframe.style.border = "none";

      iframe.src = src;
      //把iframe载入到dom以下
      dom.appendChild(iframe);
      return iframe;
    },
    deleteIframe(dom) {
            
     
      dom.removeChild(dom.childNodes[0]);
    }
  }
}
</script>

<style scoped>

</style>

就这样，成功解决了该死的传参问题。