关于javascript:刷新iframe的几个方法管你跨不跨域

29次阅读

共计 1293 个字符，预计需要花费 4 分钟才能阅读完成。

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 刚刚好

至此，完满解决需要~

总结：遇到难题，摸摸鱼就好~

正文完