Location 对象属性

1、Location 对象包含当前 URL 的有关信息。

2、Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象属性
属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。host 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名称和端口号部分。语法：location.host. 这在动态获取服务器Ip与端口时非常有用，比如 H5 中的 WebSocket 连接服务器时，不可能写死服务器的 ip 与端口，此时使用这种方式即可。
hostname	设置或返回当前 URL 的主机名。 hostname 属性是一个可读可写的字符串，可设置或返回当前 URL 的主机名部分。语法：location.hostname
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。 port 属性是一个可读可写的字符串，可设置或返回当前 URL 的端口部分。语法：location.port=portnumber
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><style>.showInfo {width: 500px;height: 250px;overflow: auto;background-color: #999999;color: white;}</style><!-- JQuery CDN --><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/**获取 Url 地址中的主机名与端口*/$("#host").click(function () {/*** 获取 url 地址的主机名与端口号，如：192.168.1.20:63333、localhost:63333* 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址；如果 Url 省略 80 端口，则获取的同样只有主机名* host 的值始终保持与 url 地址中的一致* @type {string}*/let urlHost = window.location.host;$(".showInfo").append("host=" + urlHost + "<br>");});/**获取 Url 地址中的主机名*/$("#hostname").click(function () {/*** 获取 url 地址的主机名，如：192.168.1.20、localhost、www.baidu.com* 如果 Url 中是域名，则获取的也是域名；如果 url 是 ip 地址，则获取的也是 ip地址* hostname 的值始终保持与 url 地址中的一致* @type {string}*/let urlHostname = location.hostname;$(".showInfo").append("hostname=" + urlHostname + "<br>");});/**获取 Url 地址中的端口部分*/$("#port").click(function () {/*** 获取 url 地址的端口号，如：63333、8080，如果 Url 中是省略的 80 的端口，则返回为空* port 的值始终保持与 url 地址中的一致* @type {string}*/let urlPort = location.port;$(".showInfo").append("port=" + urlPort + "<br>");});});</script></head>
<body>
<div class="showInfo"></div>
<button id="host">host</button>
<button id="hostname">hostname</button>
<button id="port">port</button>
</body>
</html>

href 属性

1、href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。因此可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><style>.showInfo {width: 600px;height: 100px;overflow: auto;background-color: #999999;color: white;}</style><!-- JQuery CDN --><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/**获取浏览器地址栏 Url 地址*/$("#href1").click(function () {let url = window.location.href;$(".showInfo").append("url=" + url + "<br>");});/**设置浏览器地址栏 新 Url地址，浏览器会自动跳转*/$("#href2").click(function () {/*** href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。* 因此，我们可以通过为该属性设置新的 URL，使浏览器读取并显示新的 URL 的内容。* 注意：如过加了 http:// 或者 https:// 写一条，则会被当做绝对路径操作* 如果没有没有加写一条时，如 www.baidu.com,则会被当做相对路径处理，即相对本应用*/location.href = "http://www.baidu.com";});});</script></head>
<body>
<div class="showInfo"></div>
<button id="href1">获取当前url</button>
<button id="href2">前往www.baidu.com</button>
</body>
</html>

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

reload() 方法

1、reload() 方法用于重新加载当前文档。语法：location.reload(force)

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

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

    <!-- JQuery CDN --><script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">$(function () {/**普通刷新当前文档*/$("#reload1").click(function () {window.location.reload();});/**强制刷新当前文档*/$("#reload2").click(function () {location.reload(true);});});</script>

Location 对象操作 URL 使用详解相关推荐

php mysql PDO 查询操作的实例详解
php mysql PDO 查询操作的实例详解 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 ...
pdo mysql 绑定查询_php mysql PDO 查询操作的实例详解
php mysql PDO 查询操作的实例详解 php mysql PDO 查询操作的实例详解这篇文章主要介绍了php mysql PDO 查询操作的实例详解的相关资料,希望通过本文能帮助到大家,需 ...
IOS数据库操作SQLite3使用详解(转)
iPhone中支持通过sqlite3来访问iPhone本地的数据库. 具体使用方法如下 1:添加开发包libsqlite3.0.dylib 首先是设置项目文件,在项目中添加iPhone版的sqlite ...
IOS数据库操作SQLite3使用详解
sqlite数据库iosdatabasesqlinteger 目录(?)[+] iPhone中支持通过sqlite3来访问iPhone本地的数据库. 具体使用方法如下 1:添加开发包libsqlite ...
JAVA中的类和对象之this的详解
系列文章目录第一章 JAVA中的类和对象之this的详解目录前言一.为什么要有this引用二.this的三种用法 1.this.成员变量 2.this.成员方法 3.this()调用其它的构 ...
C# ManagementObjectSearcher操作window案例详解
C# ManagementObjectSearcher操作window案例详解* 前言: 我们在很多情况下想要获得计算机的硬件或操作系统的信息,比如获得CPU序列号给自己的软件添加机器码锁绑定指定电脑 ...
python 经典脚本文件_Python3.5文件读与写操作经典实例详解
本文实例讲述了Python3.5文件读与写操作.分享给大家供大家参考,具体如下: 1.文件操作的基本流程: (1)打开文件,得到文件句柄并赋值给一个变量 (2)通过句柄对文件进行操作 (3)关闭文件 ...
python按键脚本教程-在自动化中用python实现键盘操作的方法详解
原来在robotframework中使用press key方法进行键盘的操作,但是该方法需要写被操作对象的locator,不是很方便,现在找到了一种win32api库写键盘操作的一个方法(注意:此方法 ...
matlab对图像操作函数的详解（笔记1）
matlab对图像操作函数的详解一. 读写图像文件 1. imread imread函数用于读入各种图像文件,如:a=imread('e:\w01.tif') 注:计算机E盘上要有w01相应的.ti ...
2013河北省职称计算机应用能力考试操作题答案,2013河北省职称计算机应用能力考试操作题步骤详解(部分).doc...
2013河北省职称计算机应用能力考试操作题步骤详解(部分) 2013河北省职称计算机应用能力考试操作题步骤详解PAGE PAGE - 11 - 共 NUMPAGES 11页操作题PPT 1-5PPT操 ...

Location 对象操作 URL 使用详解

Location 对象属性

href 属性

Location 对象方法

reload() 方法

Location 对象操作 URL 使用详解相关推荐

最新文章

热门文章