热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

popstate事件在webkit中的诡异行为

popstate是HTML5的History系列中的事件,但是这玩意儿在webkit中的行为相当让人蛋疼。虽然官方的文档中对popstate的描述也没有细节上的描述,不过以我的逻辑来判断,

popstate是HTML5的History系列中的事件,但是这玩意儿在webkit中的行为相当让人蛋疼。

虽然官方的文档中对popstate的描述也没有细节上的描述,不过以我的逻辑来判断,这货是就webkit的BUG。   HTML5的这一套HistoryAPI和传统的History不同,或者说这一套HistoryAPI是“session history entries”。虽然官方的文档并没有强调它与传统的History不同,但是在使用上就会发现很大差异。

HTML5中的HistoryAPI是不会使页面跳转的,只是操作地址栏和相应的state属性而已,而且它是手动操作的。浏览器默认的History还是传统的那一套,虽然它们在浏览器上都使用同一个“历史记录堆栈”。    对这个差异的认知就是webkit中诡异行为的原因。webkit并没有把HTML5的History和传统的区分开,而根据官方文档对popstate的描述,只要访问历史记录就会触发popstate。而传统的History中访问页面和生产历史记录是同时的。
所以在webkit中,无论是刷新还是访问一个新网页都会触发popstate。而其它浏览器中这个popstate仅作用于HTML5的History,并不响应传统的History,更不用说刷新和访问新网页的情况了。
网络上看到的能解决这个问题的貌似也只有一个对popstate延迟绑定的方法,因为popstate会在页面加载完成之后不久触发,所以在 setTimeout一段时间后再绑定事件,popstate的第一次就不会轻易被webkit夺走了←_← 。
不过延迟这种东西我一直都觉得不太靠谱,所以还是果断放弃这种方法了。最后只好使用烂方法,判断浏览器再做调整,直接针对webkit在页面加载完成后第一次触发的popstate屏蔽了。不过毕竟是针对浏览器的东西,虽然目前是可以使用,但是如果以后webkit修复了这个BUG就需要修改代码了

//原版本
            changeHistory: function () {
                        var self = this;
                        if (window.history && window.history.pushState) {
                            $(window).on('popstate', function () {
                                var hashLocation = location.hash;
                                var hashSplit = hashLocation.split('#!/');
                                var hashName = hashSplit[1];
                                var hash = window.location.hash;
                                self.showDetentionActivity();
                                self.doExit();
                            });
                            if (window.history.state != 'only') {
                                window.history.pushState('only', null, document.URL);
                            }
                        }
                    }

//修改后
changeHistory: function () {
                        var self = this;
                        if (window.history && window.history.pushState) {
                          function historyEvent() {
                                $(window).on('popstate', function () {
                                    var hashLocation = location.hash;
                                    var hashSplit = hashLocation.split('#!/');
                                    var hashName = hashSplit[1];
                                    var hash = window.location.hash;
                                    self.showDetentionActivity();
                                    self.doExit();
                                });
                            }
                            setTimeout(historyEvent, 2000);

                            if (window.history.state != 'only') {
                                window.history.pushState('only', null, document.URL);
                            }
                        }
                    },

推荐阅读
  • C++ 异步编程中获取线程执行结果的方法与技巧及其在前端开发中的应用探讨
    本文探讨了C++异步编程中获取线程执行结果的方法与技巧,并深入分析了这些技术在前端开发中的应用。通过对比不同的异步编程模型,本文详细介绍了如何高效地处理多线程任务,确保程序的稳定性和性能。同时,文章还结合实际案例,展示了这些方法在前端异步编程中的具体实现和优化策略。 ... [详细]
  • 本指南介绍了如何在ASP.NET Web应用程序中利用C#和JavaScript实现基于指纹识别的登录系统。通过集成指纹识别技术,用户无需输入传统的登录ID即可完成身份验证,从而提升用户体验和安全性。我们将详细探讨如何配置和部署这一功能,确保系统的稳定性和可靠性。 ... [详细]
  • 本文探讨了使用JavaScript在不同页面间传递参数的技术方法。具体而言,从a.html页面跳转至b.html时,如何携带参数并使b.html替代当前页面显示,而非新开窗口。文中详细介绍了实现这一功能的代码及注释,帮助开发者更好地理解和应用该技术。 ... [详细]
  • 在PHP中实现腾讯云接口签名,以完成人脸核身功能的对接与签名配置时,需要注意将文档中的POST请求改为GET请求。具体步骤包括:使用你的`secretKey`生成签名字符串`$srcStr`,格式为`GET faceid.tencentcloudapi.com?`,确保参数正确拼接,避免因请求方法错误导致的签名问题。此外,还需关注API的其他参数要求,确保请求的完整性和安全性。 ... [详细]
  • 本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]
  • 本文总结了JavaScript的核心知识点和实用技巧,涵盖了变量声明、DOM操作、事件处理等重要方面。例如,通过`event.srcElement`获取触发事件的元素,并使用`alert`显示其HTML结构;利用`innerText`和`innerHTML`属性分别设置和获取文本内容及HTML内容。此外,还介绍了如何在表单中动态生成和操作``元素,以便更好地处理用户输入。这些技巧对于提升前端开发效率和代码质量具有重要意义。 ... [详细]
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • VB.net 进程通信中FindWindow、FindWindowEX、SendMessage函数的理解
    目录一、代码背景二、主要工具三、函数解析1、FindWindow:2、FindWindowEx:3、SendMessage: ... [详细]
  • Flutter 2.* 路由管理详解
    本文详细介绍了 Flutter 2.* 中的路由管理机制,包括路由的基本概念、MaterialPageRoute 的使用、Navigator 的操作方法、路由传值、命名路由及其注册、路由钩子等。 ... [详细]
  • Ihavetwomethodsofgeneratingmdistinctrandomnumbersintherange[0..n-1]我有两种方法在范围[0.n-1]中生 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • 本文将继续探讨 JavaScript 函数式编程的高级技巧及其实际应用。通过一个具体的寻路算法示例,我们将深入分析如何利用函数式编程的思想解决复杂问题。示例中,节点之间的连线代表路径,连线上的数字表示两点间的距离。我们将详细讲解如何通过递归和高阶函数等技术实现高效的寻路算法。 ... [详细]
  • 2018 HDU 多校联合第五场 G题:Glad You Game(线段树优化解法)
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6356在《Glad You Game》中,Steve 面临一个复杂的区间操作问题。该题可以通过线段树进行高效优化。具体来说,线段树能够快速处理区间更新和查询操作,从而大大提高了算法的效率。本文详细介绍了线段树的构建和维护方法,并给出了具体的代码实现,帮助读者更好地理解和应用这一数据结构。 ... [详细]
  • 本文详细探讨了JavaScript中数组去重的各种方法,并通过实际代码示例进行了深入解析。文章首先介绍了几种常见的去重技术,包括使用Set对象、过滤方法和双重循环等。每种方法都附有具体的实现代码,帮助读者更好地理解和应用这些技术。此外,文中还讨论了不同方法在性能上的优劣,为开发者提供了实用的参考。 ... [详细]
  • 本指南从零开始介绍Scala编程语言的基础知识,重点讲解了Scala解释器REPL(读取-求值-打印-循环)的使用方法。REPL是Scala开发中的重要工具,能够帮助初学者快速理解和实践Scala的基本语法和特性。通过详细的示例和练习,读者将能够熟练掌握Scala的基础概念和编程技巧。 ... [详细]
author-avatar
xch236
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有