[javascript/html] HTML中Location对象详解

Posted 2023-05-30 千千寰宇

1 Location 介绍

• location指示了其所连接对象的url位置。
• location的应用场景

• 获取并在页面中显示当前url的信息（protocol、host、port、query-string、hash、...）
• 设置/跳转至别的页面

通过设置window.location/document.location/location.href等方式

获取 当前页面的 Location
Document和window对象中都有location属性，可以通过window.location和document.location访问。

注意 如果想要获得当前文档的完整url字符串，有4种方式:

• document.location
• document.location.href
• document.URL
• document.location.toString()

以上方式均可以获得\'http://www.example.com\'这样的字符串

1.2 属性

1.2.1 location.href | get / set

当前文档的完整url，如果(通过js等方式)被改变，文档将会导航到另一个新的页面

// 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.href = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

1.2.2 location.protocol

当前url所使用的协议，包括结尾的":"

// 网址 "https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol";
location.protocol = https://developer.mozilla.org/en-US/HTMLHyperlinkElementUtils.protocol

1.2.3 location.host

获取当前的主机信息，包括主机名，":"和端口号

// 网址 "https://developer.mozilla.org:4097/en-US/HTMLHyperlinkElementUtils.host";
anchor.host == "developer.mozilla.org:4097"

注意 当服务器使用的端口为默认端口时，则返回的host信息不包括:port

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

1.2.4 location.hostname

获取当前url的主机名

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.host == "developer.mozilla.org"

1.2.5 location.port

返回url的端口信息。没有写端口信息的url,实际端口为与协议相关的端口号

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.port = "443" 

1.2.6 location.pathname

返回url的路径字符串

// 网址 "https://developer.mozilla.org:443/en-US/HTMLHyperlinkElementUtils.host";
location.pathname = "/en-US/HTMLHyperlinkElementUtils.host";

注意 : 这里包括最前面的/和最后面的index.html

1.2.7 location.search

又名查询字符串，返回url中?以及之后的字符串

// 网址为 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.search?q=123"
location.search = \'?q=123\';
//将去掉问号后的字符串解析为URLSearchParams对象
let params = new URLSearchParams(location.search.substring(1));
//利用get方法获取指定的参数
let q = parseInt(params.get("q")); // is the number 123

1.2.8 location.hash

返回url中代表页面某个区域的带有#的字符串

//网址 "https://developer.mozilla.org/en-US/docs/HTMLHyperlinkElementUtils.href#youhou";
location.hash = \'#youhou\';

1.2.9 location.username

设置或返回url中域名前面的用户名

// 网址 "https://anonymous:[e-mail]/en-US/docs/HTMLHyperlinkElementUtils.username"
location.username = \'anonymous\';

设置或返回url中密码部分

// 网址"https://anonymous:[e-mail]/en-US/docs/HTMLHyperlinkElementUtils.username"
location.password = \'flabada\';

1.2.10 location.origin

返回url中完整的协议和主机地址部分,包括端口

//网址https://developer.mozilla.org/en-US/docs/Web/API/HTMLHyperlinkElementUtils/origin
location.origin = \'https://developer.mozilla.org\';

1.2 方法

1.2.1 Location.assign()

该方法使浏览器加载并展示URL所指定的文档

document.location.assign(\'https://developer.mozilla.org/en-US/docs/Web/API/Location.reload\');

1.2.2 Location.reload()

该方法用于重新加载当前页面，可以接受一个Boolean类型的参数，参数为true,强制从服务器重新获取，为false时从缓存中读取。默认值为false

document.location.reload(true);

1.2.3 Location.replace()

提供一个URL，使页面跳转到相应的URL，与location.assign()的区别是，location.replace()跳转后的页面不会保存在浏览器历史中，即无法通过返回按钮返回到该页面。

document.location.replace(\'https://developer.mozilla.org/en-US/docs/Web/API/Location.reload\');

1.2.4 Location.toString()

获取当前页面的完整URL，相当于location.href

2 Samples

Case 1 # in html element tag property

姓名：<input name="name"/></br>
薪水：<input name="salary"/></br>
年龄：<input name="age"/></br>
<input type="submit" value="确认"/></br>

<!--点击下面的链接不会打开formDemo.html页面-->
<a href="" onclick="location.href=\'formDemo.html\'">添加新员工</a> 

<!--标签</a>无法使用Location对象的页面指向功能，其实locaiton是Window对象的属性，该属性返回一个Location对象，完整的写法是：window.location.href=\'formDemo.html\'-->
<input type="button" value="添加新员工" onclick="location.href=\'formDemo.html\'"/>

Case 2

var url = document.location;
url.href = \'https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container\';
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results-close-container
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org

X 参考文献

• html页面中Location对象跳转页面用法 - CSDN
• html中location的用法详解 - CSDN

本文作者： 千千寰宇
本文链接： https://www.cnblogs.com/johnnyzen
关于博文：评论和私信会在第一时间回复，或直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
日常交流：大数据与软件开发-QQ交流群: 774386015 【入群二维码】参见左下角。您的支持、鼓励是博主技术写作的重要动力！

html il costrutto做....在JavaScript.html中

<!DOCTYPE html>
<html>
<head>
	<title>Il costrutto do...while in JavaScript</title>
	<script type="text/javascript">
	var intero = 500;
	do {
		var mezzo = intero / 2;
		document.write("<p>" + mezzo + "</p>");
		intero = mezzo;
	}
	while (mezzo > 1);
	</script>
</head>
<body>

</body>
</html>