onpopstate浏览器点击回退按钮时触发的事件

知识点:

1、onpopstate事件,点击后退按钮(或者在JavaScript中调用history.back()方法)时触发;

2、hash 属性:可对URL的锚部分(从 # 号开始的部分)进行操作(可读可写);

关于hash的链接点击打开链接

需求:

微信页面,在当前页面点击某处时,弹出一个覆盖整个手机屏幕的层,弹出这个层以后,点击微信屏幕的返回按钮时,隐藏弹出层,而不退出当前页面!

解决方案:

在点击事件发生的时候利用hash属性给URL加上锚点,展示弹出层,而点击返回按钮后,去掉URL锚点,隐藏弹出层;点击返回按钮将触发onpopstate事件;为什么要给URL加锚点?需求描述的所有操作都在同一个页面上,所以如果不在URL上添加锚点,点击展示弹出层后,用户点击微信返回按钮,将退出当前页面!

$(".btn").click(function(){
      location.hash = "win";//给url加上锚点,此锚点会自动加载到url的
      $(".window").show();
      $("#search").focus();
});

checkLocation方法检测URL上是否有锚点win,有锚点则展示弹出层,反之,则隐藏弹出层

function checkLocation(){
        //hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
        if(location.hash.indexOf("#win")>-1){
            $(".window").show();
        }else{
            $(".window").hide();
        }
}
//popstate事件在浏览器操作时触发, 比如点击后退按钮(或者在JavaScript中调用history.back()方法).
 window.onpopstate = function() {
      checkLocation();
 };

简陋的demo

时间: 2024-10-05 22:08:20

onpopstate浏览器点击回退按钮时触发的事件的相关文章

强制浏览器在点击回退按钮时重载刷新页面

最近在项目中有个场景会涉及到此问题,第一反应是通过header控制估计行不通,使用的浏览器为chrome,点击回退时浏览器并不重新请求服务器也不会重新渲染页面.所以服务器header或页面中的meta信息起不了作用.这样以来,就把解决方式定位在了前端来处理,用浏览器的本地存储设置了一个临时标志位,既页面1请求到页面2时,在页面2写入标志位,在页面1里做检查是否有标志位来进行重载刷新判断.思路很明了,因为项目支持的是H5环境,想通用所有浏览器的话,如使用cookie也可达到同样的目的.

jQuery和dom页面加载完成时触发的事件

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="js/jquery-1.8.3.js"></script> 7 <script

Android 手机卫士--安装过程中点击回退按钮

本文地址:http://www.cnblogs.com/wuyudong/p/5903707.html,转载请注明源地址. 在手机卫士之前的版本升级的对话框中: 有的用户暂时不想更新,没有点击“稍后再说”,而是选择点击回退按键,那么这时候的逻辑应该是让用户进入home界面而不是splash界面.所以需要添加代码逻辑来控制,添加的代码如下: builder.setOnCancelListener(new OnCancelListener() { @Override public void onCa

input中的内容改变时触发的事件

onchange事件在内容改变(两次内容有可能相等)且失去焦点时触发: onpropertychange事件是实时触发,每增加或删除一个字符就会触发,通过js改变也会触发该事件,但是该事件是IE专有. oninput事件是IE之外的大多数浏览器支持的事件,在value改变时实时触发,但是通过js改变value时不会触发:基本写原生常用的是oninput. oninput与onpropertychange失效的情况: oninput事件: 1.当脚本中改变value时,不会触发: 2.从浏览器的自

elementUI 下拉框隐藏时触发相关事件(下拉框下拉显示时不触发)

原文:https://blog.csdn.net/CarryBest/article/details/79959389 今天做项目时,用elementUI框架,需要下拉框隐藏时出发某个函数,用了visible-change这个函数,发现点击时会触发两次我自己定义的函数,看了下官网的解释 :下拉框出现/隐藏时触发   如果只想在下拉框隐藏时触发该怎么做呢?下面是解决办法:官网定义:Select Events @visible-change 函数里面传递两个参数(第一个为回调参数,第二个为自己定义的

解决默写浏览器中点击input输入框时,placeholder的值不消失的方法

html中,placeholder作为input的一个属性,起到了在输入框中占位并提示的作用. 但是有一些浏览器,如chrome,当鼠标点击输入框时,placeholder的值不消失,只有输入数据才消失,会使前端用户体验大打折扣. 看了很多大神的方法,写了长长的js,看着有点吃力,就想到了下面这种最傻的方法解决了这个问题. html代码: <input type="text" placeholder="请输入"> 在其中只需加入两个简短的js即可: &l

实现微信朋友圈点击评论按钮时cell上移

实现场景:微信朋友圈TableView(BigTableView)的每一行cell都包含一个SmallTableView(显示所有点赞及评论) 实现思路: //BigTableView的contentOffset.y - (BigTableView的rect.origin.y + SmallTableView的rect.origin.y) CGFloat clickSmallTableViewCellY = BigTableView的rect.origin.y + SmallTableView的

进入网页开始计时,关闭页面时触发操作事件

<html> <head> <title>页面停留时间</title> </head> <body onload="init(); window.setTimeout('show_secs()',1);" > <script language="javascript"> var ap_name = navigator.appName; var ap_vinfo = navigator

使用反射让Spinner选择同一选项时触发onItemSelected事件

翻看源码,Spinner判断是否触发onItemSelected,是在它的基类AdapterView里面做的: void checkSelectionChanged() { if ((mSelectedPosition != mOldSelectedPosition) || (mSelectedRowId != mOldSelectedRowId)) { selectionChanged(); mOldSelectedPosition = mSelectedPosition; mOldSelec