一直以来我都以为iframe的src只要变化了就会刷新，结果今天的一个需求让我发现了，iframe的url的hash部分更新iframe是不会重新加载的
验证
建立一个Test.html文件，然后开启vue开发环境
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网页</title>
</head>
<body>
<button
style="position: fixed"
onclick="btnClick()"
>更新</button>
<iframe
id="iframe"
src="http://127.0.0.1:81/#/"
style="width: 100vw;height: 100vh"
></iframe>
<script>
const src="http://127.0.0.1:81/#/"
let count = 0
const iframe = document.getElementById('iframe')
iframe.onload=()=>{
console.log(5555)
}
function btnClick(){
if(count++%2===0){
iframe.setAttribute('src','http://127.0.0.1:81/#/index')
} else {
iframe.setAttribute('src',src)
}
}
</script>
</body>
</html>
然后我们点击更新
监听的iframe--onLoad并没有重新加载
我们修改一下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个网页</title>
</head>
<body>
<button
style="position: fixed"
onclick="btnClick()"
>更新</button>
<iframe
id="iframe"
src="http://127.0.0.1:81/#/"
style="width: 100vw;height: 100vh"
></iframe>
<script>
const src="http://127.0.0.1:81/#/"
let count = 0
const iframe = document.getElementById('iframe')
iframe.onload=()=>{
console.log(5555)
}
function btnClick(){
if(count++%2===0){
iframe.setAttribute('src','http://127.0.0.1:81/index') // 修改这里 #/ ---> /
} else {
iframe.setAttribute('src',src)
}
}
</script>
</body>
</html>
最后
这样vue的spa页面也可以在iframe中用，我们自己重写push函数就行了，获取这个iframe的动态修改src，不过自己没有试过￣□￣｜｜
欢迎关注：O(∩_∩)O
