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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js图片自动切换效果处理代码
May 07 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
js获取隐藏元素宽高的实现方法
May 19 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
javascript代码优化的8点总结
Jan 29 Javascript
JavaScript实现京东购物放大镜和选项卡效果的方法分析
Jul 05 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
微信小程序实现点赞业务
Feb 10 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单一接口的实现方法
2015/06/20 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
JavaScript代码性能优化总结(推荐)
2016/05/16 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
2016/11/22 Javascript
JavaScript闭包和范围实例详解
2016/12/19 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
关于在mongoose中填充外键的方法详解
2017/08/14 Javascript
ionic3 懒加载
2017/08/16 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
Python3使用requests发闪存的方法
2016/05/11 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
python实现微信小程序自动回复
2018/09/10 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
详解django中Template语言
2020/02/22 Python
Python使用tkinter实现摇骰子小游戏功能的代码
2020/07/02 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
linux面试题参考答案(11)
2012/05/01 面试题
大学生优秀的自我评价分享
2013/10/22 职场文书
中专自我鉴定
2014/02/05 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
导航工程专业自荐信
2014/09/02 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers
PHP策略模式写法
2021/04/01 PHP
windows server2008 开启端口的实现方法
2022/06/25 Servers