JS获取当前URL域名的完整指南

发布时间：2023-05-19

一、JS获取当前域名地址

在前端开发过程中，经常需要获取当前域名地址，可用 window 对象中的 location 属性来获取当前页面的 URL。例如，以下示例将获取当前域名地址：

var currentDomain = window.location.href;
console.log(currentDomain);

上述代码中，window.location.href 返回当前页面的 URL，输出结果如下：

http://www.example.com

此时的结果是完整的 URL 地址（包括域名、路径和参数）。

二、JS获取当前URL

获取当前 URL 可以通过 window.location 对象中的属性实现，例如下面的代码将获取当前 URL：

var currentUrl = window.location.pathname;
console.log(currentUrl);

输出结果仅包括当前路径：

/example.html

如果需要获取完整的 URL，可以使用 window.location.href 属性：

var currentUrl = window.location.href;
console.log(currentUrl);

这将输出当前页面的完整 URL 地址：

http://www.example.com/example.html

三、JS截取URL域名

如果需要仅获取当前页面的域名，可以使用正则表达式和 string.replace() 方法来实现。例如，以下示例将获取当前域名：

var currentDomain = window.location.href.replace(/^(https?|ftp):\/\/(.+)$/i,'$2');
console.log(currentDomain);

输出结果仅包括当前域名：

www.example.com

四、JS获取域名和端口

在一些特殊情况下，需要同时获取域名和端口，可以使用 window.location.host 属性来实现，例如以下代码将返回当前域名和端口：

var currentHost = window.location.host;
console.log(currentHost);

输出结果如下：

www.example.com:80

如果当前页面使用的是 HTTPS 协议，则输出结果中会包括 443 端口。

五、JS获取网址域名

在涉及跨域操作的场景中，需要获取网址域名而非当前页面的域名，可以使用 document.referrer 属性来获取。例如以下代码将返回包含来源页面域名的 URL：

var referrer = document.referrer;
console.log(referrer);

如果当前页面是通过直接输入 URL 地址进入的，将无法获取到引用来源。

六、JS获取协议和域名

有时需要获取协议和域名，可以使用 window.location.origin 属性来实现。例如以下代码将输出当前页面的协议（HTTP 或 HTTPS）和域名组成的字符串：

var currentProtocolAndDomain = window.location.origin;
console.log(currentProtocolAndDomain);

输出结果如下：

http://www.example.com

七、JS如何获取域名

获取域名和主机名的方法存在细微的差别。在这里我们介绍一下获取主机名和二级域名的方法 —— 使用 window.location.hostname 属性。例如以下代码将输出当前页面的主机名：

var currentHostname = window.location.hostname;
console.log(currentHostname);

输出结果仅包括主机名（不包括端口）：

www.example.com

八、JS接口安全域名怎么获取

为了保证在网站中使用 API 接口的安全性，一些第三方提供商要求只允许授权域名调用其 API 接口。在这种情况下，需要获取当前页面的安全域名。可以使用 window.location.origin 属性来获取，或者使用正则表达式从当前页面 URL 中截取域名。例如，以下代码使用正则表达式获取当前安全域名：

var currentURL = window.location.href;
var pattern =/^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;
var authorizationDomain = pattern.exec(currentURL)[0];
console.log(authorizationDomain);

上述代码中，使用正则表达式第一个匹配项就是当前页面的安全域名，输出结果形如以下格式：

http://www.example.com

九、JS获取其他域名cookie

如果需要从其他域名获取 cookie，可以在请求头中添加 withCredentials 字段，以便在 ajax 请求时携带 cookie。例如以下代码进行一个 ajax 请求：

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'https://www.example.com/api', true);
xhr.send();

在上述代码中，withCredentials 字段设置为 true 将启用 cookie 携带功能。

总结

以上详细介绍了从 JS 获取当前 URL 域名的多个方面，包括获取当前域名地址、获取当前 URL、截取 URL 域名、获取域名和端口、获取网址域名、获取协议和域名、获取主机名和二级域名、获取接口安全域名以及获取其他域名 cookie。以上内容对于前端开发过程中获取 URL 域名非常有用。

推荐文章