BOM之location对象(笔记13.1)

28 篇文章 1 订阅

location

获取当前网页文档的 URL 各个部分的信息

  1. hash
    返回URL中的锚部分
    window.location.hash
  2. host
    获取URL中的主机名称和端口
    window.location.host
  3. href
    返回完成的URL
    window.location.href
  4. pathname
    获取URL路径名
    window.location.pathname
  5. port
    获取端口号
    window.location.port
  6. protocol
    返回URL协议
    window.location.protocol
  7. search
    获取URL查询参数
    window.location.search

用法举例:

//打印网页文档的 URL 各个部分的信息
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<p>协议: <b id="b1"></b></p>
		<p>IP/域名: <b id="b2"></b></p>
		<p>端口: <b id="b3"></b></p>
		<p>路由地址: <b id="b4"></b></p>
		<p>查询参数: <b id="b5"></b></p>
		<p>锚点: <b id="b6"></b></p>
		<p>当前网址: <b id="b7"></b></p>
		<script type="text/javascript">
			let protocol = window.location.protocol ;
			document.getElementById("b1").innerText = protocol ;
			
			let hostname = location.hostname ;
			document.getElementById("b2").innerText = hostname ;
			
			let port = location.port ;
			document.getElementById("b3").innerText = port ;
			
			let path = location.pathname ;
			document.getElementById("b4").innerText = path ;
			
			let query = location.search ;
			document.getElementById("b5").innerText = query ;
			
			let hash = location.hash ;  
			document.getElementById("b6").innerText = hash ;
			
			let url = location.href ;
			document.getElementById("b7").innerText = url ;
		</script>
	</body>
</html>

location其他重要方法

assign()
载入一个新的文档
语法:location.assign(“地址url”)

  • a标签如果既设置了href又添加了单击事件,则会先执行单击事件,事件中代码执行完毕后,然后执行href
  • assign 有延迟效果,不会立即执行。在代码执行完成后,才会触发。
  • 如果想禁用href效果,那么事件函数可以通过return false 来实现
  • 在绑定事件的时候,添加一个return关键字在函数前面

replace()
新文档替换当前文档
用assign或href切换地址时会将地址记录到history中,而用replace方法更改地址栏的地址,不会将信息记录到history中
语法:location.replace(“地址url”)

reload(flag?)
如果没有 flag,或flag = false, 则代表从缓存重新加载数据
如果flag=true, 则代表强制从服务器加载数据
语法:location.reload(ture/fales/)

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值