location对象

hcoke

已于 2022-04-01 21:55:03 修改

阅读量204

点赞数

分类专栏： js 文章标签： JavaScript

于 2022-03-31 21:15:09 首次发布

本文链接：https://blog.csdn.net/m0_62962469/article/details/123881922

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。由于这个属性返回的是一个对象，所以我们将这个属性也称为location对象。

url 统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
url一般的语法格式为:
protocol://host[:port]/path/[?query]#fragment

组成	说明
protocol	通信协议常用的http，ftp，maito等
host	主机(域名) www.itheima.com
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个 '/' 隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	参数以键值对的形式，通过&符号分隔开来
fragment	片段 #后面的内容常见于链接锚点

location对象的属性

location对象属性	返回值
location.herf	获取或设置整个url
location.host	返回主机（域名）
location.port	返回端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

重点记住herf 与 search

5秒后跳转案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			
		</div>
		<script type="text/javascript">
			//location对象 window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。由于这个属性返回的是一个对象，所以我们将这个属性也称为location对象。
			//url 统一资源定位符 是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
			//url一般的语法格式为:
			// protocol://host[:port]/path/[?query]#fragment
			
			var timer = 5;
			var div = document.querySelector('div');
			function fn() {
				if (timer == 0) {
					location.href = 'http://www.itcast.cn';
				} else {
					div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
					timer--;
				}
			}
			fn();
			setInterval(function() {	
				if (timer == 0) {
					location.href = 'http://www.itcast.cn';
				} else {
					div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
					timer--;
				}
			}, 1000);
		</script>
	</body>
</html>

出现延迟，存在空白的情况可以将部分代码写进函数内，调用一次该函数即可。

location对象的方法

location对象方法	返回值
location.assign()	跟herf一样，可以跳转页面（重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者 f5 如果参数为true 则强制刷新 ctrl+f5

location.assign():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.querySelector('button');
				btn.onclick = function () {
					location.assign('http://www.baidu.com');
				}
			}
		</script>
	</head>
	<body>
		<button type="button">按扭</button>
	</body>
</html>

location.replace():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.querySelector('button');
				btn.onclick = function () {
					//location.assign('http://www.baidu.com');
					location.replace('http://www.baidu.com'); //不记录浏览历史
				}
			}
		</script>
	</head>
	<body>
		<button type="button">按扭</button>
	</body>
</html>

location.reload():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var btn = document.querySelector('button');
				btn.onclick = function () {
					//location.assign('http://www.baidu.com');
					//location.replace('http://www.baidu.com'); //不记录浏览历史
					location.reload();
				}
			}
		</script>
	</head>
	<body>
		<button type="button">按扭</button>
	</body>
</html>