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

2023-09-05 01:16:04 74

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

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

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

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

varcurrentURL=window.location;

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

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

1.分析url

URL有6部分组成，一些是可选的：

<协议>//<域名>:<端口>/<路径><查询参数>
//:/

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

下面是一个包含所有部分的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

示例：

varcurrentURL=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="externalnofollow";

示例：

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

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

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

window.location.hash="#moreResults";

例如：

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

4.重载刷新页面

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

window.location.reload();

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

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

window.location.reload(true);

简单示例：

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

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

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

1.分析url

2.通过Location读取当前的URL

3.使用Location操作URL

4.重载刷新页面

热门推荐

随机推荐