8.JavaScript核心BOM操作学习（界面交互功能）——location对象、navigator对象、history对象

最新推荐文章于 2021-04-20 19:34:54 发布

愿时间能学会宽恕

最新推荐文章于 2021-04-20 19:34:54 发布

阅读量177

点赞数

分类专栏：网页前端开发js,vue等知识文章标签： js javascript web html

尊重版权，转载需指明

本文链接：https://blog.csdn.net/getture/article/details/108042539

版权

网页前端开发js,vue等知识专栏收录该内容

24 篇文章 0 订阅

订阅专栏

⑤location对象

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

Ⅰ.组成

protocol://host[:port]/path/[?query]#fragment
(http://www.itcast.cn/index.html?name=andy&age=18#link)

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

Ⅱ.属性
      location.href：获取或者设置整个URL
      location.host：返回主机（域名）
      location.port：返回端口号如果未写返回空字符串
      location.pathname：返回路径
      location.hash：返回片段 #后面内容常见于链接锚点

<body>
	<button>点击</button>
	<button>跳转</button>
	<script>
		var btn=document.querySelectorAll('button');
		btn[0].addEventListener('click',function(){
			console.log(location.href);
		});
		btn[1].addEventListener('click',function(){
			location.href='http://www.booksam.cn';
		})
	</script>
</body>

案例：倒计时跳转页面（不显示倒计时）

<body>
	<div>
		将在5秒钟后跳转		
	</div>
	<script>
		setTimeout(function(){
			location.href='http://www.booksam.cn';
		},5000)
	</script>
</body>

案例：倒计时跳转页面（显示倒计时）

<body>
	<div>

	</div>
	<script>
		var time=5;
		var div=document.querySelector('div');
		div.innerText=time+"后，自动跳转";
		setInterval(function(){
			time-=1;
			div.innerText=time+"后，自动跳转";
			if(time==0)location.href='http://www.booksam.cn';
		},1000)
	</script>
</body>

Ⅲ.获取URL参数
案例：获取参数
test2.html:

<body>
	<form action="test3.html">
		用户名：<input name="uname" type="text"></input>
		<input type="submit" >登录</input>
	</form>
	<script>
	</script>
</body>

test3.html:

<body>
	<div>
	</div>
	<script>
		var div=document.querySelector('div');
		//1.先去掉？	substr(起始位置，截取几个字符)
		var params=location.search.substr(1);
		//2.利用=将字符串分割成数组，split('=');
		var arr=params.split('=');
		div.innerHTML=arr[1]+'欢迎您';
	</script>
</body>

Ⅳ.常用方法
location.assign()：跟href一样，可以跳转页面（也称为重定向页面）
可以实现后退页面

location.replace()：替换当前页面，因为不记录历史，所以不能后退页面

location.reload()：重新加载页面，相当于刷新按钮或者f5，如果参数为true强制刷新ctrl+f5
强制刷新就是本来缓存的东西也给刷新掉

<body>
	<button>点击</button>
	<button>跳转</button>
	<button>刷新</button>
	<script>
		var btn=document.querySelectorAll('button');
		btn[0].addEventListener('click',function(){
			console.log(location.href);
		});
		btn[1].addEventListener('click',function(){
			location.assign('http://www.booksam.cn');
		})
		btn[2].addEventListener('click',function(){
			location.reload();
		})
	</script>
</body>

⑥navigator对象

判断使用手机还是电脑进行浏览，从而显示不同的页面

<script>
	if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) 
	{ 
		window.location.href="手机端页面的地址";
	}
	else window.location.href="电脑端页面的地址";
</script>

⑦history对象

window对象给我们提供了一个history对象，与浏览器历史记录进行交互，该对象包含用户（在浏览器窗口中）访问过的URL

      back()：可以实现后退
      forward()：可以实现前进
      go(参数)：前进后退功能        参数如果是1，前进一个页面；如果是-1，后退一个页面
test3.html：

<body>
	<a href="test2.html">进入test2页面</a>
	<button>前进</button>
	<button>后退</button>
	<script>
		var btn=document.querySelector('button');
		btn[0].addEventListener('click',function(){
			history.forward();
			//history.go(1);
		})
		btn[1].addEventListener('click',function(){
			history.back();
			//history.go(-1);
		})
	</script>
</body>

test2.html：

<body>
	<a href="test3.html">进入test3页面</a>
	<button>前进</button>
	<button>后退</button>
	<script>
		var btn=document.querySelector('button');
		btn[0].addEventListener('click',function(){
			history.forward();
			//history.go(1)
		})
		btn[1].addEventListener('click',function(){
			history.back();
			//history.go(-1)
		})
	</script>
</body>