ChatGPT解决这个技术问题 Extra ChatGPT

使用 JavaScript 获取当前 URL?

我想要的只是获取网站 URL。不是从链接中获取的 URL。在页面加载时,我需要能够获取网站的完整当前 URL,并将其设置为变量以随意使用。


1
10 revs, 8 users 35%

利用:

window.location.href

如评论中所述,下面的行有效,但它在 Firefox 中存在错误。

document.URL

请参阅 URL of type DOMString, readonly


在 Firefox 12 中,document.URL 属性不会在 window.location 之后更新为锚点 (#),而 window.location.href 会。我没有测试任何其他版本的 Firefox。在 Chrome 20 和 IE9 中未发现使用 document.URL 的问题。
您还可以获得主机和清除位置:window.location.hostwindow.location.href.toString().split(window.location.host)[1]
那么document.baseURI是什么。基本上有 3 种方法来获取 url document.baseURIdocument.URL 和 & location
-1:如果您有一个带有 name="URL" 的框架、图像或表单,那么此属性将在 document 对象上隐藏,您的代码将中断。在这种情况下,document.URL 将改为引用 DOM 节点。最好使用 window.location.href 中的全局对象的属性。
获胜的“window.location.href”
T
The Red Pea

URL 信息访问

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

var currentLocation = window.location;

基本 URL 结构

<protocol>//<hostname>:<port>/<pathname><search><hash>

协议:指定用于访问 Internet 上的资源的协议名称。 (HTTP(无 SSL)或 HTTPS(有 SSL))

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

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

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

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

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

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

href - 整个网址

协议 - URL 的协议

host - URL 的主机名和端口

主机名 - URL 的主机名

port - 服务器用于 URL 的端口号

pathname - URL 的路径名

search - URL 的查询部分

hash - URL 的锚点部分

origin - window.location.protocol + '//' + window.location.host

我希望你得到你的答案。。


它们不是 window.location 的“方法”,而是属性和 here we have an examplevar stringPathName = window.location.pathname
@法比奥C。您可以通过 substring 将其删除。但是,当您想使用重定向时它可能很有用 document.location = "/page.html"; 将重定向到根页面 page.html
这不仅回答了上述问题。事实上,大约一个月前,我搜索了一种从 URL 字符串中获取一个或多个特定部分的好方法(我认为这可能是我试图获取的当前页面),即使其他问题更多-target,他们的答案没有这个目的那么有用和直接。
一个快速的建议是:在上面描述的基本 URL 结构中,有一个 search 的位置,但在下面的描述列表中,它被称为 query。也许他们可以调和,或者可以添加进一步的解释。
它被称为“搜索”而不是“查询”
M
Martijn Pieters

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


Z
Zanoni

获取当前页面 URL:

window.location.href

请注意,这是窗口的位置,而不是文档的位置。
这是同一件事。完整的当前 URL 是指文档路径(外部地址)。
它是否像 document.url 一样标准化? (我的意思是类似于 w3c 文档)
document 是规范定义的文档树的根。 window 通常是等价的,但在某些奇怪的情况下可能不会。
M
Marc.2377

好的,使用纯 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 = "该页面的完整网址是:
" + window.location.href;

JavaScript

window.location.href

提一下这些也不错:

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

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

如果你需要单独获取协议,也可以使用 window.location.protocol,如果你的页面有哈希标签,你可以像这样获取它:window.location.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

https://i.stack.imgur.com/NUGbD.png


E
Elena

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

console.log('document.location', document.location.href); console.log('location.pathname', window.location.pathname); // 仅返回路径 console.log('location.href', window.location.href); // 返回完整的 URL


T
Tmh

打开开发人员工具,在控制台中输入以下内容,然后按 Enter。

window.location

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

https://i.stack.imgur.com/EbfAs.png

从这里获取你需要的东西。 :)


D
Dorian

使用:window.location.href

如上所述,更新 window.location 时,document.URL不更新。请参阅MDN


P
Peter Mortensen

使用 window.location.href 获取完整的 URL。

使用 window.location.pathname 获取离开主机的 URL。


window.location.pathname 不包括查询和哈希片段
P
Peter Mortensen

您可以get the current URL location with a hash tag使用:

JavaScript:

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

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

jQuery:

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

不要使用 URL 作为变量名; window.URL 上已经有一个构造函数。见这里:developer.mozilla.org/en-US/docs/Web/API/URL/URL
S
Sebastian Simon

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

document.location.toString()

对于主机 URL:

window.location

W
Weilory

// 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

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

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


H
Hitesh Sahu

添加结果以供快速参考

窗口位置;

 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"

位置.主机名

"stackoverflow.com"

S
Seph Reed

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

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

https://developer.mozilla.org/en-US/docs/Web/API/URL


此方法的另一个优点是您可以将其用作 URL 构建器 - 添加或删除参数、更改路径等,然后使用 .toString() 方法始终获得完全有效、格式良好的 URL 字符串!
A
Apollo Data

Nikhil Agrawal 的回答很棒,只需在此处添加一个小示例,您就可以在控制台中查看不同组件的运行情况:

https://i.stack.imgur.com/ls587.png

如果您希望没有路径或查询参数的基本 URL(例如,针对 AJAX 请求在开发/登台和生产服务器上工作),window.location.origin 最好,因为它保留协议以及可选端口(在 Django 开发, 你有时有一个非标准端口,如果你只使用主机名等会破坏它。)


P
Peter Mortensen

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

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

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


P
Peter Mortensen

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

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

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

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


ز
زياد
location.origin+location.pathname+location.search+location.hash;

location.href

做同样的事情。


P
Programmer

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

1:

location.href;

2:

document.URL;

3:

document.documentURI;

G
Giacomo Casadei

用这个:

var url = window.location.href;控制台.log(url);


K
Kamil Kiełczewski

短的

location+''

让网址=位置+'';控制台.log(url);


P
Peter Mortensen

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

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

H
Hasib Kamal Chowdhury

使用 JavaScript 获取当前 URL:

window.location.toString(); window.location.href


J
JGallardo

如果您指的是具有 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=""


A
Ashish Kamble

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

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