国产视频app在網站的前臺使用JS可以做很多的事情,比如利用JS獲取當前網頁的網址,參數,錨點,通訊協議等等。那么這篇文章就簡單的說一下,利用 javascript 獲取當前網頁網址中部份信息的方法。

利用JS獲取當前頁面網址及其它參數的方法

URL網址的構成

利用js獲取或操作url之前,要先了解一個網址的組成部份,如以下格式

scheme://host:port/path?query#fragment

scheme:通信協議  常用的http,ftp,maito等

host:主機服務器(計算機)域名系統 (DNS) 主機名或 IP 地址。

port:端口號整數,如省略則默認為80

path:路徑一個或多個"/"符號隔開的字符串,一般用來表示主機上的一個目錄或文件地址。

query:查詢,可選,用于給動態網頁傳遞參數,多個參數用 & 隔開

fragment:信息片斷字符串,也可以叫做錨點,用于指定網絡資源中的片斷。

JS獲取當前網址

JS 中利用 window.location.href 獲取當前頁面瀏覽器地址欄中的完整url

JS代碼:

//window.location.href
console.log(window.location.href);

普通網址測試

瀏覽器地址:

http://xswdd.cn

打印結果:

http://xswdd.cn

帶有hash值的URL測試

瀏覽器地址:

http://xswdd.cn#mochu

打印結果:

http://xswdd.cn#mochu

帶有參數的URL測試

瀏覽器地址:

http://xswdd.cn/?=mochu

打印結果:

http://xswdd.cn/?=mochu

注:由上面的幾個小測試可以看出,window.location.href 可以獲取瀏覽器中完整的URL地址

js獲取網址中的端口號

国产视频appjs 中利用 window.location.port 獲取網址中帶有端口號

JS代碼

//window.location.port
console.log(window.location.port);

帶有端口的網址測試

瀏覽器地址

http://xswdd.cn:8080

打印結果:

8080

不帶端口的網址測試

瀏覽器地址

http://xswdd.cn

打印結果:

NULL

注:window.location.port 只能返回網址中帶有的端口,如果網址中不帶有端口則返回為空

js獲取網址中的錨點的值

JS中使用 window.location.hash 獲取URL中錨點的值

JS代碼

//window.location.hash
console.log(window.location.hash);

帶有錨點的URL測試

瀏覽器地址

http://xswdd.cn/index.html#mochu

打印結果:

#mochu

JS 獲取 url 中的協議部份

js 中利用 window.location.protocol 獲取網址的協議部份,如http,https等

JS代碼

//window.location.protocol
console.log(window.location.protocol);

測試

瀏覽器地址

http://xswdd.cn

打印結果:

https

js 獲取URL中文件地址

国产视频appjs中利用 window.location.pathname 獲取文件的路徑

js代碼

//window.location.pathname
console.log(window.location.pathname);

測試

瀏覽器地址

http://xswdd.cn/post/1.html

打印結果:

/post/1.html

JS獲取URL中的參數部份

国产视频appjs 中的 window.location.search 可以獲取 url 中的參數部份

js代碼

//window.location.search
console.log(window.location.search);

測試

瀏覽器地址

http://xswdd.cn/index.php?s=4

打印結果:

?s=4

js獲取url中的主網址部份

国产视频appwindow.location.host 可以獲取到url地址中的主網址部份

js代碼

//window.location.host
console.log(window.location.host);

測試

瀏覽器地址

http://xswdd.cn/index.php

打印結果:

xswdd.cn

国产视频app注意:以上JS代碼的 console.log(),為測試時,方便向瀏覽器控制臺打印數據所用到的。關于此方法的使用,可查看本博客的相關文章。