vue中加载的iframe页面怎么刷新？

Question

如图所示，每次点击打开弹窗，弹窗里面会有一个iframe的地图页面，但是弹窗展示的地图页面坐标值不同，怎么打开弹窗的时候让这个弹窗iframe重新加载呢

Answer 1

不能不用iframe么- -！
要不你试试指定带参数的地址吧，比如search.html?经度=&纬度=，search.html中取得url中的参数进行后续处理。

Answer 2

你说刷新的话，我理解就是iframe的url参数不变化。那么可以用这个方案：

function setIFrameSrc(idFrame, url) {
  var originalFrame = document.getElementById(idFrame);
  var newFrame = document.createElement("iframe");
  newFrame.id = originalFrame.getAttribute("id");
  newFrame.width = originalFrame.getAttribute("width");
  newFrame.height = originalFrame.getAttribute("height");
  newFrame.src = url;    
  var parent = originalFrame.parentNode;
  parent.replaceChild(newFrame, originalFrame);
}

Answer 3

最简单的就是在iframe上加个v-if

Answer 4

直接 v-if 切换。

Answer 5

iframe 父子通信 也可以考虑这种方案

Answer 6

<iframe v-if="dialogVisible" ref=... />

Answer 7

直接用v-if="dialogShow"切换下；强制重新渲染。

data() { 
    return { 
        dialogShow: true,  
    } 
},
方法：
loadIframe(){
        this.dialogShow = false
        this.$nextTick(function () {
             this.dialogShow = true 
        })
}

Answer 8

iframe 脱离文档流再重新插入就会重新初始化

function reloadIframe(iframe: HTMLIFrameElement) {
  const parentElement = iframe.parentElement
  if (!parentElement) return;
  const nextElementSibling = iframe.nextElementSibling
  parentElement.removeChild(iframe)
  nextElementSibling ? parentElement.insertBefore(nextElementSibling, iframe) : parentElement.appendChild(iframe)
}

v-if 同理；

如果同源的话可以直接拿到 window 对象操作

iframe.contentWindow?.window.location.reload()

Answer 9

最有效并且节省性能的方式是，通过ref获取iframe元素，切换src地址后，通过调用iframe的reload方法，进行强制刷新，但是要保证不存在跨域的情况才可以这么做！