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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
Jun 08 Javascript
浅谈js的url解析函数封装
Jun 28 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 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
PHP数据库操作面向对象的优点
2006/10/09 PHP
如何正确理解PHP的错误信息
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
PHP使用FFmpeg获取视频播放总时长与码率等信息
2016/09/13 PHP
YII框架批量插入数据的方法
2017/03/18 PHP
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
jQuery操作select的实例代码
2012/06/14 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
2013/06/08 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
2017/10/12 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
vue配置多页面的实现方法
2018/05/22 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
[57:31]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第一场 2月1日
2021/03/11 DOTA
浅析Python装饰器以及装饰器模式
2018/05/28 Python
python分批定量读取文件内容,输出到不同文件中的方法
2018/12/08 Python
python 计算数据偏差和峰度的方法
2019/06/29 Python
Python实现自动装机功能案例分析
2020/10/22 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
越南电子产品购物网站:FPT Shop
2017/12/02 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
电影T恤、80年代T恤和80年代服装:TV Store Online
2020/01/05 全球购物
旅游专业职业生涯规划范文
2014/01/13 职场文书
运动会广播稿150字
2014/02/19 职场文书
意向书范本
2014/07/29 职场文书
初中班主任工作总结2015
2015/05/13 职场文书
python pyhs2 的安装操作
2021/04/07 Python
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server