javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的?同时介绍iframe子页面切换时控制是否在浏览器中增加历史回退记录

本文主要是介绍javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的?同时介绍iframe子页面切换时控制是否在浏览器中增加历史回退记录,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

重点先下另外一个知识点

在我们的Web站点采用主体页面的iframe导航各个子页面(浏览器地址在不pushState或replaceState时将保持不变)的情况,当iframe中通过变更src属性值变更打开的子页面时,浏览器会自动添加一条可回退的历史记录,后续能够在浏览器中点击后退按钮或在主体页面history.go(-1)进行回退和前进页面。这种情况有可能是我们希望的,也有可能是我们不希望出现的(比如用来模拟tab页的情况)。

那如何控制iframe子页面切换时不增加历史记录呢?

1. 最简单的方式:切换src时重新渲染iframe(https://www.jianshu.com/p/90c228f6bcb0):

vue中,直接给iframe加一个key属性:       

 <iframe :src="srcUrl" :key="src" />

由于vue中的key更改时会重新渲染这个组件,因此这个方法是可行的。我们直接将src值赋值给key就可以实现切换src时重新渲染iframe了。

2. 不通过iframe的src属性值切换子页面,而是采用“iframe.contentWindow.location.replace” (https://blog.csdn.net/WMW_wmw/article/details/127344807):

watch: {'srcUrl'(newValue, oldValue) {setTimeout(() => {let iframe = this.$refs.iframeif (newValue !== undefined && newValue !== null && iframe !== undefined) {iframe.contentWindow.location.replace(newValue)}}, 50)}
},

以下代码则是向浏览器的回退历史栈增加一个记录,但浏览器不会在调用 pushState() 之后尝试加载该方法指定的地址(注意:新的URL可以是绝对路径或相对路径,但必须与当前 URL 同源,如果该参数没有指定,则将其设置为当前文档的 URL):

history.pushState(null, '', window.location);  //这里的URL参数为window.location

更复杂的情况可以参考本人之后转载的另一篇文章:点击iframe中的链接时,使用历史记录pushState更改父窗口的URL-CSDN博客

嵌入 iframe 的页面 history 流程(浏览器后退)

https://www.jianshu.com/p/4c7eb9534677/

 关于popState事件:

摘自:https://www.cnblogs.com/NaN-prototype/p/14308503.html

接下来,我们再说说标题所说的问题,如何判断页面是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入的?

过去可以直接使用以下方法,不过该方法利用的window.performance.navigation.type属性已经在新的标准中废弃,:

JS怎么判断页面是从前一个页面后退回来的 - 百度文库

可以参照以下该方法:

javascript - React - 如何检测页面刷新和重定向用户 - IT工具网

javascript - React - How to detect Page Refresh and Redirect user - Stack Overflow

参考资料:

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation/type

https://developer.mozilla.org/en-US/docs/Web/API/Performance

https://developer.mozilla.org/en-US/docs/Web/API/performance_property

https://developer.mozilla.org/zh-CN/docs/Web/API/performance_property

这篇关于javascritp如何判断是从刷新(重新加载)、正常打开(或链接打开)、还是从浏览器回退进入页面的?同时介绍iframe子页面切换时控制是否在浏览器中增加历史回退记录的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/413927

相关文章

Java图片压缩三种高效压缩方案详细解析

《Java图片压缩三种高效压缩方案详细解析》图片压缩通常涉及减少图片的尺寸缩放、调整图片的质量(针对JPEG、PNG等)、使用特定的算法来减少图片的数据量等,:本文主要介绍Java图片压缩三种高效... 目录一、基于OpenCV的智能尺寸压缩技术亮点:适用场景:二、JPEG质量参数压缩关键技术:压缩效果对比

Java调用C++动态库超详细步骤讲解(附源码)

《Java调用C++动态库超详细步骤讲解(附源码)》C语言因其高效和接近硬件的特性,时常会被用在性能要求较高或者需要直接操作硬件的场合,:本文主要介绍Java调用C++动态库的相关资料,文中通过代... 目录一、直接调用C++库第一步:动态库生成(vs2017+qt5.12.10)第二步:Java调用C++

springboot+dubbo实现时间轮算法

《springboot+dubbo实现时间轮算法》时间轮是一种高效利用线程资源进行批量化调度的算法,本文主要介绍了springboot+dubbo实现时间轮算法,文中通过示例代码介绍的非常详细,对大家... 目录前言一、参数说明二、具体实现1、HashedwheelTimer2、createWheel3、n

Java利用docx4j+Freemarker生成word文档

《Java利用docx4j+Freemarker生成word文档》这篇文章主要为大家详细介绍了Java如何利用docx4j+Freemarker生成word文档,文中的示例代码讲解详细,感兴趣的小伙伴... 目录技术方案maven依赖创建模板文件实现代码技术方案Java 1.8 + docx4j + Fr

SpringBoot首笔交易慢问题排查与优化方案

《SpringBoot首笔交易慢问题排查与优化方案》在我们的微服务项目中,遇到这样的问题:应用启动后,第一笔交易响应耗时高达4、5秒,而后续请求均能在毫秒级完成,这不仅触发监控告警,也极大影响了用户体... 目录问题背景排查步骤1. 日志分析2. 性能工具定位优化方案:提前预热各种资源1. Flowable

基于SpringBoot+Mybatis实现Mysql分表

《基于SpringBoot+Mybatis实现Mysql分表》这篇文章主要为大家详细介绍了基于SpringBoot+Mybatis实现Mysql分表的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可... 目录基本思路定义注解创建ThreadLocal创建拦截器业务处理基本思路1.根据创建时间字段按年进

Python获取中国节假日数据记录入JSON文件

《Python获取中国节假日数据记录入JSON文件》项目系统内置的日历应用为了提升用户体验,特别设置了在调休日期显示“休”的UI图标功能,那么问题是这些调休数据从哪里来呢?我尝试一种更为智能的方法:P... 目录节假日数据获取存入jsON文件节假日数据读取封装完整代码项目系统内置的日历应用为了提升用户体验,

Java编译生成多个.class文件的原理和作用

《Java编译生成多个.class文件的原理和作用》作为一名经验丰富的开发者,在Java项目中执行编译后,可能会发现一个.java源文件有时会产生多个.class文件,从技术实现层面详细剖析这一现象... 目录一、内部类机制与.class文件生成成员内部类(常规内部类)局部内部类(方法内部类)匿名内部类二、

SpringBoot实现数据库读写分离的3种方法小结

《SpringBoot实现数据库读写分离的3种方法小结》为了提高系统的读写性能和可用性,读写分离是一种经典的数据库架构模式,在SpringBoot应用中,有多种方式可以实现数据库读写分离,本文将介绍三... 目录一、数据库读写分离概述二、方案一:基于AbstractRoutingDataSource实现动态

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@