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中文网其他相关文章！