解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题

现象

最近有一个项目内嵌了一个iframe，会在一定条件下动态切换其的src达到切换页面的效果。同时页面父页面中有回退按钮，直接调用的go(-1)。此时就产生了一个奇怪的现象：点击回退按钮，iframe出现了后退，而父页面没有回退。

类似于下面这样：

// 动态切换src
let iframeSrc: string = 'http://example1.com'setTimeout(() => {iframeSrc = 'http://example2.com'
}, 1000)// vue.js
this.$router.go(-1)// react.js
history = useHistory()
history.go(-1)

原因

在网上查找了相关资料，原来动态切换iframe的src会导致增加一条iframe的历史浏览记录，无论vue还是react都是基于window.history做路由跳转，所以回退一步就是回退iframe的历史浏览记录。

解决办法

方法一

找到原因后，第一想法就是直接整个替换iframe，于是单独写了一个renderIframe的方法，每次生成一个新的iframe，然而事与愿违。虚拟dom在diff过程中发现只有src变了，于是patch的时候直接更换src，最终回到了最初的起点。

// 写法一
const renderIframe = (src: string) => {return <iframe src={src} />
}

因为上面JSX最终调用的React.createElement，还是生成的虚拟节点，遂改成了下面这种写法：

// 写法二
const renderIframe = (src: string) => {const iframe = document.createELement('iframe')iframe.src = srcreturn iframe
}

方法二

巧用key特性，在虚拟dom的diff算法中，key有着超高的地位，如果同一类型的虚拟节点的key不相同，就会直接销毁重新挂载，而没有key区分时就会尽可能的复用打补丁（patch）。根据这个特性，只需在iframe上增加不同的key即可，本人直接使用的src。

// vue.js
<iframe :key="src" :src="src" />// react.js
<iframe key={src} src={src} />

解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题相关推荐

addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
js给iframe动态设置src和参数参数传递问题
最近开始接触到一个挺老项目,其中涉及到了一些jsp代码编写, 其中遇到一个问题比较麻烦,就是在jsp页面中iframe 的src属性动态修改的问题页面:hello.jsp,table.jsp 页面上 ...
chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...
解决Docker上安装RabbitMQ后Web管理页面打不开的问题
进入docker的rabbitmq容器,执行 rabbitmq-plugins enable rabbitmq_management 开启rabbitmq_management插件
win7系统IE11浏览器导致页面无法点选日期解决方法：
win7系统IE11浏览器导致页面无法点选日期解决方法: win7系统IE11浏览器导致页面无法点选日期解决方法:方法一:1.打开ie11浏览器,然后点击"工具--Internet选项&qu ...
html frame 的src属性,iframe标签的src属性
jQuery怎么给iframe的src赋值给iframe src赋值,代码如下: 特别注意: 1.上述jquery代码不能缺少 $(document).ready(); ,否则iframe src赋 ...
React配置了跨域后导致页面跑不起来，无法访问此网站
React项目中,配置了setupProxy.js后,导致页面提示无法访问此网站配置是这样配置的 const proxy = require('http-proxy-middleware')modu ...
Vue进阶（六十四）：iframe更改src后页面未刷新问题解决
文章目录一.场景描述二.高版本浏览器页签切换后内容不刷新问题解决 2.1 解决思路 2.2 解决措施三.拓展阅读 3.1 keep-alive 缓存 iframe 一.场景描述在项目开发过程中 ...
jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...

解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题

现象

原因

解决办法

方法一

方法二

解决iframe动态切换src后历史记录，导致页面后退变为iframe后退的问题相关推荐

最新文章

热门文章