简介

在某些数据查询页面,点击某条数据查看详细信息,如果此时列表数据有更新(新增、修改、删除等),当点击浏览器的返回按钮时,查看的数据仍然是旧的数据,原因是返回时,查看的是浏览器的缓冲数据,并不会从数据库中重新查询。为了解决这个问题,我研究出了一段可以避免这种脏数据的脚本,只需要在查询页面加入一段脚本即可。我将这段脚本写在了一个nohistory.js的文件中,在查询页面引入即可实现实时最新数据。

JavaScript脚本代码展示

/**

* 在引入该js文件时,可以传递model参数,表示刷新模式:

* strict或1:严格模式(默认值),所有点击后退或前进按钮的方式进入页面都会刷新

* loose或0:宽松模式,只针对点击某元素的方式离开页面才会刷新

* 示例:<script src="nohistory.js?model=0"></script>

* 注:该插件只对get(查询)请求方式有效!

*/

(function(id, refresh) {

var hisgory = performance.navigation.type === 2,

scripts = document.scripts,

src = scripts[scripts.length - 1].src,

// 宽松模式检测

loose = /model\s*=\s*(?:loose|0)/.test(src);

if (loose) {

document.write('<input type="hidden" id="' + id + '" autocomplete="on" />');

var element = document.getElementById(id);

function addEvent(e, type, fn) {

typetype = type.toLowerCase().replace(/^on/, "");

if (e.addEventListener) {

e.addEventListener(type, fn);

} else if (e.attachEvent) {

e.attachEvent("on" + type, fn);

} else {

e["on" + type] = fn; // IE5

}

}

function removeEvent(e, type, fn) {

typetype = type.toLowerCase().replace(/^on/, "");

if (e.removeEventListener) {

e.removeEventListener(type, fn);

} else if (e.detachEvent) {

e.detachEvent("on" + type, fn);

} else {

e["on" + type] = null; // IE5

}

}

function mark() {

element.value = "1";

}

var binded = false;

addEvent(window, "mousedown", function() {

if (!binded) {

binded = true;

addEvent(window, "beforeunload", mark);

}

});

addEvent(window, "mouseout", function(e) {

ee = e || window.event;

var tagName = e.target.tagName;

if (binded && (tagName == "BODY" || tagName == "HTML")) {

binded = false;

removeEvent(window, "beforeunload", mark);

}

});

// 排除“F5”和“Ctrl+R”刷新

addEvent(document, "keydown", function(e) {

ee = e || window.event;

if (e.keyCode == 116 || e.ctrlKey && e.keyCode == 82) {

removeEvent(window, "beforeunload", mark);

}

});

// Compatible IE

addEvent(document, "readystatechange", function() {

if (document.readyState === "complete" && element.value && hisgory) {

refresh();

}

});

} else if (hisgory) {

refresh();

}

})("nohistory_v2.0, code by chenqi@1000phone.com in 2017.12.07", new Function("location+=''"));

使用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>浏览器返回、前进回到该页面自动刷新</title>

<script type="text/javascript" src="js/nohistory.js"></script>

</head>

<body>

...

</body>

</html>

Javascript脚本之清除浏览器历史数据相关推荐

  1. java清除浏览器记录_Javascript脚本之清除浏览器历史数据

    简介 在某些数据查询页面,点击某条数据查看详细信息,如果此时列表数据有更新(新增.修改.删除等),当点击浏览器的返回按钮时,查看的数据仍然是旧的数据,原因是返回时,查看的是浏览器的缓冲数据,并不会从数 ...

  2. ie浏览器运行JavaScript脚本打开Chrome浏览器ie配置启用ActiveX控件配置

    IE打开chrome浏览器脚本 window.onload=function () {var objShell = new ActiveXObject("WScript.Shell" ...

  3. JavaScript脚本语言介绍并实现第一个Hello World程序

    1.JavaScript是Web页面中的一种脚本编程语言,也是一种通用的.跨平台的.基于对象和事件驱动并具有安全性的脚本语言,具有与Java类似的语法.它不需要进行编译,而是直接嵌入在HTML页面 ...

  4. 清除所有浏览器历史数据脚本_不要让浏览器吸收所有数据

    清除所有浏览器历史数据脚本 一些工具可以帮助您私下浏览网页 (A few tools to help you surf the web privately) In the aftermath of F ...

  5. javascript学习随笔(编写浏览器脚本 Navigator Scripting )

    在 HTML 中使用JavaScript JavaScript能以两种方式嵌入HTML: 作为语句和函数使用时,用 SCRIPT 标记 作为事件处理程序使用时,用 HTML 标记 SCRIPT 标记 ...

  6. 谷歌浏览器如何启用java小脚本_各种浏览器开启JavaScript脚本方法

    随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站体验差或网站部分功能无法使用 下面提供10种 ...

  7. java 打开网页并运行脚本_各种浏览器开启JavaScript脚本方法

    1.单击右上角的齿轮图标.从出现的菜单中选择Internet 选项. 2.单击安全选项卡.单击窗口底部的自定义级别按钮,弹出安全设置对话框. 3.找到脚本目录.单击JAVA 小程序下的启用选项,选择此 ...

  8. qq 浏览器不支持java_各种浏览器开启JavaScript脚本方法

    随着网站设计技术的发展,为了用户友好体验,大部分网站使用了JavaScript脚本设计,如果您的浏览器禁用或关闭的JavaScript支持,那么可能造成网站体验差或网站部分功能无法使用. 下面提供10 ...

  9. vba 执行网页javascript_《SeleniumBasic 3.141.0.0 - 在VBA中操作浏览器》系列文章之十九:执行JavaScript脚本...

    SeleniumBasic中的IWebDriver对象的ExecuteScript方法用于执行JavaScript脚本.语法如下 Function ExecuteScript(script As St ...

  10. Edge 浏览器开发 JavaScript 脚本

    最近有在尝试开发简单的油猴脚本,用于帮助我实现一些简单的自动话操作. 直接在油猴提供的编辑器里面写代码其实体验已经很好了,但是它也有一些缺点,就是我在想要运行代码的时候总是要经历 ·保存·->· ...

最新文章

  1. 编译phonetisaurus时configure找不到openfst的问题解决
  2. 设计模式-静态工厂之服务提供者框架
  3. ios 重复引用 静态库_iOS-如果静态库(.a)包含重复的目标文件(.o),会发生什么?
  4. 达不达标的公式计算机,“我面试了几十个大学生都不达标,连这3个Excel公式都看不懂”...
  5. 携程SQL面试题忘大牛解答解决思路
  6. leetcode题解50-Pow(x,n)
  7. es6删除数组某一项_「JavaScript 从入门到精通」10.数组
  8. Win8系统搜索不到无线信号该怎么办?
  9. 【路径规划】基于matlab遗传算法多车辆路径规划【含Matlab源码 704期】
  10. 中国科学院大学计算机在职博士招生,中国科学院在职博士研究生如何报考?
  11. 离散小波变换wavedec matlab,matlab小波变换指令及其功能介绍.docx
  12. MIMO技术杂谈(一)浅谈分集与复用的权衡_akala啦_新浪博客
  13. java mars2_Mars-java 2.2.2 发布,不需要容器的 Java Web 开发框架
  14. 最短路Dijkstra+Floyd
  15. 【机器学习】机器学习泛泛之谈
  16. 第一届华数杯A题完整思路分享
  17. 【备忘】传智播客ios第五期
  18. OpenWrt 系统定制WR841N Reset Button不工作
  19. 有了这些工具,可以助我工作效率起飞,强烈建议收藏!!
  20. 头号音频对齐插件 VocAlign Project 5 发布

热门文章

  1. 使用 Flink Hudi 构建流式数据湖平台
  2. python基础知识——异常
  3. gitee怎么看用户名_怎么优雅的写博客 Typora + picGo
  4. python中node函数的意思_Node.js 函数
  5. 安卓 删除事件弹出消息框_微信更新,朋友圈可以删除好友评论了?网友:杠精终于可以删了...
  6. 可以两个人协作一个项目吗_两个人分手了,还可以继续做朋友吗?
  7. SpringBoot在前端发送url时,不能识别特殊字符的问题
  8. dfs.datanode.directoryscan.throttle.limit.ms.per.
  9. 都昌信息袁永福:利用电子病历赋能框架,为健康医疗大数据打好基础【电子病历和健康医疗大数据系列】...
  10. 故障处理,no space left on device!几种可能性?