使用JavaScript获取当前URL?


Answers:


3680

采用:

window.location.href 

如评论中所述,下面的行有效,但对于Firefox而言是错误的。

document.URL;

请参阅DOMString类型的URL,只读


142
在Firefox 12中,该document.URL属性不会在a之后更新window.location为锚点(#),而window.location.href会更新。我在此处整理了一个实时演示:jsfiddle.net/PxgKy我没有测试过任何其他版本的Firefox。document.URL在Chrome 20和IE9中未发现使用问题。
Telmo Marques 2012年

88
您也可以获得主持人和明确的位置:window.location.hostwindow.location.href.toString().split(window.location.host)[1]
ali youhannaei 2012年

8
那是怎么回事document.baseURI。基本上有3种方式来获得URL document.baseURIdocument.URL,和location
穆罕默德·乌默

20
-1:如果您具有带有其的框架,图像或表单,name="URL"则此属性将在document对象上被遮盖,并且代码将中断。在这种情况下,document.URL将改为引用DOM节点。最好像中使用全局对象的属性window.location.href
罗伊·廷克

13
“ window.location.href”获胜
GabrielBB 2014年

663

URL信息访问

JavaScript为您提供了许多检索和更改当前URL的方法,该方法显示在浏览器的地址栏中。所有这些方法都使用Location对象,它是对象的属性Window。您可以创建一个Location具有当前URL 的新对象,如下所示:

var currentLocation = window.location;

基本网址结构

<protocol>//<hostname>:<port>/<pathname><search><hash>
  • protocol:协议名称,用于访问Internet上的资源。(HTTP(不带SSL)或HTTPS(带SSL))

  • hostname:主机名指定拥有资源的主机。例如,www.stackoverflow.com。服务器使用主机名提供服务。

  • 端口:端口号,用于识别Internet或其他网络消息到达服务器时将转发到的特定进程。

  • pathname:路径提供有关Web客户端要访问的主机内特定资源的信息。例如,/index.html

  • 搜索:查询字符串位于路径部分之后,并提供资源可用于某些目的的信息字符串(例如,作为搜索的参数或要处理的数据)。

  • hash: URL的锚点部分,包括井号(#)。

使用这些Location对象属性,您可以访问所有这些URL组件以及它们可以设置或返回的内容:

  • href-整个网址
  • protocol -URL的协议
  • host -URL的主机名和端口
  • hostname -URL的主机名
  • port-服务器用于URL的端口号
  • pathname -URL的路径名
  • search -URL的查询部分
  • hash -URL的锚点部分

我希望你能得到答案。


7
它们不是window.location属性的“方法” ,而是属性,这里有一个示例var stringPathName = window.location.pathname
彼得·克劳斯

@FabioC。您可以通过删除它substring。但是,当您要使用重定向document.location = "/page.html";将重定向到根页面时可能很有用page.html
FindOut_Quran

1
这不仅回答了所陈述的问题。实际上,我大概在一个月前搜索了一种从URL字符串中获取一个或多个特定部分的好方法(我认为这可能是我要获取的当前页面),尽管还有其他问题目标,他们的答案没有这个目的那么有用和直接。
Panzercrisis

1
不过,有一个快速的建议:在上述基本的URL结构中,有一个地方search,但是在下面的描述列表中,它称为query。也许可以和解,或者可以添加进一步的说明。
Panzercrisis

1
它被称为“搜索”而不是“查询”
Apollo Data


264

获取当前页面的URL:

window.location.href

3
请注意,那是窗口的位置而不是文档的位置。
Gumbo

16
这是同一件事。当前完整URL是指文档路径(外部地址)。
Zanoni

2
是否像document.url一样标准化?(我的意思是像w3c文档一样)
chendral

document是规范定义的文档树的根。window通常是等效的,但在某些奇怪的情况下可能并非如此。
broinjc 2014年

57

好的,使用纯JavaScript即可轻松获得当前页面的完整URL。例如,在此页面上尝试以下代码:

window.location.href;
// use it in the console of this page will return
// http://stackoverflow.com/questions/1034621/get-current-url-in-web-browser"

window.location.href属性返回当前页面的URL。

document.getElementById("root").innerHTML = "The full URL of this page is:<br>" + window.location.href;
<!DOCTYPE html>
<html>

<body>
  <h2>JavaScript</h2>
  <h3>The window.location.href</h3>
  <p id="root"></p>
</body>

</html>

同样值得一提的是:

  • 如果您需要相对路径,只需使用window.location.pathname;

  • 如果要获取主机名,可以使用window.location.hostname;

  • 如果您需要单独获取协议,请使用 window.location.protocol

    • 另外,如果您的页面具有hash标签,则可以像这样获得它window.location.hash

所以window.location.href一次处理所有...基本上:

window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash === window.location.href;
    //true

window如果已经在窗口范围内,也不需要使用...

因此,在这种情况下,您可以使用:

location.protocol

location.hostname

location.pathname

location.hash

location.href

使用JavaScript获取当前URL


window.location.protocol +'//'+ window.location.hostname + window.location.pathname + window.location.hash === window.location.href; 并非总是如此!window.location.pathname缺少GET参数。
AssassiN

40

要获取路径,可以使用:

console.log('document.location', document.location.href);
console.log('location.pathname',  window.location.pathname); // Returns path only
console.log('location.href', window.location.href); // Returns full URL


35

打开Developer Tools,在控制台中键入以下内容,然后按Enter

window.location

例如:以下是当前页面上结果的屏幕截图。

在此处输入图片说明

从这里获取您的需求。:)


29

使用:window.location.href

如上所述,document.URL 更新不会更新window.location。参见MDN


21
  • 使用window.location.href以获得完整的URL。
  • 使用window.location.pathname得到URL离开主机。

4
window.location.pathname不包含查询和哈希片段
OMGPOP,2015年


10
var currentPageUrlIs = "";
if (typeof this.href != "undefined") {
       currentPageUrlIs = this.href.toString().toLowerCase(); 
}else{ 
       currentPageUrlIs = document.location.toString().toLowerCase();
}

上面的代码也可以帮助某人


2
您将.toLowerCase()应用于实际更改它的URL。某些服务器区分大小写,(Linux等)
AnthonyVO

您应该详细地使用window.href。该代码仅在此===窗口的上下文中有效,但是,并非总是如此,尤其是当有人粘贴此解决方案时。
Deadboy

区分大小写的不是“某些”服务器。它是MOST服务器。因此,我同意AnthonyVO的观点:更改URL的大小写是一个非常糟糕的主意。
mivk 2015年

您不能降低URL(确保不会破坏它)!如果url为http://www.server.com/path/to/Script.php?option=A1B2C3,如果文件系统区分大小写(Linux / Unix),则不必Script.php和script.php相同。即使不区分大小写(Windows,某些Mac OS),?option=A1B2C3也不相同?option=a1b2c3,甚至?Option=A1B2C3。仅服务器区分大小写:www.server.com或www.SeRvEr.cOm相同。
FrancescoMM

8

添加结果以供快速参考

window.location;

 Location {href: "/programming/1034621/get-the-current-url-with-javascript",
 ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ, …}

文件位置

  Location {href: "/programming/1034621/get-the-current-url-with-javascript", 
ancestorOrigins: DOMStringList,
 origin: "https://stackoverflow.com",
 replace: ƒ, assign: ƒ
, …}

window.location.pathname

"/questions/1034621/get-the-current-url-with-javascript"

window.location.href

"/programming/1034621/get-the-current-url-with-javascript"

location.hostname

"stackoverflow.com"

7

对于带有查询字符串的完整URL:

document.location.toString().toLowerCase();

对于主机URL:

window.location

11
您将.toLowerCase()应用于实际更改它的URL。某些服务器区分大小写,(Linux等)
AnthonyVO

如前所述,您不能降低URL(确保不会破坏它)的位置!如果url为server.com/path/to/Script.php?option=A1B2C3,则如果文件系统区分大小写(Linux / Unix),则Script.php和script.php不必相同。即使不区分大小写(Windows,某些Mac OS),?option = A1B2C3也不同于?option = a1b2c3,甚至?Option = A1B2C3。仅服务器区分大小写:www.server.com或www.SeRvEr.cOm相同。
FrancescoMM

谢谢AnthonyVO指出这一点。我们只能使用document.location.toString()来获取完整的URL。toLowerCase()就像脚本中的indexOf一样进行比较。
Syed Nasir Abbas

4

在jstl中,我们可以使用来访问当前的URL路径pageContext.request.contextPath。如果要进行Ajax调用,请使用以下URL。

url = "${pageContext.request.contextPath}" + "/controller/path"

示例:对于页面,http://stackoverflow.com/posts/36577223将给出http://stackoverflow.com/controller/path


4

获取当前位置对象的方法是window.location

将此与进行比较document.location,后者最初仅将当前URL作为字符串返回。可能是为了避免混淆,document.location已替换为document.URL

并且,所有现代浏览器都映射document.locationwindow.location

实际上,为了确保跨浏览器的安全,您应该使用window.location而不是document.location



3

Nikhil Agrawal的答案很好,只需在此处添加一个小示例,您就可以在控制台中进行操作以查看实际的不同组件:

在此处输入图片说明

如果您想要不带路径或查询参数的基本URL(例如,针对AJAX请求同时在开发/登台和生产服务器上工作),window.location.origin最好的做法是保留协议和可选端口(在Django开发中,有时有一个非标准端口,如果您仅使用主机名等,则会中断该端口。)


0
   location.origin+location.pathname+location.search+location.hash;

0

您可以通过以下location.href 方式获取当前页面的完整链接,并获取当前控制器的链接,请使用:

location.href.substring(0, location.href.lastIndexOf('/'));


0

如果您指的是具有ID的特定链接,则此代码可以为您提供帮助。

$(".disapprove").click(function(){
    var id = $(this).attr("id");

    $.ajax({
        url: "<?php echo base_url('index.php/sample/page/"+id+"')?>",
        type: "post",
        success:function()
        {
            alert("The Request has been Disapproved");
            window.location.replace("http://localhost/sample/page/"+id+"");
        }
    });
});

我在这里使用ajax提交ID并使用window.location.replace重定向页面。只需id=""按照说明添加属性。



-2

首先检查页面是否已完全加载

browser,window.location.toString();

window.location.href

然后调用一个带有url,URL变量并在控制台上打印的函数,

$(window).load(function(){
   var url = window.location.href.toString();
   var URL = document.URL;
   var wayThreeUsingJQuery = $(location).attr('href');
   console.log(url);
   console.log(URL);
   console.log(wayThreeUsingJQuery );
});
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.