JavaScript獲取當(dāng)前url路徑過(guò)程解析

更新時(shí)間：2019年12月27日 10:43:19 作者：蒼

這篇文章主要介紹了JavaScript獲取當(dāng)前url路徑過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1、假設(shè)當(dāng)前頁(yè)完整地址是：http://localhost:61768/Home/Index?id=2&age=18

//獲取當(dāng)前窗口的Url
var url = window.location.href;
//結(jié)果：http://localhost:61768/Home/Index?id=2&age=18

//獲取當(dāng)前窗口的主機(jī)名
var host = window.location.host;
//結(jié)果：localhost:61768

//獲取當(dāng)前窗口的端口
var port = window.location.port;
//結(jié)果：61768

//獲取當(dāng)前窗口的路徑
var pathname = window.location.pathname;
//結(jié)果：/Home/Index

//獲取當(dāng)前文檔的Url
var URL = document.URL;
//結(jié)果：http://localhost:61768/Home/Index?id=2&age=18

//獲取參數(shù)
var search = window.location.search;
//結(jié)果：?id=2&age=18

2、分隔 url 中的參數(shù)

var search = window.location.search;
var age = getSearchString('age', search); //結(jié)果：18
var id = getSearchString('id', search); //結(jié)果：2
//key(需要檢索的鍵） url（傳入的需要分割的url地址，例：?id=2&age=18）
function getSearchString(key, Url) {
  var str = Url;
  str = str.substring(1, str.length); // 獲取URL中?之后的字符（去掉第一位的問(wèn)號(hào)）
  // 以&分隔字符串，獲得類似name=xiaoli這樣的元素?cái)?shù)組
  var arr = str.split("&");
  var obj = new Object();

  // 將每一個(gè)數(shù)組元素以=分隔并賦給obj對(duì)象 
  for (var i = 0; i < arr.length; i++) {
    var tmp_arr = arr[i].split("=");
    obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
  }
  return obj[key];
}

3、跳出當(dāng)前窗口

//跳出當(dāng)前窗口,打開(kāi)新窗口
window.open(http://www.baidu.com);

4、document與window

document默示的是一個(gè)文檔對(duì)象，window默示的是一個(gè)窗口對(duì)象，一個(gè)窗口下可以有多個(gè)文檔對(duì)象。

所以一個(gè)窗口下只有一個(gè)window.location.href，可能有多個(gè)document.URL、document.location.href

window.location.href 和 document.location.href 可以被賦值，然后跳轉(zhuǎn)到其它頁(yè)面，document.URL只能讀不能賦值。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

基于原生js淡入淡出函數(shù)封裝（兼容IE）
這篇文章主要為大家詳細(xì)介紹了基于原生js淡入淡出函數(shù)封裝，可兼容IE，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法
最近開(kāi)發(fā)中需要和后端進(jìn)日期和時(shí)間傳值,前后端約定為時(shí)間戳的格式,但是前端展示需要展示成年-月-日的格式,就需要進(jìn)行日期和時(shí)間轉(zhuǎn)換格式,這篇文章主要給大家介紹了關(guān)于js中將時(shí)間戳轉(zhuǎn)化成YYYY-MM-DD?HH:mm:ss的3種實(shí)現(xiàn)辦法,需要的朋友可以參考下
2024-06-06
js實(shí)現(xiàn)ATM機(jī)存取款功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)ATM機(jī)存取款功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-01-01
小程序?qū)崿F(xiàn)上下移動(dòng)切換位置
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)上下移動(dòng)切換位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
webpack打包攜帶某個(gè)文件到dist目錄的配置方法
在 Webpack 配置文件?webpack.config.js 中,可以使用 CopyWebpackPlugin 插件實(shí)現(xiàn)將特定文件復(fù)制到dist目錄,這篇文章主要介紹了webpack打包攜帶某個(gè)文件到dist目錄的配置方法,需要的朋友可以參考下
2024-04-04
利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法
這篇文章主要介紹了利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法
這篇文章主要介紹了JS實(shí)現(xiàn)圖片平面旋轉(zhuǎn)的方法,涉及JavaScript操作頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,需要的朋友可以參考下
2016-03-03
JavaScript代碼實(shí)現(xiàn)左右上下自動(dòng)晃動(dòng)自動(dòng)移動(dòng)
最近幾天做了一個(gè)項(xiàng)目，原來(lái)是用css3動(dòng)畫(huà)做的，由于不兼容IE，改成用js做了，特此分享給大家，供大家參考
2016-04-04
JavaScript加強(qiáng)之自定義callback示例
callback回調(diào)函數(shù)在本文以自定義的方式出現(xiàn)，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-09-09
一個(gè)JS翻頁(yè)效果
一個(gè)JS翻頁(yè)效果...
2007-07-07