likes
comments
collection
share

刷新iframe的几个方法,管你跨不跨域

作者站长头像
站长
· 阅读数 33

html:

<iframe id="myFrameId" name="myFrameName" :src="url" height="300" width="500"></iframe>

非跨域刷新:

frameWindow.location.reload()
// 通过各种手段获取的iframe window对象都行
const frameWindow = document.querySelector('#myFrameId').contentWindow 
frameWindow.location.reload()

这个方法只能在非跨域时使用。其实, 非跨域的话,随便一种方法都可以的。

跨域刷新 (非跨域也可以):

思路:通过重新给iframe的src赋值来刷新
// 方法1
const tmpUrl = document.all.myFrameName.src
window.open(tmpUrl ,'myFrameName')
// 方法2
const el = document.querySelector('#myFrameId')
const tmpUrl = el.src
el.src = tmpUrl 

效果类似但又不完全类似于location.href = xxx,不同点 :

  • iframe的src 不会随内部跳转而变化,location.href 会随页面跳转而变化。
  • 当 iframe 里面完全没有发生过跳转,且tmpUrl带hash时(如 https://cn.vuejs.org/v2/guide/installation.html#NPM带了#NPM),上述方法就无法刷新iframe,同样条件下location.href = location.href 可以刷新页面

------以上只是顺带记录一下,随便冲浪一下都能找到,接下来才是我写这篇笔记的重点! ------

在写这篇笔记的前正好有个需求要刷新带hash的iframe,用上述方法都不行,百度、google了半小时无果,差点自闭😂😂于是跑去摸鱼,刚蹲下就灵机一动 “ 先将src置成任意与tmpUrl不一样的链接, 在置回来 ”:

// 方法3 - ❌❌❌, iframe还是不会刷新
const el = document.querySelector('#myFrameId')
const tmpUrl = el.src
el.src = 'about:blank'
el.src = tmpUrl

用这段代码,你会发现并没有达到预期效果。因为事情发生的太快了,iframe它还没反应过来🙄。那就给iframe一点时间(setTimeout)呗🤭

// 方法3 - ⭕⭕⭕
const el = document.querySelector('#myFrameId')
const tmpUrl = el.src
el.src = 'about:blank' // 作为一个临时的链接,如果是其它正常可访问URL,会浪费一些不必要流量
const _t = setTimeout(()=>{
    el.src = tmpUrl
    clearTimeout(_t)
}, 300) // 太短,iframe依然反应不过来,太长效果又不好,300ms刚刚好

至此,完美解决需求~

总结:遇到难题,摸摸鱼就好~