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

菜鸟001
  • 236

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

回复
阅读 1.6k
9 个回答

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

你说刷新的话,我理解就是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);
}

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

直接 v-if 切换。

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

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


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

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()
jimpeo
  • 29
北京市昌平区

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

宣传栏