JavaScript根据浏览器类型判断是否回退或关闭页面
作者:像素猫时间:2026-10-28 13:09:21浏览:465
本文介绍如何在Web项目中处理页面返回逻辑:当无历史记录时关闭页面,否则执行回退。由于不同浏览器对history.length的返回值存在差异(IE为0,非IE通常为1),通过判断用户代理字符串区分浏览器类型,分别处理回退或关闭操作,确保跨浏览器兼容性。
页面返回与关闭逻辑需求
在Web开发中,常需实现一种交互逻辑:若当前页面没有前驱历史记录(即新弹出窗口,无法执行返回操作),点击返回按钮时应直接关闭当前页面;若存在历史记录,则跳转至前一页。
基于history.length的浏览器兼容判断
核心难点在于如何准确判断是否存在可回退的历史记录。由于缺乏直接获取该状态的API,通常需借助history.length变量进行间接判断。然而,不同浏览器对该变量的返回值定义存在差异:在IE浏览器中,history.length返回0;而在非IE浏览器中,其值通常为1。基于此差异,编写了一个兼容各浏览器的函数以实现上述功能,供开发者参考使用。
/**
* 返回前一页(或关闭本页面)
* <li>如果没有前一页历史,则直接关闭当前页面</li>
*/
function goBack(){
if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE
if(history.length > 0){
window.history.go( -1 );
}else{
window.opener=null;window.close();
}
}else{ //非IE浏览器
if (navigator.userAgent.indexOf('Firefox') >= 0 ||
navigator.userAgent.indexOf('Opera') >= 0 ||
navigator.userAgent.indexOf('Safari') >= 0 ||
navigator.userAgent.indexOf('Chrome') >= 0 ||
navigator.userAgent.indexOf('WebKit') >= 0){
if(window.history.length > 1){
window.history.go( -1 );
}else{
window.opener=null;window.close();
}
}else{ //未知的浏览器
window.history.go( -1 );
}
}
}
作者最新文章
js-cookie 安装与基础用法:set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目:制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式:设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件?
2026-11-05 09:37:58
