返回上一个url并刷新界面的js代码


Posted in Javascript onSeptember 12, 2020

JS 重载页面,本地刷新,返回上一页

<a href="javascript:history.go(-1)" rel="external nofollow" >返回上一页</a>
<a href="javascript:location.reload()" rel="external nofollow" >重载页面,本地刷新</a>
<a href="javascript:history.go(-1);location.reload()" rel="external nofollow" >返回上一页重载页面,本地刷新</a>

history.back();
back();

上面两个方法不行,多次尝试后,用下面的解决了

location.href=document.referrer;

返回前二页并刷新的JS代码应该怎样写。

js 方法

<a href="#" rel="external nofollow" onclick="self.location=document.referrer;">返回</a>

asp自动返回并刷新的方法:

response.Write("<script language=javascript>self.location=document.referrer;</script>")

一般用于向一个页面提交action后返回前一页并刷新!

php做法

echo "<script>alert('退出成功!');location.href='".$_SERVER["HTTP_REFERER"]."';</script>";

设置删除成功后返回前一页,并刷新

if($query)
{
$page="listrenwu.php";
<!---这种方式不会刷新,只会原样返回-->
echo "<script>alert('删除成功');history.go(-1)</script>";
<!--//设置删除成功后返回前一页,并刷新-->-->
echo "<script>alert('删除成功');window.location = "".$page."";</script>";
}

这个算是php教程中最简单的哦,不多说你懂的。

下面是其他网友的补充

使用history.length判断是否有上一页面,如果没有就返回到指定页面

使用history.length判断是否有上一页面,如果没有就返回到指定页面,一般是返回到首页

function goBack(){
  if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)){ // IE
    if(history.length > 0){
      window.history.go( -1 );
    }else{
      window.location.href = "/";
    }
  }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.location.href = "/";
      }
    }else{ //未知的浏览器
      window.history.go( -1 );
    }
  }
}

从这里想到一个用户的特殊需求,那就是在公众号中输入生日后 ,关闭H5,让公众号弹出二维码。当时说不可能,现在看来自己太年轻了。

window.opener=null;
window.close();

接着补充

前言

使用单页面的话 document.referrer 一直为空(.html或者ssr网页则存在值)
History.length 表示用户历史会话页面的数量。当用户从新的标签页或框架载入页面其值为“1”,每访问一个页面该值增加“1”。
因为history.length 的数量只增不减,根本不能拿来做判断。

场景

需要判断用户从微信浏览器通过浏览器打开当前网页,如果是则当用户点击返回按钮时返回到web应用(站点)首页

- 或:是否有前一页
- 通过history.length
- 不准确,如果用户曾经打开过,则会存在更多的history.length
- 如果用户不曾打开过,且直接从微信浏览器再使用系统浏览器打开,则history.length === 1(其中手机浏览器中为1,chrome控制台为2)
- 或:判断用户是否访问过
- 通过cookie或是sessionStorage

- https://oldj.net/blog/2013/08/11/browser-history-sniffing

- 或:判断 history 中是否存在指定url
- 没有找到相关方法
- 或:是否是通过微信浏览器唤醒设备浏览器再打开到当前网页的
- 没有找到相关方法
肯定还有其他方法实现 `当用户点击返回按钮时返回到web应用(站点)首页` 这个功能的,现在脑袋有点晕,如果有的话,也希望能得到分享,非常感谢。
对了,Vuex能否判断呢?实在是没有找到相关方法,或许有。

最后

别忘记监听浏览器的返回事件啦 :

window.addEventListener("popstate", function(e) {
alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能
}, false);

我是如何解决的

当用户在微信中打开web应用(站点)时,则提示用户使用浏览器打开;
再配合Cookie和sessionStorage做缓存了router记录来判断用户点击返回按钮时是否需要直接回到home页;

到此这篇关于返回上一个url并刷新界面的js代码的文章就介绍到这了,更多相关js返回上一个url内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
node.js中的emitter.emit方法使用说明
Dec 10 Javascript
node.js中的fs.readlinkSync方法使用说明
Dec 17 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
Nov 07 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
Vue和React有哪些区别
Sep 12 #Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 #Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 #Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 #Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
vue Cli 环境删除与重装教程 - 版本文档
Sep 11 #Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 #Javascript
You might like
文件系统基本操作类
2006/11/23 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
详解JavaScript模块化开发
2016/12/04 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
微信小程序下拉刷新界面的实现
2017/09/28 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python实现二叉查找树实例代码
2018/02/08 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
python3实现绘制二维点图
2019/12/04 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
机械设计及其自动化专业推荐信
2013/10/31 职场文书
2013英文求职信模板范文
2013/11/15 职场文书
二手书店创业计划书
2014/01/16 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
局火灾防控工作方案
2014/05/25 职场文书
开场白怎么写
2015/06/01 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android