window.history.go(-1)回退未刷新问题

一、前言

window.history 是浏览器提供的一个对象，用于处理浏览器的历史记录。通过这个对象，你可以执行前进、后退、刷新等操作。

window.history 对象包含以下方法：

back()：返回上一个历史记录，页面会刷新。
forward()：前进到下一个历史记录，页面会刷新。
go(num)：跳转到某一个历史记录，num为1表示前进，为-1表示后退。
pushState(stateData, title, url)：在历史记录中创建一个新的访问记录，不能跨域，且不造成页面刷新。
replaceState(stateData, title, url)：修改当前记录，不能跨域，且不造成页面刷新。
window.history 对象也包含以下属性：

length：返回浏览器历史堆栈的长度。
state：返回与指定的历史记录条目关联的状态对象。这通常与pushState或replaceState方法一起使用。
此外，window.history 对象还触发 popstate 事件，当调用go、back、forward方法时触发，pushState、replaceState不会触发。同时，window.onhashchange事件可以监听锚部分（以 ‘#’ 号为开始）发生改变的情况，例如通过设置Location对象的location.hash或location.href属性修改锚部分、使用不同history操作方法到带hash的页面、点击链接跳转到锚点等情况。

二、方法梳理

window.location.reload();    //刷新  
window.history.go(1);        //前进  
window.history.go(-1);       //返回+刷新  
window.history.forward();    //前进  
window.history.back();       //返回

采用window.history.go(-1)时，页面未刷新，使用以下方法解决

window.onload = function () {
  var isPageHide = false;
  // 页面加载（是没有刷新页面的，跟页面刷新有着本质的不同）
  window.addEventListener('pageshow', function () {
    if (isPageHide) {
      window.location.reload();
    }
  });
  window.addEventListener('pagehide', function () { 
    isPageHide = true;
  });
};

三、后记

JavaScript是一种面向对象的动态编程语言，用于为网页添加交互和动态效果。它可嵌入到HTML文档中，并通过浏览器解释执行。

以下是JavaScript的一些详细概念：

变量：JavaScript中的变量用于存储数据。变量可以通过关键字var来声明，并且可以存储各种类型的数据，如数字、字符串、布尔值等。
数据类型：JavaScript支持多种数据类型，包括数字(Number)、字符串(String)、布尔(Boolean)、对象(Object)、数组(Array)等。
运算符：JavaScript支持各种运算符，如算术运算符(+、-、*、/等)、比较运算符(==、!=、>、<等)、逻辑运算符(&&、||、!等)等。
控制流程：JavaScript中的控制流程语句包括条件语句(if、else if、else)、循环语句(for、while)和跳转语句(continue、break)等，用于控制程序的执行流程。
函数：JavaScript中的函数是一段可重复使用的代码块，用于封装一些特定的功能。函数可以有参数和返回值，可以通过关键字function来定义。
事件：JavaScript可以通过事件来响应用户的操作，如点击按钮、鼠标移动等。可以使用addEventListener()函数来为元素绑定事件，并在事件触发时执行相应的代码。
DOM操作：JavaScript可以通过DOM(Document Object Model)来操作网页的元素。可以通过getElementById()、getElementsByClassName()等方法来获取元素，并对其进行操作或修改。
AJAX：JavaScript可以使用AJAX技术与服务器进行异步通信，实现无需刷新页面的数据交互。可以使用XMLHttpRequest对象或fetch函数来发送请求，并在获取到响应后处理数据。

一、前言

二、方法梳理

三、后记

四、热门文章