JavaScript Location對象

ocation 對象

location 對象包含有關(guān)當(dāng)前 URL 的信息。

location 對象是 Window 對象的一個(gè)部分，可通過 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="顯示當(dāng)前的 URL">
<input type="button" onclick="newLocation()" value="改變 URL">
</body>
</html>

location 對象屬性

hash 設(shè)置或返回從井號 (#) 開始的 URL（錨）。

host 設(shè)置或返回主機(jī)名和當(dāng)前 URL 的端口號。

hostname 設(shè)置或返回當(dāng)前 URL 的主機(jī)名。

href 設(shè)置或返回完整的 URL。

pathname 設(shè)置或返回當(dāng)前 URL 的路徑部分。

port 設(shè)置或返回當(dāng)前 URL 的端口號。

protocol 設(shè)置或返回當(dāng)前 URL 的協(xié)議。

search 設(shè)置或返回從問號 (?) 開始的 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:

假設(shè)當(dāng)前的 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() 重新加載當(dāng)前文檔。

replace() 用新的文檔替換當(dāng)前文檔。

assign() 方法可加載一個(gè)新的文檔。

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() 方法用于重新加載當(dāng)前文檔。

location.reload(bool)

參數(shù)如果是false則從瀏覽器的緩存中重載,如果為true則從服務(wù)器上重載,默認(rèn)值為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() 方法可用一個(gè)新文檔取代當(dāng)前文檔。

location.replace(newURL)

replace() 方法不會(huì)在 History 對象中生成一個(gè)新的記錄。當(dāng)使用該方法時(shí)，新的 URL 將覆蓋 History 對象中的當(dāng)前記錄。

<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>

實(shí)例：ThinkPHP框架

<a href='{:U('Circle/circleDetail',array('id'=>$vo['share_id']))}'> <!-- 此種方式會(huì)影響頁面顯示效果 -->
<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），彈窗及參數(shù)說明

<!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         窗口距離屏幕左側(cè)的像素值
		(07) toolbar=no     是否顯示工具欄，yes為顯示
		(08) menubar        表示菜單欄
		(09) scrollbars     表示滾動(dòng)欄
		(10) resizable=no   是否允許改變窗口大小，yes為允許
		(11) location=no    是否顯示地址欄，yes為允許
		(12) status=no      是否顯示狀態(tài)欄內(nèi)的信息（通常是文件已經(jīng)打開），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";  //當(dāng)前窗口顯示指定頁面
window.close();                                 //關(guān)閉本頁面

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

css眾多屬性中，定位position屬性，必須有姓名，而且占據(jù)了比較重要的地位，比如：二級，三級導(dǎo)航效果，鼠標(biāo)懸停的一些動(dòng)態(tài)效果，懸停欄，側(cè)邊導(dǎo)航欄定位效果等等都是需要定位實(shí)現(xiàn)的。

但是很多小伙伴，剛接觸定位的時(shí)候，理解上會(huì)有一些困惑，使用上容易出bug，那我們今天就來聊一下定位position屬性；

1、定位的歷史

W3C（萬維網(wǎng)聯(lián)盟）組織于1998年5月發(fā)布了CSS2版本，CSS2規(guī)范在很大程度上擴(kuò)展了CSS1中的內(nèi)容。它包括數(shù)十種新的屬性（和偽元素），以及現(xiàn)有屬性的很多附加值，其中就包括 定位屬性。

2、瀏覽器的支持

所有主流瀏覽器都支持 position 屬性。

3、position屬性的語法

position 屬性：規(guī)定元素的定位類型

屬性值：

static：默認(rèn)值。沒有定位，元素出現(xiàn)在正常的流中。

relative：生成相對定位的元素，相對于其正常位置進(jìn)行定位。

fixed: 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位。

absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個(gè)父元素進(jìn)行定位。

sticky （css3中新增的屬性值）: 粘性定位，該定位基于用戶滾動(dòng)的位置。

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

left 屬性:規(guī)定元素的左邊緣偏移的大小。

right 屬性規(guī)定元素的右邊緣偏移的大小。

top 屬性規(guī)定元素的頂部邊緣偏移的大小。

bottom 屬性規(guī)定元素的底部邊緣偏移的大小。

以上屬性用于給元素定位設(shè)置坐標(biāo)點(diǎn)的位置；

屬性值：

auto：默認(rèn)值。通過瀏覽器計(jì)算左邊緣的位置。

%：設(shè)置以包含元素的百分比計(jì)的左邊位置?？墒褂秘?fù)值。

length：使用 px、cm 等單位設(shè)置元素的左邊位置?？墒褂秘?fù)值。

5、了解編程中的坐標(biāo)

編程中的坐標(biāo)，x軸-水平軸右為正，左為負(fù)，Y軸-垂直軸下為正，上為負(fù)

每個(gè)元素都自帶一個(gè)坐標(biāo)系，元素左上角的位置為原點(diǎn)（0）位置，如下圖所示

6、分別介紹定位屬性每個(gè)屬性值的使用語法

position:static 靜態(tài)定位

position屬性的默認(rèn)值，即沒有定位，遵循正常的文檔流對象。

遵循正常的文檔流對象，可以理解為，元素的位置根據(jù)在html中的書寫順序依次排序顯示，沒有特殊的位置改變

position:relative 相對定位

生成相對定位的元素，相對于其正常位置進(jìn)行定位。

基本使用講解：

例如：一個(gè)img元素在沒有設(shè)置定位時(shí)，正常顯示在瀏覽器中，自帶坐標(biāo)系，

如圖顯示；

給img元素設(shè)置相對定位，設(shè)置定位的坐標(biāo)為（100px,100px），美女的位置會(huì)從原本原點(diǎn)的位置移動(dòng)到（100px,100px）的位置，會(huì)發(fā)生如下變化：

代碼實(shí)現(xiàn)如下：

 html： <img src="timg.jpg" alt="" />
 css ： img {
   // img元素進(jìn)行相對定位
   position: relative;
  // 定位的坐標(biāo)（相對于自身位置左邊100px，相對于自身位置上面100px的位置定位）
   left: 100px;
   top: 100px;
 }

相對定位對元素在文檔流中的影響

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

例如：在img標(biāo)簽下面書寫一個(gè)span標(biāo)簽，img在定位之后，原本的位置空間依舊是保留在文本流中的，寫在img下面的span是沒有上去的；

代碼實(shí)現(xiàn)如下：

<img src="timg.jpg" alt="" />
<span>~~~~~~~我是寫在img下面的文本亞~~~~~~~~</span>
 css ： img {
   // img元素進(jìn)行相對定位
    position: relative;
  // 定位的坐標(biāo)（相對于自身位置左邊100px，相對于自身位置上面100px的位置定位）
    left: 100px;
    top: 100px;
 }
  span {
    background: lemonchiffon
 }

效果如下：

position: absolute 絕對定位

生成絕對定位的元素，相對于static定位以外的第一個(gè)父元素進(jìn)行定位。

解釋：指絕對定位元素會(huì)根據(jù)有定位設(shè)置（除static定位）的父元素作為參照進(jìn)行定位；如果父元素沒有定位設(shè)置，那就繼續(xù)向上找祖父元素，看是否有定位設(shè)置，有的話就根據(jù)祖父元素定位，沒有的話，那就繼續(xù)向上找…….如果都沒有，就根據(jù)html進(jìn)行定位。

包含塊：絕對定位元素參照的有定位設(shè)置的父元素我們稱為包含塊，包含塊是絕對定位的基礎(chǔ)，包含塊就是為絕對定位元素提供坐標(biāo)偏移和顯示范圍的參照物；

設(shè)置某個(gè)元素為包含塊：給此元素添加relative，fixed，absolute都可，推薦使用relative，因?yàn)椴粫?huì)影響元素在文本流中的顯示；

總結(jié)元素絕對定位三部曲：

先確定其包含塊
設(shè)置元素絕對定位
定位的位置

基本使用講解：

例如：img元素放在div中，沒有設(shè)置定位效果

代碼實(shí)現(xiàn)如下：

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;
}

顯示效果如下：

然后給圖片設(shè)置絕對定位，代碼如下：

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

分析：img的父元素是div，從上述代碼中，可以看出div沒有定位設(shè)置，不能作為img的包含塊，一依次向上是body，body也沒有定位設(shè)置，再向上就是html，所以img會(huì)根據(jù)html進(jìn)行定位，定位到離包含塊左邊0，上邊0的位置定位，也就是左上角位置；

效果如下：

如果想讓img根據(jù)div盒子進(jìn)行定位，div需要有除static之外的定位設(shè)置；成為一個(gè)包含塊，代碼如下：

  div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以讓一個(gè)元素成為包含塊 */
    position: absolute;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }

效果如下：

絕對定位對元素在文檔流中的影響

給元素設(shè)置絕對定位之后，元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣；

例如：在img下面添加了一個(gè)p標(biāo)簽，并且沒有給img設(shè)置絕對定位，此時(shí)img和p會(huì)根據(jù)書寫順序，從上向下依次顯示，代碼如下：

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;
 }

效果如下：

當(dāng)給img設(shè)置絕對定位之后，img在正常文檔流中所占的空間會(huì)關(guān)閉，img不在占據(jù)原來的空間；p標(biāo)簽就會(huì)當(dāng)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都可以讓一個(gè)元素成為包含塊 */
    position: relative;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }
 p {
    background: lemonchiffon;
 }

效果如下：

固定定位 position:fixed

生成固定定位的元素，相對于瀏覽器窗口進(jìn)行定位。

基本使用講解

元素設(shè)置固定定位之后，相對窗口進(jìn)行定位，不會(huì)根據(jù)瀏覽器滾動(dòng)條的滾動(dòng)而移動(dòng)位置，代碼如下：

結(jié)構(gòu)：內(nèi)容比較多,讓瀏覽器可以出現(xiàn)滾動(dòng)條

<body>
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本1
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本2
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本4
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本5
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本6
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本7
	<br /><br /><br /><br /><br />
</body>

效果如下：

給圖片添加固定定位；代碼如下：

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

效果如下：

固定定位對元素在文檔流中的影響

給元素設(shè)置固定定位之后，元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像該元素原來不存在一樣（參照上圖看效果）；

sticky 粘性定位

css3中新增的屬性值，有兼容問題，ie低版本瀏覽器不支持

粘性定位，元素在瀏覽器范圍內(nèi)定位時(shí)就像 position:relative; 而當(dāng)頁面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的定位效果就像 position:fixed;，它會(huì)固定在目標(biāo)位置。

基本語法講解

例如：給img元素設(shè)置粘性定位，代碼如下：

Html結(jié)構(gòu)：

<body>
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本1
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本2
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本4
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本5
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本6
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本7
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本8
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本9
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本10
	<br /><br /><br /><br /><br />
	我是讓當(dāng)前瀏覽器產(chǎn)生滾動(dòng)條的文本11
	<br /><br /><br /><br /><br />
</body>

css代碼：

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

效果如下：

元素設(shè)置絕對定位、固定定位后，會(huì)生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。

例如： span默認(rèn)為行內(nèi)元素，給其設(shè)置絕對定位，觀察其生成的塊級框效果，代碼如下：

Html：

<span>我是測試絕對定位對元素類型影響的小可愛</span>

Css：

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

效果如下：

以上是對position屬性語法的基本講解，其實(shí)position在實(shí)際開發(fā)中，有很多靈活的使用方式，下次我們寫一個(gè)比較有趣的案例，給大家展示定位在實(shí)際項(xiàng)目中的靈活應(yīng)用。

在線咨詢

上一篇：「硬核實(shí)操」如何擁有一個(gè)自己的數(shù)字人模型
下一篇：JavaScript 運(yùn)行機(jī)制(Event Loop

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript Location對象

1、定位的歷史

2、瀏覽器的支持

3、position屬性的語法

4、定位需要配合使用的屬性

5、了解編程中的坐標(biāo)

6、 分別介紹定位屬性每個(gè)屬性值的使用語法

相對定位對元素在文檔流中的影響

基本使用講解：

絕對定位對元素在文檔流中的影響

基本使用講解

固定定位對元素在文檔流中的影響

基本語法講解

元素設(shè)置絕對定位、固定定位后，會(huì)生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。

您的項(xiàng)目需求

1、定位的歷史

2、瀏覽器的支持

3、position屬性的語法

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

5、了解編程中的坐標(biāo)

6、分別介紹定位屬性每個(gè)屬性值的使用語法

元素設(shè)置絕對定位、固定定位后，會(huì)生成一個(gè)塊級框，而不論原來它在正常流中生成何種類型的框。