JS基于Location实现访问Url、重定向及刷新页面的方法分析


Posted in Javascript onDecember 03, 2018

本文实例讲述了JS基于Location实现访问Url、重定向及刷新页面的方法。分享给大家供大家参考,具体如下:

js通过Location实现访问Url,重定向,刷新页

web中经常会使用到刷新页面,访问url、重定向请求的功能。

javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的。它是作为window对象的属性。你可以生成一个包含当前url的新location对象:

var currentURL=window.location;

在这片文章你将看到location对象的所有属性和方法,你将学到:

  • 怎么读取url不同部分
  • 怎么重定向网页
  • 怎么自动刷新或重载页面.

1.分析url

URL有6部分组成,一些是可选的:

<协议>//<域名>:<端口>/<路径><查询参数><hash>
<protocol>//<hostname>:<port>/<pathname><search><hash>

协议和域名是必须项,其它是可选项。

下面是一个包含所有部分的URL例子:

http://www.example.com:80/example.cgi?x=3&y=4#results

在这个例子中, http: 是 协议, www.example.com 是 域名, 80 是端口, /example.cgi 是路径, ?x=3&y=4是查询字符串, #results是hash, 或页面内部的锚点.

2.通过Location读取当前的URL

你可以使用location对象的protocol,hostname,port,pathname,search,hash属性访问URL各个部分。你还可以使用下面属性:

host
  包含域名和端口例如: www.example.com:80

href
  包含整个URL例如:http://www.example.com:80/example.cgi?x=3&y=4#results

示例:

var currentURL=window.location;
alert(currentURL.href);//Displays'http://www.example.com:80/example.cgi?x=3&y=4#results'
alert(currentURL.protocol);//Displays'http:'
alert(currentURL.host);//Displays'www.example.com:80'
alert(currentURL.hostname);//Displays'www.example.com'
alert(currentURL.port);//Displays'80'
alert(currentURL.pathname);//Displays'/example.cgi'
alert(currentURL.search);//Displays'?x=3&y=4'
alert(currentURL.hash);//Displays'#results'

3.使用Location操作URL

你可以使用location的href属性,把页面跳转到不同于当前页面的页面。

window.location.href="http://www.example.com/anotherpage.html" rel="external nofollow" ;

示例:

<input type="button" onclick="window.location.href='http://www.google.com/'"
value="Visit www.google.com"/>

使用Location的href属性跳转页面,前一页的Url会保存在浏览器的history历史中。当用户点击浏览器的“后退”按钮可以返回前一页。如果你不想让返回前一页可使用Location.replace()代替:

window.location.replace("http://www.example.com/anotherpage.html");

除了可以将页面重定向不用的页面,还可重定向当前页面不同的锚点

window.location.hash="#moreResults";

例如:

<input type="button" onclick="window.location.hash='#top'"
value="Jump to the top of the page"/>

在页面有个名为#top的锚点。点击按钮时浏览器会移动到顶部。注意观察浏览器地址栏的变化,当你点击浏览器后退按钮可回到前一位置。

4.重载刷新页面

可以调用Location.reload()强制浏览器重新刷新当前URL.就像当前用户点击浏览器的刷新按钮或F5一样。

window.location.reload();

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

window.location.reload(true);

简单示例:

<input type="button" onclick="window.location.reload()"
value="Reload the page"/>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
自己的js工具 Cookie 封装
Aug 21 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
详解vue.js移动端导航navigationbar的封装
Jul 05 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
koa2实现登录注册功能的示例代码
Dec 03 #Javascript
react-router 路由切换动画的实现示例
Dec 03 #Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 #Javascript
ng-zorro-antd 入门初体验
Dec 03 #Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
浅谈ng-zorro使用心得
Dec 03 #Javascript
You might like
PHP 和 HTML
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php获取客户端电脑屏幕参数的方法
2015/01/09 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP区块查询实现方法分析
2018/05/12 PHP
javascript引用对象的方法代码
2007/08/13 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
2019/07/19 Javascript
微信小程序中weui用法解析
2019/10/21 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
python 布尔操作实现代码
2013/03/23 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
numpy.array 操作使用简单总结
2019/11/08 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
python如何使用代码运行助手
2020/07/03 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
大学生求职工作的自我评价
2014/02/13 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
婚内房产协议书范本
2014/10/02 职场文书
2014年服装销售工作总结
2014/11/27 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android