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的一些总结
Nov 03 Javascript
深入理解JavaScript系列(1) 编写高质量JavaScript代码的基本要点
Jan 15 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
Jun 09 Javascript
jQuery表单美化插件jqTransform使用详解
Apr 12 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
Jul 21 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
Mar 27 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php,ajax实现分页
2008/03/27 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
php适配器模式介绍
2012/08/14 PHP
PHP基础知识回顾
2012/08/16 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
2010/11/17 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JavaScript各类型的关系图解
2015/10/16 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
微信小程序 less文件编译成wxss文件实现办法
2016/12/05 Javascript
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
python动态参数用法实例分析
2015/05/25 Python
Python排序搜索基本算法之希尔排序实例分析
2017/12/09 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
小学三年级数学教学反思
2014/01/31 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
自考毕业自我鉴定
2014/03/18 职场文书
李培根演讲稿
2014/05/22 职场文书
2015高考寄语集锦
2015/02/27 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
八年级作文之我的母亲
2019/12/10 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
vue+element ui实现锚点定位
2021/06/29 Vue.js
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP