Iframe 问题：嵌套的页面修改后未及时刷新

问题

不知道大家在开发中有没有遇到这样的情况：当我们修改了 Iframe 嵌套的内容页面时，刷新页面内容并未变化

分析

Iframe 的使用大家可以看这篇文章：Iframe 使用 ，个人觉得对于开发应该绰绰有余了

在找了很多方法都尝试无解，

• 有想过是不是加载的url不对，于是我在加载完url后进行了 alert 进行了查看，发现url 跳转的地址是没有问题的，
• 有想过是不是加载的时机不对，导致加载的内容是上次的，发现也还是不行

  this.$nextTick(() => {
  const iframe = document.getElementById(‘myIframe’);
  iframe.src = this.detailUrl;
  });
  

后来和朋友探讨后，iframe 可能有缓存，引入其他页面后，页面内容并未刷新加载，页面没有重新加载，没有及时刷新，给出几个解决方案如下，大家可以根据自己的情况进行测试

1. 给iframe加key，在组件上加key，强制刷新页面。

 <div style="height: 100%">
    <iframe
      :key="ikey"
      class="process-monitoring"
      width="100%"
      height="100%"
      :src="iframeUrl"
    ></iframe>
  </div>
..........
  data() {
    return {
      ikey: new Date().getTime(), // 使用时间戳
     // 其他变量定义省略
     }
  }
// methods：
 openAlarmDetail(id) {
   this.ikey = new Date().getTime();  // 使用时间戳
   this.iframeUrl= `/test/${id}`;
 }
 // css
.process-monitoring {
  height: 100%;
  width: 100%;
  border: none;
  iframe {
    height: 100%;
    width: 100%;
    border: none;
  }
}

2. 监听url变化

watch: {
iframeUrl: {
	deep : true 
	handler(val) 
		document.getElementById('iframe的id').contentwindow.location.reload(true)
	}
 }
}

3. 重载，重新载入

vm.iframeSrc = iframeSRC
if (document.getElementById('iframe')) {
	setTimeout(() => {
		document.getElementById(iframeid).contentWindow.location.reload(true);
	}, 200)
}

注：

1. 务必在更改iframe src属性值之后补充页面重载逻辑，否则无法解决问题。
2. window.reload是重新加载当前需要的所有内容，也就包括页面和后台的代码，此过程中实际上是从后台重新进行操作；