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

2023-08-15 15:21:04 163

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/');这样可以跳转到指定的路由模块

metarefresh

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

如果要实现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的，不适用于火狐等其他浏览器，在HTMLDOMWindowObject中，根本没有列出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的话，也可以将parentselftop换为自定义frame的名称，效果就是在自定义frame窗口打开url。

示例：

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

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

top.html代码


functionrs(){
if(top!==self){
top.location.href=location.href;
}
parent.left.location.href="top.htm";
parent.bot.location.href="top.htm";
}

test.html代码

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

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页面刷新

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

自动刷新

页面自动刷新：把如下代码加入区域中

其中2指每隔2秒刷新一次页面.

页面自动跳转：把如下代码加入区域中

其中2指隔2秒后跳转到http://www.baidu.com页面

JS实现页面自动刷新


setTimeout('window.location.reload()',1000)//指定1秒刷新一次


JS刷新框架的脚本语句

//如何刷新包含该框架的页面用
[javascript]viewplaincopyprint?

parent.location.reload();


//子窗口刷新父窗口
[javascript]viewplaincopyprint?

self.opener.location.reload();

(或刷新)

//如何刷新另一个框架的页面用
[javascript]viewplaincopyprint?

parent.另一FrameID.location.reload();


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

jquery方法

$(location).attr('href','//www.nhooo.com');

$(window).attr('location','//www.nhooo.com');

$(location).prop('href','//www.nhooo.com')

总结

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

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

热门推荐

随机推荐