JS实现页面刷新和重新加载功能(关闭当前窗口)

一、刷新或重新加载当前页面

序号方法
1history.go(0)
2location.reload()
3location=location
4location.assign(location)
5document.execCommand(‘Refresh’)
6window.navigate(location)
7location.replace(location)
8document.URL=location.href

1、reload 方法

语法: location.reload([forceGet])
参数: forceGet, 可选参数, 默认为 false,从客户端缓存里取当前页。true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”)

2、 replace 方法

语法: location.replace(URL)
说明: 该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。 通常使用location.reload() 或者是 history.go(0) 来刷新当前页面,此方法类似点F5刷新,所以当method=”post”时,因为Session的安全保护机制,会出现“网页过期”的提示。

例: location.replace(location.href);
其中location.href为当前页面url。


二、返回并刷新前一个页面

window.open(document.referrer,"_parent",''); //已亲测,返回前一个页面并刷新

location.replace(document.referrer);

注:document.referrer 为前一个页面的URL。

返回不刷新前一个页面可以用:
history.go(-1);

history.back();


二、定时刷新(或跳转)页面

1、定时刷新当前页面

每隔3秒刷新一次页面:

<meta http-equiv=“refresh” content=“3”>

2、定时跳转

<meta http-equiv=“refresh” content=“2;url=‘https://www.baidu.com’”>

注:<和meta之间不能有空格。

3、其他方法

(1)延迟执行一次

setTimeout(code, milliseconds)
注: 使用 clearTimeout() 来停止 setTimeout() 的执行。

(2)定时执行

setInterval(code, milliseconds);
注: 使用 clearInterval() 来停止 setInterval 的执行。


三、刷新包含框架的页面

1、刷新包含该框架的页面

<script language=JavaScript>
    parent.location.reload();
</script> 

2、子窗口刷新父窗口

<script language=JavaScript>
    self.opener.location.reload();
</script> 

3、刷新另一个框架的页面

window.parent.frames[1].location.reload();
window.parent.frames.bottom.location.reload();
window.parent.frames[“bottom”].location.reload();
window.parent.frames.item(1).location.reload();
window.parent.frames.item(‘bottom’).location.reload();
window.parent.bottom.location.reload();
window.parent[‘bottom’].location.reload();

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
实现关闭窗口时开关关闭刷新窗口时开关打开的功能,您可以使用以下方法: 1. 在新窗口页面中,使用`localStorage`来存储开关状态。在页面时,检查`localStorage`中是否存在开关状态,并根据状态设置开关的初始值。例如: ```javascript window.onload = function() { // 获取localStorage中的开关状态,如果不存在则设置默认值为true(开启) var switchState = localStorage.getItem('switchState'); if (switchState === null) { switchState = true; } else { switchState = JSON.parse(switchState); } // 设置开关的初始值 var switchElement = document.getElementById('switch'); switchElement.checked = switchState; // 监听开关状态的变化 switchElement.addEventListener('change', function() { // 更新开关状态到localStorage localStorage.setItem('switchState', this.checked); }); // 在新窗口关闭时清除localStorage中的开关状态 window.onbeforeunload = function() { localStorage.removeItem('switchState'); }; } ``` 2. 在Vue项目中,可以使用Vue Router来处理页面刷新事件。在Vue组件中,监听路由的`beforeEach()`钩子函数,在页面刷新时将开关状态设置为打开。例如: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [...] }); router.beforeEach((to, from, next) => { // 在页面刷新时将开关状态设置为打开 localStorage.setItem('switchState', true); next(); }); ``` 通过以上方法,您可以实现关闭窗口时开关关闭刷新窗口时开关打开的功能。请注意,在新窗口中使用`localStorage`来存储开关状态,而在Vue项目中通过Vue Router来处理页面刷新事件。这样可以在不同的窗口页面之间共享开关状态。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值