iframe内嵌别人页面,点击回退按钮,页面出错

Posted 2023-04-26

参考技术A

iframe内嵌别人页面,点击回退按钮,页面出错的解决方法如下：

做项目的时候发现，父页面使用iframe 内嵌页面时，比如父页面有个tab，点击不同的tab切换tab的内容，此时，每个不同的tab内容就是一个html页面。

当多次点击tab后，点击浏览器回退按钮，导致页面没有回退，回退的只是iframe的历史页面，直到回退到初始的历史iframe才能够真正的返回上一页。

此时，用的是替换iframe的src链接进行内容切换的。

针对以上问题，只需将整个iframe进行替换即可。

关于vue项目和内嵌iframe页面之间的通信问题

最近项目中遇到一个与内嵌iframe页面之间通信的问题，起初与原生之间通信很简单，没想到过与vue项目通信的问题，霎时间一脸懵*啊，百度了一下，原来是那么简单，这里记录下以供下次参考

//vue页面 向 内嵌iframe传递事件

// vue页面代码
let frame = document.getElementById(‘iframeId‘);  // 或者用vue语法 let frame = this.$refs.iframeId
frame.contentWindow.postMessage(object,‘*‘);   //  object为传送的对象   *号为接收数据的项目地址



// iframe页面
window.addEventListener(‘message‘,function(event){
    

·// 传送的数据在event.data里面
})

//  iframe页面向vue项目页面传递事件

//  iframe页面
window.parent.postMessage(object,‘*‘);   //  object为需要传送的数据对象  *号为接收数据的项目url地址

//主页面
window.addEventListener(‘message‘,,function(event){
    
         //  数据在event.data对象中
})