JavaScript Location对象

ocation 对象

location 对象包含有关当前 URL 的信息。

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

<html>
<head>
<script type="text/javascript">
function currLocation()
{
alert(window.location);
}
function newLocation()
{
window.location="/index.html";
}
</script>
</head>
<body>
<input type="button" onclick="currLocation()" value="显示当前的 URL">
<input type="button" onclick="newLocation()" value="改变 URL">
</body>
</html>

location 对象属性

hash 设置或返回从井号 (#) 开始的 URL（锚）。

host 设置或返回主机名和当前 URL 的端口号。

hostname 设置或返回当前 URL 的主机名。

href 设置或返回完整的 URL。

pathname 设置或返回当前 URL 的路径部分。

port 设置或返回当前 URL 的端口号。

protocol 设置或返回当前 URL 的协议。

search 设置或返回从问号 (?) 开始的 URL（查询部分）。

http://example.com:1234/test/test.htm#part2：

hash: #part2

host:example.com:1234

hostname:example.com

href:http://example.com:1234/test.htm#part2

pathname:/test/test.htm

port:1234

protocol:http:

假设当前的 URL 是: http://www.w3school.com.cn/tiy/t.asp?f=hdom_loc_search

search:?f=hdom_loc_search

<script type="text/javascript">
document.write(location.host);
</script>

输出：example.com:1234

location 对象方法

assign() 加载新的文档。

reload() 重新加载当前文档。

replace() 用新的文档替换当前文档。

assign() 方法可加载一个新的文档。

location.assign(URL)

<html>
<head>
<script type="text/javascript">
function newDoc()
{
window.location.assign("http://www.w3school.com.cn");
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()" />
</body>
</html>

reload() 方法用于重新加载当前文档。

location.reload(bool)

参数如果是false则从浏览器的缓存中重载,如果为true则从服务器上重载,默认值为false;

<html>
<head>
<script type="text/javascript">
function reloadPage(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="Reload page" onclick="reloadPage()" />
</body>
</html>

replace() 方法可用一个新文档取代当前文档。

location.replace(newURL)

replace() 方法不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。

<html>
<head>
<script type="text/javascript">
function replaceDoc(){
window.location.replace("http://www.w3school.com.cn");
}
</script>
</head>
<body>
<input type="button" value="Replace document" onclick="replaceDoc()" />
</body>
</html>

实例：ThinkPHP框架

<a href='{:U('Circle/circleDetail',array('id'=>$vo['share_id']))}'> <!-- 此种方式会影响页面显示效果 -->
<div class="item item-avatar item-button-right">
<img src="{$vo.head_pic}">
<h2>{$vo.user_name}</h2>
<p>{:friend_date($vo['public_time'])}</p>
<i class=" button button-icon button-outline button-assertive" onclick="setCollection(this, '{$vo.share_id}', '{$user.user_id}')">{$vo.isCollection}</i>
</div>
</a>

代替a链接功能

1），弹窗及参数说明

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="打开新窗口" onclick="openNewWin()" />
	
</body>
<script type="text/javascript">

	function openNewWin() {
		
		var openWindow=window.open("newTest.html",
			"弹到新窗口",
			"height=500, width=800, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no");
		
	}
	
	/***
		(00) window.open    弹出新窗口的命令
		(01) newTest.html   弹出窗口的文件名，或请求地址
		(02) 弹出窗口的名字（不是文件名），非必须，可用空''代替
		(03) height=100     窗口高度
		(04) width=400      窗口宽度
		(05) top=0          窗口距离屏幕上方的像素值
		(06) left=0         窗口距离屏幕左侧的像素值
		(07) toolbar=no     是否显示工具栏，yes为显示
		(08) menubar        表示菜单栏
		(09) scrollbars     表示滚动栏
		(10) resizable=no   是否允许改变窗口大小，yes为允许
		(11) location=no    是否显示地址栏，yes为允许
		(12) status=no      是否显示状态栏内的信息（通常是文件已经打开），yes为允许
	***/
	
</script>
</html>

（2），弹窗并居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <style type="text/css"></style>
	<link rel="stylesheet" type="text/css" href="#">
	
</head>
<body>
	
	<input type="button" value="弹出的窗口居中" onclick="testOpenCenterWindow()" />
	
</body>
<script type="text/javascript">

	function testOpenCenterWindow() {
		
		// 窗口垂直位置水平位置
		var iTop=(window.screen.availHeight - 30 - 500) / 2;
		var iLeft=(window.screen.availWidth - 10 - 800) / 2; //减width
		var openWindow=window.open("newTest.html"
			,"测试弹窗口并居中"
			,"height=500, width=800, top="+ iTop
			+", left="+ iLeft
			+", toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
				);
	}
	
</script>
</html>

（3），窗口 location属性

window对象location属性是引用Location对象，它表示该窗口显示文档的URL
window.location.href="page1.jsp";  //当前窗口显示指定页面
window.close();                                 //关闭本页面

（4），窗口与父窗口通信

css众多属性中，定位position属性，必须有姓名，而且占据了比较重要的地位，比如：二级，三级导航效果，鼠标悬停的一些动态效果，悬停栏，侧边导航栏定位效果等等都是需要定位实现的。

但是很多小伙伴，刚接触定位的时候，理解上会有一些困惑，使用上容易出bug，那我们今天就来聊一下定位position属性；

1、定位的历史

W3C（万维网联盟）组织于1998年5月发布了CSS2版本，CSS2规范在很大程度上扩展了CSS1中的内容。它包括数十种新的属性（和伪元素），以及现有属性的很多附加值，其中就包括 定位属性。

2、浏览器的支持

所有主流浏览器都支持 position 属性。

3、position属性的语法

position 属性：规定元素的定位类型

属性值：

static：默认值。没有定位，元素出现在正常的流中。

relative：生成相对定位的元素，相对于其正常位置进行定位。

fixed: 生成绝对定位的元素，相对于浏览器窗口进行定位。

absolute: 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。

sticky （css3中新增的属性值）: 粘性定位，该定位基于用户滚动的位置。

4、定位需要配合使用的属性

left 属性:规定元素的左边缘偏移的大小。

right 属性规定元素的右边缘偏移的大小。

top 属性规定元素的顶部边缘偏移的大小。

bottom 属性规定元素的底部边缘偏移的大小。

以上属性用于给元素定位设置坐标点的位置；

属性值：

auto：默认值。通过浏览器计算左边缘的位置。

%：设置以包含元素的百分比计的左边位置。可使用负值。

length：使用 px、cm 等单位设置元素的左边位置。可使用负值。

5、了解编程中的坐标

编程中的坐标，x轴-水平轴右为正，左为负，Y轴-垂直轴下为正，上为负

每个元素都自带一个坐标系，元素左上角的位置为原点（0）位置，如下图所示

6、分别介绍定位属性每个属性值的使用语法

position:static 静态定位

position属性的默认值，即没有定位，遵循正常的文档流对象。

遵循正常的文档流对象，可以理解为，元素的位置根据在html中的书写顺序依次排序显示，没有特殊的位置改变

position:relative 相对定位

生成相对定位的元素，相对于其正常位置进行定位。

基本使用讲解：

例如：一个img元素在没有设置定位时，正常显示在浏览器中，自带坐标系，

如图显示；

给img元素设置相对定位，设置定位的坐标为（100px,100px），美女的位置会从原本原点的位置移动到（100px,100px）的位置，会发生如下变化：

代码实现如下：

 html： <img src="timg.jpg" alt="" />
 css ： img {
   // img元素进行相对定位
   position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
   left: 100px;
   top: 100px;
 }

相对定位对元素在文档流中的影响

元素仍然保持其未定位前的形状，它原本在文本流中所占的空间仍保留

例如：在img标签下面书写一个span标签，img在定位之后，原本的位置空间依旧是保留在文本流中的，写在img下面的span是没有上去的；

代码实现如下：

<img src="timg.jpg" alt="" />
<span>~~~~~~~我是写在img下面的文本亚~~~~~~~~</span>
 css ： img {
   // img元素进行相对定位
    position: relative;
  // 定位的坐标（相对于自身位置左边100px，相对于自身位置上面100px的位置定位）
    left: 100px;
    top: 100px;
 }
  span {
    background: lemonchiffon
 }

效果如下：

position: absolute 绝对定位

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

解释：指绝对定位元素会根据有定位设置（除static定位）的父元素作为参照进行定位；如果父元素没有定位设置，那就继续向上找祖父元素，看是否有定位设置，有的话就根据祖父元素定位，没有的话，那就继续向上找…….如果都没有，就根据html进行定位。

包含块：绝对定位元素参照的有定位设置的父元素我们称为包含块，包含块是绝对定位的基础，包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物；

设置某个元素为包含块：给此元素添加relative，fixed，absolute都可，推荐使用relative，因为不会影响元素在文本流中的显示；

总结元素绝对定位三部曲：

先确定其包含块
设置元素绝对定位
定位的位置

基本使用讲解：

例如：img元素放在div中，没有设置定位效果

代码实现如下：

HTML:

<!DOCTYPE html>
<html lang="en">
   <head> </head>
   <body>
      <div>
        <img src="../img/timg.jpg" alt="" />
      </div>
   </body>
</html>

CSS：

div {
   width: 400px;
   height: 400px;
   border: 10px dashed coral;
   margin: 100px;
}

显示效果如下：

然后给图片设置绝对定位，代码如下：

img {
    position: absolute;
    left: 0;
    top: 0;
}

分析：img的父元素是div，从上述代码中，可以看出div没有定位设置，不能作为img的包含块，一依次向上是body，body也没有定位设置，再向上就是html，所以img会根据html进行定位，定位到离包含块左边0，上边0的位置定位，也就是左上角位置；

效果如下：

如果想让img根据div盒子进行定位，div需要有除static之外的定位设置；成为一个包含块，代码如下：

  div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: absolute;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }

效果如下：

绝对定位对元素在文档流中的影响

给元素设置绝对定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样；

例如：在img下面添加了一个p标签，并且没有给img设置绝对定位，此时img和p会根据书写顺序，从上向下依次显示，代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
        ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
 }
p {
    background: lemonchiffon;
 }

效果如下：

当给img设置绝对定位之后，img在正常文档流中所占的空间会关闭，img不在占据原来的空间；p标签就会当img不存在一样，显示在div最开始的位置：

代码如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
         ~~~~~~我是写在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
 div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以让一个元素成为包含块 */
    position: relative;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }
 p {
    background: lemonchiffon;
 }

效果如下：

固定定位 position:fixed

生成固定定位的元素，相对于浏览器窗口进行定位。

基本使用讲解

元素设置固定定位之后，相对窗口进行定位，不会根据浏览器滚动条的滚动而移动位置，代码如下：

结构：内容比较多,让浏览器可以出现滚动条

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
</body>

效果如下：

给图片添加固定定位；代码如下：

<style>
    img {
    position: fixed;
    right: 0;
    top: 30%;
    }
</style>

效果如下：

固定定位对元素在文档流中的影响

给元素设置固定定位之后，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样（参照上图看效果）；

sticky 粘性定位

css3中新增的属性值，有兼容问题，ie低版本浏览器不支持

粘性定位，元素在浏览器范围内定位时就像 position:relative; 而当页面滚动超出目标区域时，它的定位效果就像 position:fixed;，它会固定在目标位置。

基本语法讲解

例如：给img元素设置粘性定位，代码如下：

Html结构：

<body>
	我是让当前浏览器产生滚动条的文本1
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本2
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是让当前浏览器产生滚动条的文本4
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本5
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本6
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本7
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本8
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本9
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本10
	<br /><br /><br /><br /><br />
	我是让当前浏览器产生滚动条的文本11
	<br /><br /><br /><br /><br />
</body>

css代码：

<style>
   img {
       position: sticky;
       left: 300px;
       top: 100px;
 }
 </style>

效果如下：

元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

例如： span默认为行内元素，给其设置绝对定位，观察其生成的块级框效果，代码如下：

Html：

<span>我是测试绝对定位对元素类型影响的小可爱</span>

Css：

<style>
 span {
     position: absolute;
     width: 300px;
     height: 300px;
     background: lightblue;
     font-size: 30px;
     border: lightcoral 10px dashed;
 }
 </style>

效果如下：

以上是对position属性语法的基本讲解，其实position在实际开发中，有很多灵活的使用方式，下次我们写一个比较有趣的案例，给大家展示定位在实际项目中的灵活应用。

在线咨询

上一篇：「硬核实操」如何拥有一个自己的数字人模型
下一篇：JavaScript 运行机制(Event Loop

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript Location对象

1、定位的历史

2、浏览器的支持

3、position属性的语法

4、定位需要配合使用的属性

5、了解编程中的坐标

6、 分别介绍定位属性每个属性值的使用语法

相对定位对元素在文档流中的影响

基本使用讲解：

绝对定位对元素在文档流中的影响

基本使用讲解

固定定位对元素在文档流中的影响

基本语法讲解

元素设置绝对定位、固定定位后，会生成一个块级框，而不论原来它在正常流中生成何种类型的框。

您的项目需求

6、分别介绍定位属性每个属性值的使用语法