iframe改变src产生浏览器历史记录问题探究

直接改变src

在制作H5项目中，使用到了iframe，但是应客户要求，在修改iframe链接的时候不要产生历史记录。比如，我们通常的做法（框架以vue为例）：

<button @click="changeSrcA">一、会添加历史记录</button> 
<iframe :src="src1" frameborder="0"></iframe>

changeSrcA() {
   this.src1 = toolSrc;
}

效果请见：进入后点（一）查看在线效果

使用v-if动态渲染

<button @click="changeSrcB">二、点我通过v-if动态(添加)渲染iframe 不产生记录</button>
<button @click="delSrcB">2.5-点击删除元素</button>
<iframe :src="src2" v-if="showB" frameborder="0"></iframe>

data: {
    src2: workSrc,
    showB: false
},
methods: {
    changeSrcB() {
        this.showB = true;
        this.src2 = toolSrc;
    },
    delSrcB() {
        if (!this.showB) {
            alert('先显示iframe-b');
        }
        this.showB = false;
        this.src2 = workSrc;
    }
}

效果请见：进入后点（二）查看在线效果

最终发现，使用v-if也不会产生历史记录。它的效果与document.createElement看起来相似，从结果看，都是动态给DOM元素中插入iframe元素。

其中经过测试，修改showB与src2前后执行顺序效果一致，但是还是推荐大家先赋值src2再执行显示。

// 推荐
this.src2 = workSrc;
this.showB = false;

但是在具体项目中，也有产生历史记录的问题出现（此例中没有）。这个仅仅作为保留方案。

createElement创建并插入元素

<div class="item" id="box">
        <button @click="changeSrcC">
              三、点我通过创建元素添加
        </button>
</div>

changeSrcC() {
    // 父元素建议现插入现取 否则无法插入
    var box = document.getElementById('box');
    let iframe = document.createElement('iframe');
    iframe.frameborder = 0;
    iframe.className = 'vr-iframe';
    iframe.src = toolSrc;
    iframe.id = 'vr-iframe';
    box.appendChild(iframe);
}

经过测试，推荐大家在有使用iframe不产生历史记录需求的时候，使用这种方法！即使用原生JS动态插入到元素中。这种方式不会产生历史记录，且当iframe中有音乐播放时，当iframe被删除，也会停止播放。最终效果类似于（二）。

效果请见：进入后点（三）查看在线效果

应用此效果的项目地址：风雨九十载-三医90年发展足迹VR展

当然有插入，就要有删除：

// 删除插入的iframe
// 切记不要统一先去“box” 需要现用现取（针对使用vue的情况）
var box = document.getElementById('box');
var iframe = document.getElementById('vr-iframe');
box.removeChild(iframe);