JS实现页面跳转与刷新的方法汇总


Posted in Javascript onAugust 30, 2019

window.location(.href)="URL"

其实 .href 可以省略

window.location window.location.href 实现的效果是一样的

例如:

window.location = "http://www.baidu.com"
window.location.href = http://www.baidu.com

上面两种方法都可以从当前页面跳转到目标页面

不同之处在于 window.location 返回的是对象,如果没有.href,它会默认参数就是href

winodw.location.assign("URL")

这个方法和上面的方法差不多

用法:

winodw.location.assign(http://www.baidu.com)

window.location.replace("URL")

如果用window.location.replace("http://www.baidu.com") 实现跳转页面, 它和上面方法的区别在于它跳转后不会保存跳出页面的信息.

所以如果使用 history 历史返回按钮是无效的

它的效果类似于在网页上点击右键, 在新窗口打开或新标签页打开.

window.location.href 实现的效果是在页面上点击目标链接, 然后可以点击历史返回按钮, 返回到之前页面。

历史页跳转

下面的两种方法都可以实现返回历史页,相当于点了页面左上角的返回按钮

window.history.back();
window.history.go(-1);

back和go里面都可以放数值

例如:里面放上 -1 意思就是返回上一级,里面放上 -2 就是返回上上级,以此类推
而且里面还可以放上指定的路由路径,比如 window.history.go('../routes/admin/'); 这样可以跳转到指定的路由模块

meta refresh

如果用户浏览器禁用了javascript, 那么可以用meta refresh来实现自动跳转:

<noscript>
	<meta http-equiv="refresh" content="0;URL=http://www.baidu.com/">
</noscript>

如果要实现 JS 自动跳转,可以加个定时器:

setTimeout(function(){ ... }, 1000);

重新加载本页

如果你的代码逻辑执行完了,想要重新加载页面的话,可以用这两种方法:

window.location.reload()
window.location.replace()

这两种方法都可以重新加载本页,但是replace()可以导向另外一个URL

例如:window.location.replace("http://www.baidu.com")

window.navigate('URL')

window.navigate('URL') 这个方法是只针对IE的,不适用于火狐等其他浏览器,在HTML DOM Window Object中,根本没有列出window.navigate这个方法,所以这个方法尽量少用,遗忘最好。

self、parent、this、top

top.location.href=”url”   在顶层页面打开url(跳出框架) 
self.location.href=”url”  仅在本页面打开url地址 
parent.location.href=”url”  在父窗口打开Url地址 
this.location.href=”url”  用法和self的用法一致

if (top.location == self.location) 判断当前location是否为顶层 来禁止frame引用,如果页面当中有自定义的frame的话,也可以将parent self top换为自定义frame的名称 ,效果就是在自定义frame窗口打开url。

示例:

if(top != self){
	top.location.href = location.href;
}	//禁止frame引用

以下是从网上找到的一个例子,不是很直观, 你可以加上上面那三行代码, 可以先去掉, 再加上, 看一下效果,应该就清楚了

top.html代码

<script language=javascript>
 function rs(){
  if(top !== self){
   top.location.href = location.href;
  }
  parent.left.location.href="top.htm" ;
  parent.bot.location.href="top.htm";
 }
< /script>
< input type=button name=name value="ksdj" onclick=rs();>

test.html代码

<FRAMESET COLS="150,*">
	< FRAME SRC="left.htm" name=left>
	< FRAMESET ROWS="150,*">
		 < FRAME SRC="top.htm" name=top>
		 < FRAME SRC="bot.htm" name=bot>
	< /FRAMESET>
< /FRAMESET>

尝试一下,可能是这样的效果!

top表示主窗口,location表示当前窗口,如果你的文件只有一个框架,没有iframe和frame,那么是完全一致的,没有区别。

top.location是在顶层frame中打开新页

window.location是在当前frame中打开新页

parent.location在当前窗口的父窗口打开Url地址

JS页面跳转和刷新的几种方式

页面跳转

window.location.href="index.php"; 
window.history.back(-1);//类似于按钮,参数是负几,就后退几次。 
window.navigate("index.jsp"); //navigate对象包含有关浏览器的信息,也可以作为页面跳转,后面直接加要跳转的地方。 

self.location.href=index.htm; 
//self指代当前窗口对象,属于window最上层的对象; 
//location.href 指的是某window对象的URL地址. 
//self.location.href指当前窗口的URL地址,去掉self默认为当前窗口的URL地址. 

top.location=index.php; 
//top 属性返回最顶层的先辈窗口。 
//该属性返回队一个顶级窗口的只读引用。 
//如果窗口本身就是一个顶级窗口,top 属性存放对窗口自身的引用。 
//如果窗口是一个框架,那么 top 属性引用包含框架的顶层窗口。

location.replace(document.referrer); 
document.referrer 
history.go(-1);//不刷新页面 
history.back();//不刷新页面

Javascript页面刷新

1 history.go(0) 
2 location.reload() 
3 location=location 
4 location.assign(location) 
5 document.execCommand('Refresh') 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href

自动刷新

页面自动刷新:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="2">
其中2指每隔2秒刷新一次页面.

页面自动跳转:把如下代码加入<head>区域中
<meta http-equiv="refresh" content="2;url=http://www.baidu.com">
其中2指隔2秒后跳转到http://www.baidu.com页面

JS实现页面自动刷新

<script language="JavaScript"> 
 setTimeout('window.location.reload()',1000) //指定1秒刷新一次 
</script> 

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用 
[javascript] view plain copy print?
<script language=JavaScript> 
 parent.location.reload(); 
</script> 

//子窗口刷新父窗口
[javascript] view plain copy print?
<script language=JavaScript> 
 self.opener.location.reload(); 
</script> 
(或<a href="javascript:opener.location.reload()">刷新</a> ) 

//如何刷新另一个框架的页面用 
[javascript] view plain copy print?
<script language=JavaScript> 
 parent.另一FrameID.location.reload(); 
</script> 

如果想关闭窗口时刷新或者想开窗时刷新的话,在<body>中调用以下语句即可。

jquery方法

$(location).attr('href', '//3water.com');

$(window).attr('location','//3water.com');

$(location).prop('href', '//3water.com')

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
js拖拽的原型声明和用法总结
Apr 04 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
微信小程序 自定义Toast实例代码
Jun 12 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
Vue脚手架编写试卷页面功能
Mar 17 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
JSONP 的原理、理解 与 实例分析
May 16 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 #Javascript
java实现单链表增删改查的实例代码详解
Aug 30 #Javascript
vuex vue简单使用知识点总结
Aug 29 #Javascript
js中的this的指向问题详解
Aug 29 #Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 #Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 #Javascript
微信小程序实现购物车代码实例详解
Aug 29 #Javascript
You might like
兼容firefox,chrome的网页灰度效果
2011/08/08 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
Python遍历指定文件及文件夹的方法
2015/05/09 Python
python Django框架实现自定义表单提交
2016/03/25 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
python实现本地图片转存并重命名的示例代码
2018/10/27 Python
Django实现学生管理系统
2019/02/26 Python
对python中基于tcp协议的通信(数据传输)实例讲解
2019/07/22 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
2013/08/06 HTML / CSS
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
如何设置Java的运行环境
2013/04/05 面试题
八年级英语教学反思
2014/01/09 职场文书
大学军训感言800字
2014/02/27 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers