JS中实现页面跳转和刷新方法总结

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来实现自动跳转:



复制代码如果要实现 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代码

JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
[javascript] view plain copy print?

//子窗口刷新父窗口
[javascript] view plain copy print?

(或刷新 )

//如何刷新另一个框架的页面用
[javascript] view plain copy print?

如果想关闭窗口时刷新或者想开窗时刷新的话，在中调用以下语句即可。
复制代码jquery方法
$(location).attr(‘href’, ‘http://www.jb51.net’);

$(window).attr(‘location’,‘http://www.jb51.net’);

$(location).prop(‘href’, ‘http://www.jb51.net’)

作者：Fancyer
链接：https://juejin.cn/post/6844903925741682696
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。