使用JavaScript获取当前URL?

我只想得到网站的URL。不是从链接中获取的URL。在页面加载时,我需要能够获取完整的、当前的网站URL,并将其设置为一个变量,以便随心所欲地使用。

3502882 次浏览

获取当前页面URL:

window.location.href

用途:

window.location.href

正如评论中所述,下面的行可以工作,但它为Firefox设置了错误。

document.URL

DOMString类型的URL,只读

使用window.location对与当前帧关联的位置对象进行读写访问。如果您只想将地址作为只读字符串获取,您可以使用document.URL,它应该包含与window.location.href相同的值。

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

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

URL信息访问

JavaScript为您提供了许多检索和更改当前URL的方法,这些方法显示在浏览器的地址栏中。所有这些方法都使用#0对象,它是Window对象的属性。您可以通过阅读#3来读取当前Location对象:

var currentLocation = window.location;

基本URL结构

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

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

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

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

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

  • 哈希: URL的锚点部分,包括哈希符号(#)。

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

  • href-整个URL
  • 协议-URL的协议
  • 主机-URL的主机名和端口
  • 主机名-URL的主机名
  • 端口-服务器用于URL的端口号
  • 路径名-URL的路径名
  • 搜索-URL的查询部分
  • 哈希-URL的锚点部分
  • <强>起源-window.location.protocol + '//' + window.location.host

我希望你得到你的答案。

使用:window.location.href

如上所述,更新window.locationdocument.URL不更新。见MDN

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

document.location.toString()

对于主机URL:

window.location
  • 使用window.location.href获取完整的URL。
  • 使用window.location.pathname获取离开主机的URL。

要获取路径,您可以使用:

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

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

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

而且,所有现代浏览器都将document.location映射到window.location

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

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

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

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

你可使用以下连结:

JavaScript:

 // Using href
var URL = window.location.href;


// Using path
var URL = window.location.pathname;

JQuery :

$(location).attr('href');

您可以通过 location.href获得当前页面的完整链接 要获得当前控制器的链接,请使用:

location.href.substring(0, location.href.lastIndexOf('/'));
location.origin+location.pathname+location.search+location.hash;

还有

location.href

也一样。

打开 开发工具,在 控制台中键入以下内容,然后按 进来

window.location

例句: 下面是当前页面结果的截图。

enter image description here

从这里拿你需要的东西

好的,使用纯 JavaScript 很容易获得当前页面的 完整网址。例如,请在此页尝试以下代码:

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

Get the current URL with JavaScript

为快速引用添加结果

位置;

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

文件,地点

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

路径名

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

Window.location.href

"https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript"

Location.hostname

"stackoverflow.com"

使用 JavaScript 获取当前 URL:

  • Location.toString () ;

  • Window.location.href

如果你是指一个具体的链接,有一个 身份证这个代码可以帮助你。

$(".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.place重定向页面。只需按照说明添加一个属性 id=""

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

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 );
});

对于那些想要一个实际的 URL 对象的人来说,可能是一个将 URL 作为参数的实用程序:

const url = new URL(window.location.href)

Https://developer.mozilla.org/en-us/docs/web/api/url

Nikhil Agrawal 的回答很棒,在这里添加一个小例子,你可以在控制台中看到不同的组件在运行:

enter image description here

如果你想要一个没有路径或查询参数的基本 URL (例如在开发/准备和生产服务器上同时运行 AJAX 请求) ,window.location.origin是最好的,因为它保留了协议和可选端口(在 Django 开发中,有时你有一个非标准端口,如果你只是使用主机名等,它就会破坏它)

很短

location+''

let url = location+'';


console.log(url);

你有很多方法可以做到这一点。

1:

location.href;

2:

document.URL;

3:

document.documentURI;

用这个:

var url = window.location.href;


console.log(url);


// http://127.0.0.1:8000/projects/page/2?name=jake&age=34
let url = new URL(window.location.href);
/*
hash: ""


host: "127.0.0.1:8000"


hostname: "127.0.0.1"


href: "http://127.0.0.1:8000/projects/page/2?username=jake&age=34"


origin: "http://127.0.0.1:8000"


password: ""


pathname: "/projects/page/2"


port: "8000"


protocol: "http:"


search: "?name=jake&age=34"


username: ""
*/


url.searchParams.get('name')
// jake


url.searchParams.get('age')
// 34


url.searchParams.get('gender')
// null

要获得路径,可以使用:

http://www.example.com:8082/index.php#tab2?foo=789


Property                    Result
------------------------------------------
window.location.host        www.example.com:8082
window.location.hostname    www.example.com
window.location.port        8082
window.location.protocol    http:
window.location.pathname    index.php
window.location.href        http://www.example.com:8082/index.php#tab2
window.location.hash        #tab2
window.location.search      ?foo=789
window.location.origin      https://example.com

enter image description here