JavaScript 页面刷新方式汇总
目录
history. go( 0 )
location. assgin( url )
location. replace( newURL )
自动间隔刷新
location. href = URL
location.reload( force )
window.open
history. go( 0 )
1、history对象有一个go()方法,go() 方法可加载历史列表中的某个具体的页面。
2、语法:history.go(number|URL)
3、说明:URL 参数使用的是要访问的 URL,或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。
4、加载历史列表中的前一个页面:window.history.go(-1),刷新当前页面 history.go(0);
<!DOCTYPE html>
<html lang="en">
<head><!-- 第一个meta指定编码,IDEA新建默认就有的,与Bootstarp无关--><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,只需去复制来即可BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {/** 刷新当前页面*/$("#refresh").click(function () {history.go(0);});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
location. assgin( url )
1、定义和用法:assign() 方法可加载一个新的文档。
2、语法:location.assign(URL)
3、当前页面加载百度首页:location.assign("http://www.baidu.com");
<!DOCTYPE html>
<html lang="en">
<head><!-- 第一个meta指定编码,IDEA新建默认就有的,与Bootstarp无关--><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,只需去复制来即可BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/** 刷新当前页面* 将当前页面地址传入即可*/location.assign(location.href);});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
location. replace( newURL )
1、定义和用法:replace() 方法可用一个新文档取代当前文档。
2、语法:location.replace(newURL)
3、说明:replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。
4、用百度首页替换当前文档:location.replace("http://www.baidu.com");
<!DOCTYPE html>
<html lang="en">
<head><!-- 第一个meta指定编码,IDEA新建默认就有的,与Bootstarp无关--><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,只需去复制来即可BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/** 刷新当前页面* 将当前页面地址作为新文档地址传入即可*/location.replace(location.href);});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
自动间隔刷新
1、使用:<meta http-equiv="refresh" content="x"> 元信息设置,即每间隔 x 秒之后刷新当前页面
<!-- 3秒之后跳转到百度首页-->
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- 间隔1秒刷新当前页面--><meta http-equiv="refresh" content="1"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
location. href = URL
1、定义和用法:href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL。
2、因此可以通过为该属性设置新的 URL,使浏览器读取并显示新的 URL 的内容。
3、语法:location.href=URL
4、当前页面上打开百度首页:location.href = "http://www.baidu.com";
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/*** 将当前页面地址作为新地址即可刷新当前页面* @type {string}*/location.href = location.href;});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
location.reload( force )
1、定义和用法:reload() 方法用于重新加载当前文档。这是实际开发中刷新页面常用的方式。
2、语法:location.reload(force)
2.1)如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。
2.2)如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/** 将当前页面地址作为新地址即可刷新当前页面** 如果要强制收刷新,则为: location.reload(true);*/location.reload();});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
window.open
1、定义和用法:open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
2、语法:window.open(URL,name,features,replace)
3、在新窗口中打开百度首页:window.open("http://www.baidu.com");
参数 | 描述 |
---|---|
URL | 一个可选的字符串,声明了要在新窗口中显示的文档的 URL。如果省略了这个参数,或者它的值是空字符串,那么新窗口就不会显示任何文档。 |
name | 一个可选的字符串,该字符串是一个由逗号分隔的特征列表,其中包括数字、字母和下划线,该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。在这种情况下,features 将被忽略。 |
features | 一个可选的字符串,声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。在窗口特征这个表格中,我们对该字符串的格式进行了详细的说明。 |
replace |
一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值:
|
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!-- BootCDN提供了很多如JQuery、Chart.js、ECarts.js等等,BootCDN官网地址:http://www.bootcdn.cn/--><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">$(function () {$("#refresh").click(function () {/**在新窗口中打开本页面*/window.open(location.href);});});</script>
</head>
<body>
<button id="refresh">刷新</button>
</body>
</html>
JavaScript 页面刷新方式汇总相关推荐
- js怎么打开一个html文件怎么打开方式,JavaScript实现打开链接页面的方式汇总
在页面中的链接除了常规的方式以外,如果使用javascript,还有很多种方式,下面是一些使用javascript,打开链接的几种方式: 1.使用window的open方法打开链接,这里可是在制定页面 ...
- .NET 页面刷新方式总结
先看看ASP.NET页面刷新的实现方法: 第一: private void Button1_Click( object sender, System.EventArgs e ) { Response. ...
- js(javascript)页面刷新
javascript refresh page 几种页面刷新的方法 本节内容:Javascript刷新当前页面的方法与实例. window.location.reload(),window.histo ...
- javascript 页面刷新
Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location. ...
- JavaScript页面刷新的方法
1,reload方法 该方法强迫浏览器刷新当前页面. 语法:location.reload() 2,replace方法 当使用replace方法之后,不能通过"前进"和" ...
- javascript页面刷新与定时跳转页面
1.页面自动刷新:把以下代码放入<head>区域中 <meta http-equiv="refresh" content="20"> 其 ...
- html-javascript前端页面刷新重载的方法汇总
记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...
- HTML页面刷新及其应用例子
HTML页面刷新及其应用例子 刷新一般指重新载入当前页面.本文先给出html页面刷新重载方法汇总,再给出示例. html页面刷新重载方法汇总 一.javascript页面刷新重载的方法: <a ...
- 各种页面刷新代码大全,asp/javascript刷新页面代码
页面自动刷新代码大全,基本上所有要求自动刷新页面的代码都有,大家可以自由发挥做出完美的页面. 1) 10表示间隔10秒刷新一次 2) <script> window.location.re ...
- ❗HTML引入JavaScript的三种常用方式汇总❗
引言 JavaScript是一门脚本语言,虽然名字里有Java,但是和Java没有一点关系,它原名是LiveScript:现在的前端JavaScript可以说是异常火爆,但是博主本人并不准备向前端发展 ...
最新文章
- libpcap介绍(一)
- 使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览
- php 是否包含 大写,PHP检查字符串中是否包含大写字符
- 【电子信息复试】考研复试常考问题——操作系统
- 好想学python下载_Python | 从零开始学(1)
- 整数因子分解c语言递归,整数因子分解:计算一个整数所有的分解式(递归实现)...
- oracle10g如何导出dmp,Oracle 10g dmp文件的导入导出
- 【转载】大规模网站架构实战之体系结构
- Python: 如何将py文件转成exe文件?
- web怎么在圆圈里画半html,在WEB里绘制爱心
- python合并相同内容单元格_快速合并单元格相同项的内容
- 从事IT业一个8年老兵转行前的自我总结1——初爻
- 课程体系包括哪些要素_大数据课程体系和课程内容建设研究
- PHP自学教程之PHP语法基础
- Python入门题031:excel表格筛选重复数据
- 中台战略-第四章、企业中台5大成功要素
- Java中一次对象的自我拯救探究
- Whitelabel Error Page
- 微信小程序中的onLoad
- JAVA通过Hutool解析CSV文件【导入即用,无需封装】
热门文章
- 拓端tecdat|r语言有限正态混合模型EM算法的分层聚类、分类和密度估计及可视化
- 拓端tecdat|R语言用泊松Poisson回归、GAM样条曲线模型预测骑自行车者的数量
- Java read failed_android-获取java.io.IOException:读取失败,套接...
- Java web技术及应用答案_超星《Java Web应用开发技术》答案
- pandas获取符合条件值的索引
- 深度学习中的Precision和Recall,AP,mAP
- Linux学习笔记(9)
- 面试必会 MySql的锁机制(InnoDB)
- opencv学习之------在算法设计中使用策略模式
- 计算机爱好者协会义务维修的目的,计算机协会义务维修活动总结范文