捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接

<html>   

    <head>   
        <meta http-equiv="content-type" content="text/html;charset=utf-8">   
        <title>onhashchange测试</title></head>   

    <body>
            <a href="#p2">p2</a>
    <script>
       document.onmouseover = function() {
            //User‘s mouse is inside the page.
            window.innerDocClick = true;
        }

        document.onmouseleave = function() {
            //User‘s mouse has left the page.
            window.innerDocClick = false;
        }

        window.onhashchange = function() {
            if (window.innerDocClick) {
                //Your own in-page mechanism triggered the hash change
                alert(‘You click a link‘);
            } else {
                //Browser back button was clicked
                alert(‘You click browser button‘);
            }
        }   </script>   
</html>

  

时间: 2024-11-05 16:05:50

捕获浏览器的前进、后退事件 window.onhashchange 并区别于点击链接的相关文章

html5之history对象 控制浏览器前进或后退事件

一.摘要: 总结用history对象操作浏览器的历史记录的方法,在项目中使用的是mui框架,总结中包括我在实际项目中遇到的问题. 二.总结: 实现效果: 实现代码: 上面的编辑页面加载的时候就要先调用一次pushHistory()方法,如果不先调用一遍,在第一次点击浏览器上的返回按钮时,不会弹出提示框,必须在你按过一次手机页面上的返回键之后,你点击了提示框上的取消按钮,你再按浏览器上的返回键页面才能弹出提示框. js关键代码:  下面总结history对象的用法: a)历史记录 前进和后退的方法

模拟浏览器后退事件

在工作中碰到一个需求:点击浏览器的后退按钮时,需要判断当前页面的表单数据是否已保存:如果没保存,就给出提示.但浏览器并没有后退事件,这个项目也没有用什么 MV** 之类的框架或库,用的是 jQuery,于是只能尝试模拟浏览器后退事件. 用的是 H5 中的 pushState 与 popstate,代码如下: var onBrowserBack = function(callback) { var userAgent = navigator.userAgent.toLowerCase(), isS

监听浏览器后退事件,使其转向指定URL

$(function(){ //清空浏览器历史记录 pushHistory(); //监听浏览器后退事件 window.addEventListener("popstate", function(e) { //转向指定的URL location.href=url; }, false); //清空浏览器历史记录 function pushHistory() { var url = "#"; var state = { title: "title",

使用jquery的load方法设计动态加载,并解决浏览器前进、后退、刷新等问题

继上一篇 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题 解决了后台业务系统的部分动态加载问题,然而该框架离正常的用户体验还存在一些问题,如:浏览器的前进.后退.刷新等问题.有博友也遇到了同样的问题,接下来就针对浏览器的前进.后退.刷新进行用户体验优化. 在解决上述问题时也进行了各种search,但是大部分都是自己实现的插件,而且插件年久失修,对于新的jquery支持不佳.也有使用h5新加的history方法来实现的,由于HTML5的广泛使用,绝大部分主

一个简单的例子看明白如何利用window.location.hash实现ajax操作时浏览器的前进/后退功能

我们知道JavaScript中很早就提供了window.history对象,利用history对象的forward().go().back()方法能够方便实现不同页面之间的前进.后退等这种导航功能.但是AJAX操作,是不能用浏览器的前进和后退按钮进行导航的,因为浏览器并不会将AJAX操作加入到历史记录中.但是借助location.hash,我们能够自己实现AJAX操作的前进和后退.关于window.location.hash的详细介绍和使用方式,可以参考下面这2篇文章. location.has

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件

浏览器兼容性系列--浅谈window.attachEvent

以前写 JavaScript 脚本时,事件都是采用object.event = handler;的方式初始化.这种方式对于 Internet Explorer.Mozilla/Firefox 和 Opera 来说很通用.但是有一个问题就是,这种方式只能一个事件对应一个事件处理过程.如果希望一个事件可以依次执行多个处理过程就不好用了.但是 Internet Explorer 从 5.0 开始提供了一个 attachEvent 方法,使用这个方法,就可以给一个事件指派多个处理过程了.attachEv

JS 禁用回车、后退事件、form 表单不可编辑

一: 事件: 初始化函数中: //禁用回车 后退事件 document.onkeydown = function () { if (window.event && (window.event.keyCode == 13 || window.event.keyCode== 8)) { window.event.returnValue = false; } } 二:form 表单不可编辑: $('#myFormId').find('input,textarea,select').attr('r

给浏览器注册自己的事件方法

给浏览器注册事件 (function() { var event = new Event('UIXClick');//注册事件名称 event["data"]='vote';//进行传的参数 event["origin"]='1135443144';//进行传的参数 window.dispatchEvent(event);//将事件注册到window })(); 此时你就可以 想下面一样去监听自己的事件 window.addEventListener('UIXCli