window.location(window.location.reload用法)

更新時間:2023-03-01 21:11:10 閱讀：評論：0

前端必備基礎知識：window.location 詳解

前端開發人員對 window.location 對象應該不陌生，通過它不但可以獲取當前頁面的地址信息，還可以修改某些屬性，實現頁面跳轉和刷新等。

我們以一個常見的 URL 為例，看看 window.location 包含哪些屬性和方法。

window.location 含義 .origin URL 基礎地址，包括協議名、域名和端口號 .protocol 協議 ( http: 或 https: ) .host 域名+端口號 .hostname 域名 .port 端口號 .pathname 路徑(以 / 開頭) .arch 查詢字符串，以 ? 開頭 .hash 頁面錨點，以 # 開頭 .href 完整 URL

比較容易混淆的是 host 和 hostname 這兩個屬性，區別是前者還包含了端口號。

以上屬性除了 origin 是只讀屬性，其他都可以修改。修改后的效果就是跳轉到相應的新地址。

window.location 返回 Location 類型的一個實例對象，包含當前頁面的地址信息。可以通過以下幾種方式訪問：

這幾個變量都是等價的，因為它是全局變量。但是建議避免直接用 location 變量，因為很容易跟其他局部變量混淆，造成不必要的麻煩。比如：

推薦用 window.location ，這樣一眼就可以看出用的是全局變量。

window.location 動作

.assign() 導航到指定 URL .replace() 導航到指定 URL并刪除當前頁面的訪問記錄 .reload() 重新加載當前頁面 .toString() 返回 URL 字符串

.toString() 和 .href 都是返回 URL，它們之間有區別嗎？結果是一樣的，性能上稍微有點差別。通過 JSPerf 上的性能測試結果可以看出， .href 稍快，通過 window.location 拼接字符串的形式速度最慢。

.assign() 和直接修改 href 是等價的，那么它們跟 .replace() 的區別是什么呢？

.assign() 在跳轉新地址的同時會留下當前頁面的訪問記錄，點擊瀏覽器返回按鈕會回到原來的頁面， .replace() 則不會保留。

.assign() 執行流程：

.replace() 執行流程：

這個特性在用 JS 控制頁面導航時非常重要，稍不注意會造成意外的的頁面回退地址。

window.location是什么意思

window location
窗口位置
例句篩選
1.
Specifying the size and window location at which a column should bedisplayed.
指定某列顯示的大小和窗口位置。

2.
You will e the pop-up window Installation Location: ChangeEquipment Position.
就可看到彈出式窗口安裝地址：修改設備位置。

用window.location和window.open做鏈接的區別

window.location和window.open做鏈接的區別為：性質不同、用途不同、打開網站不同。

一、性質不同

1、window.location：window.location是window對象的屬性。

2、window.open：window.open是window對象的方法。

二、用途不同

1、window.location：window.location用來替換當前頁，也就是重新定位當前頁。

2、window.open：window.open用來讓鏈接頁面在窗口中打開。

三、打開網站不同

1、window.location：window.location只能在一個網站中打開本網站的網頁。

2、window.open：window.open可以在一個網站上打開另外的一個網站的地址。

window.location和window.location.href的區別

window.location 用來獲取網頁的URL，它是一個對象，包含屬性有：

那么區別就很明顯了， window.location 是一個對象， window.location.href 是 window.location 的一個屬性

看個例子把：
隨意打開一個網站，分別輸出其 window.location 和 window.location.href ：

jquery 打開頁面window.location和window.open的區別

1.window.location是window對象的屬性，而window.open是window對象的方法

window.location是你對當前瀏覽器窗口的URL地址對象的參考！

window.open是用來打開一個新窗口的函數！

2.window.open不一定是打開一個新窗口

只要有窗口的名稱和window.open中第二個參數中的一樣就會將這個窗口替換，用這個特性的話可以在iframe和frame中來代替location.href。

如

<input type=button onclick="window.open('1.htm','aa','')">和

<input type=button

onclick="lf.frames['aa'].location.href='1.htm'">的效果一樣

3.在給按鈕、表格、單元格、下拉列表和DIV等做鏈接時一般都要用Javascript來完成，和做普通鏈接一樣，可能我們需要讓鏈接頁面在當前窗口打開，也可能需要在新窗口打開，這時我們就可以使用下面兩項之一來完成：

window.open 用來打開新窗口

window.location 用來替換當前頁，也就是重新定位當前頁

可以用以下來個實例來測試一下。

4.window.location或window.open如何指定target?這是一個經常遇到的問題，特別是在用frame框架的時候

解決辦法:

window.location 改為 top.location　即可在頂部鏈接到指定頁

或

window.open("你的網址","_top");

5.window.open 用來打開新窗口

window.location 用來替換當前頁，也就是重新定位當前頁

用戶不能改變document.location(因為這是當前顯示文檔的位置)。

window.location本身也是一個對象。

但是,可以用window.location改變當前文檔 (用其它文檔取代當前文檔),而document.location不是對象。

服務器重定向后有可能使document.url變動,但window.location.href指的永遠是訪問該網頁時用的URL.

大多數情況下,document.location和location.href是相同的，但是，當存在服務器重定向時，document.location包含的是已經裝載的URL，而location.href包含的則是原始請求的文檔的URL.

6.window.open()是可以在一個網站上打開另外的一個網站的地址

而window.location()是只能在一個網站中打開本網站的網頁

window.open()詳解

<scripttype="text/javascript">
<!--　window.open('page.html');-->
</script>

因為著是一段javascripts代碼，所以它們應該放在<SCRIPT LANGUAGE="javascript">標簽和</script>之間。是對一些版本低的瀏覽器起作用，在這些老瀏覽器中不會將標簽中的代碼作為文本顯示出來。

要養成這個好習慣啊。

window.open ('page.html') 用于控制彈出新的窗口page.html，如果page.html不與主窗口在同一路徑下，前面應寫明路徑，絕對路徑(http://)和相對路徑(../)均可。用單引號和雙引號都可以，只是不要混用。這一段代碼可以加入HTML的任意位置，<head>和</head>之間可以，<body>間</body>也可以，越前越早執行，尤其是頁面代碼長，又想使頁面早點彈出就盡量往前放。

經過設置后的彈出窗口

下面再說一說彈出窗口的設置。只要再往上面的代碼中加一點東西就可以了。我們來定制這個彈出的窗口的外觀，尺寸大小，彈出的位置以適應該頁面的具體情況。

<SCRIPTLANGUAGE="javascript">
<!--
window.open('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')//這句要寫成一行
-->
</SCRIPT>

參數解釋：

window.open 彈出新窗口的命令；

'page.html' 彈出窗口的文件名；

'newwindow' 彈出窗口的名字（不是文件名），非必須，可用空''代替；

height=100 窗口高度；

width=400 窗口寬度；

top=0 窗口距離屏幕上方的象素值；

left=0 窗口距離屏幕左側的象素值；

toolbar=no 是否顯示工具欄，yes為顯示；

menubar，scrollbars 表示菜單欄和滾動欄。

resizable=no 是否允許改變窗口大小，yes為允許；

location=no 是否顯示地址欄，yes為允許；

status=no 是否顯示狀態欄內的信息（通常是文件已經打開），yes為允許；

</SCRIPT>

用函數控制彈出窗口:

下面是一個完整的代碼。

<html>
<head>
<scriptLANGUAGE="JavaScript">
<!--
functionopenwin(){
window.open("page.html","newwindow","height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//寫成一行
}
//-->
</script>
</head>
<bodyonload="openwin()">
任意的頁面內容...
</body>
</html>

這里定義了一個函數openwin(),函數內容就是打開一個窗口。在調用它之前沒有任何用途。怎么調用呢？

方法一：<body onload="openwin()"> 瀏覽器讀頁面時彈出窗口；

方法二：<body onunload="openwin()"> 瀏覽器離開頁面時彈出窗口；

方法三：用一個連接調用：

<a href="#" onclick="openwin()">打開一個窗口</a>

注意：使用的“#”是虛連接。

方法四：用一個按鈕調用：

同時彈出兩個窗口

對源代碼稍微改動一下：

<scriptLANGUAGE="JavaScript">
<!--
functionopenwin(){
window.open("page.html","newwindow","height=100,width=100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//寫成一行
window.open("page2.html","newwindow2","height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no")//寫成一行
}
//-->
</script>

為避免彈出的2個窗口覆蓋，用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調用即可。

注意：2個窗口的name(newwindows和newwindow2)不要相同，或者干脆全部為空。

【主窗口打開文件1.htm，同時彈出小窗口page.html】

如下代碼加入主窗口<head>區：

<scriptlanguage="javascript">
<!--
functionopenwin(){
window.open("page.html","","width=200,height=200")
}
//-->
</script>

加入<body>區：

<a href="1.htm" onclick="openwin()">open</a>即可。

【彈出的窗口之定時關閉控制】

下面我們再對彈出的窗口進行一些控制，效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入page.html的HTML中，可不是主頁面中，否則 ...)，讓它10秒后自動關閉是不是更酷了？

首先，將如下代碼加入page.html文件的<head>區：

<scriptlanguage="JavaScript">
functioncloit()
{
tTimeout("lf.clo()",10000)//毫秒
}
</script>

然后，再用<body onload="cloit()"> 這一句話代替page.html中原有的<BODY>這一句就可以了。(這一句話千萬不要忘記寫啊！這一句的作用是調用關閉窗口的代碼，10秒鐘后就自行關閉該窗口。)

【在彈出窗口中加上一個關閉按鈕】

<script>
<INPUTTYPE='BUTTON'VALUE='關閉'){
openwin()
document.cookie="popped=yes"
}
}
</script>

然后，用<body onload="loadpopup()">（注意不是openwin而是loadpop啊！）替換主頁面中原有的<BODY>這一句即可。你可以試著刷新一下這個頁面或重新進入該頁面，窗口再也不會彈出了。

注意：

1.window.location.Reload()和window.location.href=window.location.href;都是刷新當前頁面。lf.location.reload(); //也是刷新本頁的意思;

2.用window.open()打開新頁面,但是用window.location.href＝"" 卻是在原窗口打開的.

有時瀏覽器會一些安全設置window.open肯定被屏蔽。例如避免彈出廣告窗口。

window.location和document.location的區別分析

當我們需要對html網頁進行轉向的時候或是讀取當前網頁的時候可以用到下面三個對像：
window.location、document.location、document.URL 對當前網頁進行跳轉
我們先來看看 document 與 window對象:
[window 對象]
　　它是一個頂層對象,而不是另一個對象的屬性即瀏覽器的窗口。
[document 對象]
該對象是window和frames對象的一個屬性,是顯示于窗口或框架內的一個文檔。
document 只是屬于window 的一個子對像。
window.location 包含 href 屬性，直接取值賦值時相當于 window.location.href。
window.location.href 當前頁面完整 URL。
document.location 包含 href 屬性，直接取值賦值時相當于 document.location.href。
document.location.href 當前頁面完整 URL。
document.href 沒有這個屬性。
document.URL 取值時等價于 window.location.href 或 document.location.href。在某些瀏覽器中通過對 document.URL 賦值來實現頁面跳轉，但某些瀏覽器中不行。
那么 window.location 和 document.location 有什么區別呢？我認為是沒有區別的，我已經在多個瀏覽器中不同頁面（包括 iframe、frame）中測試了。有人說一個可寫，一個只讀，這一點也在我的測試中被否定了。同樣在 MSDN 中說 location 應用于 window 和 document，但并未提出二者有區別。所以我認為二者是沒有區別的。
[document對象]

　　該對象是window和frames對象的一個屬性,是顯示于窗口或框架內的一個文檔。
　　屬性
　　alinkColor 活動鏈接的顏色(ALINK)
　　anchor 一個HTMI錨點,使用<A NAME=>標記創建(該屬性本身也是一個對象)
　　anchors array 列出文檔錨點對象的數組(<A NAME=>)(該屬性本身也是一個對象)
　　bgColor 文檔的背景顏色(BGCOLOR)
　　cookie 存儲于cookie.txt文件內的一段信息,它是該文檔對象的一個屬性
　　fgColor 文檔的文本顏色(<BODY>標記里的TEXT特性)
　　form 文檔中的一個窗體(<FORM>)(該屬性本身也是一個對象)
　　forms anay 按照其出現在文檔中的順序列出窗體對象的一個數組(該屬性本身也是一個對象)
　　lastModified 文檔最后的修改日期
　　linkColor 文檔的鏈接的顏色,即<BODY>標記中的LINK特性(鏈接到用戶沒有觀察到的文檔)
　　link 文檔中的一個<A HREF=>標記(該屬性本身也是一個對象)
　　links array 文檔中link對象的一個數組,按照它們出現在文檔中的順序排列(該屬性本身也是一個對象)
　　location 當前顯示文檔的URL。用戶不能改變document.location(因為這是當前顯示文檔的位置)。但是,
可以改變 window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而
document.location不是對象
　　referrer 包含鏈接的文檔的URL,用戶單擊該鏈接可到達當前文檔
　　title 文檔的標題((TITLE>)
　　vlinkColor 指向用戶已觀察過的文檔的鏈接文本顏色,即<BODY>標記的VLINK特性
　　方法
　　clear 清除指定文檔的內容
　　clo 關閉文檔流
　　open 打開文檔流
　　write 把文本寫入文檔
　　writeln 把文本寫入文檔,并以換行符結尾

[window對象]
　　它是一個頂層對象,而不是另一個對象的屬性即瀏覽器的窗口。
　　屬性
　　defaultStatus 缺省的狀態條消息
　　document 當前顯示的文檔(該屬性本身也是一個對象)
　　frame 窗口里的一個框架((FRAME>)(該屬性本身也是一個對象)
　　frames array 列舉窗口的框架對象的數組,按照這些對象在文檔中出現的順序列出(該屬性本身也是一個
對象)
　　history 窗口的歷史列表(該屬性本身也是一個對象)
　　length 窗口內的框架數
　　location 窗口所顯示文檔的完整(絕對)URL(該屬性本身也是一個對象)不要把它與如document.location
混淆,后者是當前顯示文檔的URL。用戶可以改變window.location(用另一個文檔取代當前文檔),但卻不能改變
document.location (因為這是當前顯示文檔的位置)
　　name 窗口打開時,賦予該窗口的名字
　　opener 代表使用window.open打開當前窗口的腳本所在的窗口(這是Netscape Navigator 3.0beta 3所引
入的一個新屬性)
　　parent 包含當前框架的窗口的同義詞。frame和window對象的一個屬性
　　lf 當前窗口或框架的同義詞
　　status 狀態條中的消息
　　top 包含當前框架的最頂層瀏覽器窗口的同義詞
　　window 當前窗口或框架的同義詞,與lf相同
　　方法
　　alert() 打開一個Alert消息框
　　clearTimeout() 用來終止tTimeout方法的工作
　　clo() 關閉窗口
　　confirm() 打開一個Confirm消息框,用戶可以選擇OK或Cancel,如果用戶單擊OK,該方法返回true,單擊
Cancel返回fal
　　blur() 把焦點從指定窗口移開(這是Netscape Navigator 3.0 beta 3引入的新方法)
　　focus() 把指定的窗口帶到前臺(另一個新方法)
　　open() 打開一個新窗口
　　prompt() 打開一個Prompt對話框,用戶可向該框鍵入文本,并把鍵入的文本返回到腳本
　　tTimeout() 等待一段指定的毫秒數時間,然后運行指令事件處理程序事件處理程序
　　Onload() 頁面載入時觸發
　　Onunload() 頁面關閉時觸發
區別：用戶不能改變document.location(因為這是當前顯示文檔的位置)。但是,可以改變window.location (用其它文檔取代當前文檔)window.location本身也是一個對象,而document.location不是對象

本文發布于:2023-02-28 20:27:00，感謝您對本站的認可！

本文鏈接：http://www.newhan.cn/zhishi/a/167767627086760.html

本文word下載地址：window.location(window.location.reload用法).doc

本文 PDF 下載地址：window.location(window.location.reload用法).pdf

上一篇：小米賬號

下一篇：返回列表

標簽：window location reload

留言與評論（共有 0 條評論）