iframe影响浏览器返回行为的解决方法

框架

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。