vue中iframe传参/绕过跨域/绕过src不刷新问题解决

前言​

欢迎大家来到我的博客，请各位看客们点赞、收藏、关注三连！

欢迎大家关注我的知识库，全栈进阶之路·语雀

你的关注就是我前进的动力！

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

正文

首先，有一个需求，就是嵌套一个页面，但是这个页面会根据几个条件传参。
举例：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>

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