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

window.location(.href)="URL"

其实 .href 可以省略

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

例如:

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

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

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

winodw.location.assign("URL")

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

用法:

winodw.location.assign()

window.location.replace("URL")

如果用window.location.replace("https://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=https://www.baidu.com/"> </noscript>

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

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

重新加载本页

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

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

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

例如:window.location.replace("https://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="https://www.jb51.net/top.htm" ; parent.bot.location.href="https://www.jb51.net/top.htm"; } < /script> < input type=button name=name value="ksdj" onclick=rs();>

test.html代码

<FRAMESET COLS="150,*"> < FRAME SRC="https://www.jb51.net/left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="https://www.jb51.net/top.htm" name=top> < FRAME SRC="https://www.jb51.net/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页面刷新

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/64f72b1d88145ffe6fe70a7e0683f909.html