框架
Vue
需求
写一个Popup组件, 其内容为展示外部链接中的一份或多份协议。
代码
省略部分代码,展示问题关注点
import Vue from "vue"
/**
@typedef ProtocolItem
@property {string} url 协议链接
@property {string} name 协议展示名称
*/
/**
@param {ProtocolItem[]} protocolList
@returns {Promise<boolean>}
*/
const readyProtocol = (protocolList) => {
return new Promise((resolve) => {
const instance = new Vue({
render: function(createElement) {
const self = this
return createElement("section", { class: "...", attrs: { id: "..." } }, [
createElement("section", {}, [
"请仔细阅读以下协议",
...protocolList.map(function (protocol, index) {
return createElement("strong", { on: { click: self.browse(index) } }, protocol.name)
})
]),
createElement("iframe", { domProps: { src: self.protocolList[self.current].url } })
// ...省略
])
},
data: function () {
return {
current: 0,
}
},
methods: {
browse(index) {
this.current = index
}
}
})
})
}
问题
点击每一个协议项可以实现切换不同的协议,但其会在浏览器中增加一条记录。导致打开此组件的时候,进行浏览器的返回操作先切换了 <iframe>
内的内容。
解决思路
核心问题在于其为同一个 <iframe>
,不要让它复用继续在浏览器中添加 history,只需要想办法在其切换src时将其销毁并重新挂载一个新的。
解决办法
利用key属性
<iframe :key="src" :src="src" />
vue文档中说到,key属性能够作用于强制替换元素而不是复用
所以,在 src
属性更改时,同时更改其 key
属性,可以做到让它不会持续向浏览器中添加 history。