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 相关文章推荐
javascript 写类方式之七
Jul 05 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
轮播图组件js代码
Aug 08 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 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-fpm 参数的深入理解
2013/06/03 PHP
PHP实现微信公众平台音乐点播
2014/03/20 PHP
Yii使用find findAll查找出指定字段的实现方法
2014/09/05 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
8个必备的PHP功能开发
2015/10/02 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
PHP队列场景以及实现代码实例详解
2021/02/26 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
2013/11/22 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
2016/11/02 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
vue中activated的用法
2021/01/03 Vue.js
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
Python中表示字符串的三种方法
2017/09/06 Python
pandas中Timestamp类用法详解
2017/12/11 Python
Python切片操作实例分析
2018/03/16 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python 实现list或string按指定分段
2019/12/25 Python
Python的历史与优缺点整理
2020/05/26 Python
python中PyQuery库用法分享
2021/01/15 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
澳大利亚床上用品、浴巾和家居用品购物网站:Bambury
2020/04/16 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
高中生自我评语大全
2014/01/19 职场文书
家长通知书家长评语
2014/04/17 职场文书
先进教师个人事迹材料
2014/12/15 职场文书
教师节老师寄语
2015/05/28 职场文书
高考升学宴主持词
2019/06/21 职场文书
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL