jQuery獲取當前頁面URL-js教程-PHP中文網

使用jQuery獲取當前網頁URL的完整指南

jQuery Get Current Page URL

本指南提供jQuery代碼片段，用於獲取當前網頁的完整URL並將其存儲在一個變量中，以便與其他腳本一起使用。此URL與您在地址欄中看到的URL相同。

以下代碼片段演示瞭如何使用jQuery和純JavaScript獲取當前頁面的URL：

$(document).ready(function() {
    // 使用jQuery
    var url = $(location).attr('href');

    // 使用纯JavaScript
    var url2 = window.location.href;

    // 在警告窗口中显示URL
    alert(url); //或者 alert(url2);
});

登入後複製

此外，以下函數在確定絕對路徑時可能會有所幫助：

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

登入後複製

常見問題解答 (FAQs)

如何在jQuery中獲取當前URL？

在jQuery中獲取當前URL，可以使用window.location.href屬性。此屬性返回當前頁面的URL。以下是一個簡單的示例：

$(document).ready(function(){
  var currentURL = window.location.href;
  console.log(currentURL);
});

登入後複製

這段代碼將當前URL獲取並存儲在currentURL變量中，然後console.log(currentURL)將此URL打印到控制台。

如何在jQuery中獲取不包含查詢字符串的當前URL？

可以使用window.location.origin和window.location.pathname屬性來獲取不包含查詢字符串的當前URL。示例如下：

$(document).ready(function(){
  var currentURL = window.location.origin + window.location.pathname;
  console.log(currentURL);
});

登入後複製

這段代碼獲取URL的來源（協議、主機名和端口）和路徑名，並將這兩個部分連接起來，形成不包含查詢字符串的URL。

如何在jQuery中從當前URL獲取查詢字符串？

可以使用window.location.search屬性來獲取查詢字符串，該屬性返回查詢字符串，包括開頭的問號。示例如下：

$(document).ready(function(){
  var queryString = window.location.search;
  console.log(queryString);
});

登入後複製

這段代碼獲取查詢字符串並將其存儲在queryString變量中，然後console.log(queryString)將此查詢字符串打印到控制台。

如何在jQuery中獲取不包含哈希值的當前URL？

可以使用window.location.href屬性和split()方法來獲取不包含哈希值的當前URL。示例如下：

$(document).ready(function(){
  var currentURL = window.location.href.split('#')[0];
  console.log(currentURL);
});

登入後複製

這段代碼獲取當前URL，並在哈希符號（#）處將其分割。 [0]部分獲取分割URL的第一部分，即不包含哈希值的URL。

如何在jQuery中獲取當前URL的哈希值？

可以使用window.location.hash屬性來獲取當前URL的哈希值。此屬性返回哈希值，包括開頭的哈希符號。示例如下：

$(document).ready(function(){
  var hash = window.location.hash;
  console.log(hash);
});

登入後複製

這段代碼獲取哈希值並將其存儲在hash變量中，然後console.log(hash)將此哈希值打印到控制台。

如何在jQuery中更改當前URL而不重新加載頁面？

可以使用history.pushState()方法在jQuery中更改當前URL而不重新加載頁面。此方法將新條目推入歷史堆棧。示例如下：

$(document).ready(function(){
  history.pushState(null, null, '/new-page.html');
});

登入後複製

這段代碼將當前URL更改為/new-page.html，而不會重新加載頁面。

如何在jQuery中獲取當前URL的協議？

可以使用window.location.protocol屬性來獲取當前URL的協議。此屬性返回URL的協議，包括尾部的冒號。示例如下：

$(document).ready(function() {
    // 使用jQuery
    var url = $(location).attr('href');

    // 使用纯JavaScript
    var url2 = window.location.href;

    // 在警告窗口中显示URL
    alert(url); //或者 alert(url2);
});

登入後複製

這段代碼獲取協議並將其存儲在protocol變量中，然後console.log(protocol)將此協議打印到控制台。

如何在jQuery中獲取當前URL的主機名？

可以使用window.location.hostname屬性來獲取當前URL的主機名。此屬性返回URL的主機名。示例如下：

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

登入後複製

這段代碼獲取主機名並將其存儲在hostname變量中，然後console.log(hostname)將此主機名打印到控制台。

如何在jQuery中獲取當前URL的端口？

可以使用window.location.port屬性來獲取當前URL的端口。此屬性返回URL的端口。示例如下：

$(document).ready(function(){
  var currentURL = window.location.href;
  console.log(currentURL);
});

登入後複製

這段代碼獲取端口並將其存儲在port變量中，然後console.log(port)將此端口打印到控制台。

如何在jQuery中獲取當前URL的路徑名？

可以使用window.location.pathname屬性來獲取當前URL的路徑名。此屬性返回URL的路徑名。示例如下：

$(document).ready(function(){
  var currentURL = window.location.origin + window.location.pathname;
  console.log(currentURL);
});

登入後複製

這段代碼獲取路徑名並將其存儲在pathname變量中，然後console.log(pathname)將此路徑名打印到控制台。

通過這些方法，您可以輕鬆地在jQuery中獲取和操作當前網頁的URL的不同部分。記住根據您的具體需求選擇合適的方法。

以上是jQuery獲取當前頁面URL的詳細內容。更多資訊請關注PHP中文網其他相關文章！