位置: 编程技术 - 正文

js点击返回跳转到指定页面实现过程(js点击按钮返回前一个页面)

编辑:rootadmin

推荐整理分享js点击返回跳转到指定页面实现过程(js点击按钮返回前一个页面),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js点击按钮跳转到指定页面,js点击返回顶部,js点击按钮跳转到指定页面,js页面返回,js点击按钮跳转到指定页面,js点击按钮跳转到指定页面,js点击按钮跳转到指定页面,js返回跳转指定页面,内容如对您有帮助,希望把文章链接给更多的朋友!

这个功能之前有简单的带过,这次详细的讲解下原理和存在的问题(由于是运用html5的新API 所以有兼容问题,推荐移动端使用该方法)。

功能描述:

在浏览器中新建标签页并指定一个网址,网页加载完毕后,正常流程下是不允许点击返回的。因为当前标签页的相关历史记录是没有的,所以没有记录可以返回。

应客户要求,需要在这种情况下,给他的历史记录里添加一个链接(比如首页),这样在新打开的页面,点击返回就可以跳转到首页,让用户看到系统的各种功能,推广平台。

一、知识要点

HTML5引进了history.pushState()方法和history.replaceState()方法,它们允许你逐条地添加和修改历史记录条目。这些方法可以协同window.onpopstate事件一起工作。

案例:假设 将执行如下JavaScript代码:

这将让浏览器的地址栏显示 object)包含stateObj的一个拷贝。该页面看起来像foo.html,尽管页面内容可能在popstate事件中被修改。

如果我们再次点击后退按钮,URL将变回 文档将触发另一个popstate事件,这次的状态对象为null。回退同样不会改变文档内容。

pushState()方法pushState()有三个参数:一个状态对象、一个标题(现在会被忽略),一个可选的URL地址。下面来单独考察这三个参数的细节:

状态对象(state object) — 一个JavaScript对象,与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态,popstate事件都会被触发,并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

任何可序列化的对象都可以被当做状态对象。因为FireFox浏览器会把状态对象保存到用户的硬盘,这样它们就能在用户重启浏览器之后被还原,我们强行限制状态对象的大小为k。如果你向pushState()方法传递了一个超过该限额的状态对象,该方法会抛出异常。如果你需要存储很大的数据,建议使用sessionStorage或localStorage。

标题(title) — FireFox浏览器目前会忽略该参数,虽然以后可能会用上。考虑到未来可能会对该方法进行修改,传一个空字符串会比较安全。或者,你也可以传入一个简短的标题,标明将要进入的状态。

地址(URL) — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址,但之后,可能会试图加载,例如用户重启浏览器。新的URL不一定是绝对路径;如果是相对路径,它将以当前URL为基准;传入的URL与当前URL应该是同源的,否则,pushState()会抛出异常。该参数是可选的;不指定的话则为文档当前URL。

注意: 在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 至 Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) 中,传入的对象使用JSON来进行序列化。从 Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3)开始,对象使用结构化拷贝算法来进行序列化。这将允许更多类型的对象能够安全传入。某种意义上,调用pushState()有点类似于设置window.location='#foo',它们都会在当前文档内创建和激活新的历史记录条目。但pushState()有自己的优势:

js点击返回跳转到指定页面实现过程(js点击按钮返回前一个页面)

1、新的URL可以是任意的同源URL,与此相反,使用window.location方法时,只有仅修改 hash 才能保证停留在相同的document中。

2、根据个人需要来决定是否修改URL。相反,设置window.location='#foo',只有在当前hash值不是foo时才创建一条新历史记录。

3、你可以在新的历史记录条目中添加抽象数据。如果使用基于hash的方法,你只能把相关数据转码成一个很短的字符串。

注意pushState()方法永远不会触发hashchange事件,即便新的地址只变更了hash。

popstate事件每当激活的历史记录发生变化时,都会触发popstate事件。如果被激活的历史记录条目是由pushState所创建,或是被replaceState方法影响到的,popstate事件的状态属性将包含历史记录的状态对象的一个拷贝。

replaceState()方法history.replaceState()操作类似于history.pushState(),不同之处在于replaceState()方法会修改当前历史记录条目而并非创建新的条目。

当你为了响应用户的某些操作,而要更新当前历史记录条目的状态对象或URL时,使用replaceState()方法会特别合适。

二、实现思路1.利用popstate事件,监听点击返回事件。

2.触发事件时,判断当前页面的历史记录 是否有页面可以返回。

3.如果没有页面可以返回,则插入两条记录:

1)、指定的跳转页面。

2)、空记录。(使当前页面不发生变化)

三、实现方法

判断当前history中的记录个数,由于页面加载的时候,浏览器会自动push进一个记录。所以要判断长度是否小于2.

塞进的state对象是为了获取对应的url链接。注意点:第一个pushState我将跳转url放进state对象 方便跳转操作。第二个参数没有实际意义,因为现在的浏览器基本不适用这个参数。第三个参数是会替换当前地址栏的链接的,但是页面不会发生跳转。(我之前犯了个错误,将第三个参数设置为首页链接,导致了地址栏更改为首页链接,以至于在当前页的链接 都以首页为基础进行跳转,导致页面的所有链接都跳转错误了。)

这段代码放置在页面的ready事件中执行,延迟毫秒是为了将操作滞后,防止与系统pop事件冲突。if语句为了判断 history是否存在state对象,因为只有满足我们要求的记录才会有我们添加的state对象 所以 根据这点可以进行页面的跳转操作。这样就可以实现我们想要的效果。 四、写在最后缺点: 1. 很明显,就如开头提到的。只适合支持html5的浏览器使用。 2.由于插进了两条记录 ,所以 类似于 微信这种移动端的返回,需要再点击两次返回,才能推出页面,回到微信聊天窗口,用户体验不好。

总结:这种方法 一定还可以优化和完善,只是目前我的实力不足,还不足以完善到完美的程度。

希望看到这篇文章的朋友可以得到一些启发,或者是有更好的方法实现。

深入浅析JavaScript中的constructor 定义和用法constructor属性返回对创建此对象的数组函数的引用。语法object.constructorconstructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创

javascript+HTML5 Canvas绘制转盘抽奖 之前做过的项目中,有需要抽奖转盘功能的。项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家。功能需求1、转盘要美观

浅析JavaScript中浏览器的兼容问题 浏览器兼容性问题是在实际开发中容易忽略而又最重要的一部分。我们在讲老版本浏览器兼容问题之前,首先要了解什么是能力检测,它是来检测浏览

标签: js点击按钮返回前一个页面

本文链接地址:https://www.jiuchutong.com/biancheng/373474.html 转载请保留说明!

上一篇:javascript html5摇一摇功能的实现

下一篇:深入浅析JavaScript中的constructor(java script教程)

  • 外购产品视同自产产品办理免抵退税的条件?
  • 企业支付的租金在汇算时可一次性税前扣除
  • 小规模纳税人升级一般纳税人流程
  • 什么情况下进项税额需要转出
  • 缴纳以前年度所得税在今年汇算清缴怎么填报
  • 房租雇东不开发票只有收据怎么处理?
  • 收不回来的装修钱怎么办
  • 发票开票地址是注册地址还是经营地址
  • 应交税费应交印花税借方有余额
  • 财务人员培训费怎么入账
  • 航天信息服务费不交可以吗
  • 电脑的折旧年限是多久
  • 审计库存现金盘点方法
  • 债券的投资收益率
  • 房屋租赁合同印花税计税依据
  • 增值税专票未认证丢失怎么办
  • 收到法人的借款
  • 应付职工薪酬的一级科目
  • 企业债务重组损失的所得税前扣除
  • 把材料退给客户怎么处理
  • 财政授权支付凭证后多久打款
  • 小规模公司没有进项票 开票需要交什么税
  • 2018年业务宣传费与广告费税前扣除标准及依据
  • 单位个人实际困难怎么写
  • 免税投资背后的风险,你都清楚吗?
  • 税收征收管理法
  • 补助及救济费用
  • 房产企业开发产品出租
  • 收购企业收购方和被收购方如何做账?
  • 客户支付货款时扣除了手续费
  • 材料没有入库
  • 销售嵌入式软件产品发票如何开具
  • macOS 11 Big Sur 开发者预览版 Beta 7正式推送
  • regsync.exe - regsync是什么进程 有什么用
  • fedora23安装
  • 税控系统技术维护费税率
  • 微软 gcr
  • python的opencv
  • 后处理作用
  • 人工智能大模型体验报告3.0
  • 商品房测绘收费标准
  • swatch of
  • 收购发票的开具管理
  • 应收贷方表示啥
  • 企业资产盘亏的定性依据
  • 公司租入厂房怎么做账
  • 转让股权个税的计税基础
  • 出口关税的计算公式
  • 详解增发万亿国债细节
  • sql2005附加数据库出错
  • 小规模纳税人工资要每月申报
  • 采购人员差旅费为什么不计入成本
  • 公司借个人款利息产生个人所得税公司可以承担吗
  • 哪些税计入税金及附加
  • 有进项税额转出,怎么计提附加税
  • 取报销凭证的步骤
  • 社会团体费用支出有什么要求
  • 代理运费增值税税率
  • 贴现利息高好还是低好
  • 应收账款核算内容
  • 疫情期间水电费补贴收入申报企业所得税吗
  • 加油吃饭开的发票抵什么税
  • 购买软件会计科目
  • sqlserver2000企业管理器自动关闭
  • 腾讯云centos7有界面吗
  • 445端口 关闭
  • 容器内存限制
  • win7系统修改
  • acer笔记本重装系统教程
  • zmweb.exe是什么进程
  • linux虚拟机怎么查看目录
  • win10正式版多少钱
  • unity2019新功能
  • 抛物线动画演示视频
  • js 进阶
  • 电脑多窗口同步操作
  • 求资金占用利息的公式
  • 合格的税务人
  • 购车发票包含
  • 三种人不交个人所得税?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设