在前端开发中，有时需要获取当前网页的域名信息，以便进行相关操作。本文将介绍如何使用JavaScript获取当前网页的域名，并提供示例代码和讨论。
获取当前域名的方法
JavaScript提供了多种方式来获取当前域名。以下是比较常用的几种方法：
1. 使用 location 对象
location 对象包含了当前页面的 URL 信息，可以通过它来获取当前域名。具体代码如下：
const domainName = window.location.hostname; console.log(domainName); // 输出当前域名，比如：example.com
2. 使用正则表达式解析URL
另一种方法是使用正则表达式解析URL，在其中提取出域名部分。代码如下：
// 获取当前URL const currentURL = window.location.href; // 使用正则表达式匹配域名 const domainName = currentURL.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n]+)/im)[1]; console.log(domainName); // 输出当前域名，比如：example.com
3. 使用 document.domain 属性
如果当前页面嵌套在某个iframe或者子域名下，可以使用 document.domain 属性来获取顶级域名。代码如下：
const domainName = document.domain; console.log(domainName); // 输出当前域名，比如：example.com
示例代码
下面是一个获取当前域名的完整示例代码：
-- -------------------- ---- ------- -------- --------------- - -- ------ -------- -- ----- ---------- - ------------------------- ------------------- ------------ -- ---------------- ----- ---------- - --------------------- ----- ------ - -------------------------------------------------------- ----- ----------- - ---------------------------- ------------------- ------------- -- ------ --------------- -- ----- ----------- - ---------------- ------------------- ------------- - ----------------
深度讨论
1. http 和 https 的区别
在获取当前域名时，有可能会遇到 http 和 https 的区别。一般来说，使用 location 对象获取到的域名是带有协议头的，比如 https://example.com 或者 http://example.com。而使用正则表达式获取到的域名只包含域名部分，不带有协议头。
如果需要获取不带协议头的域名，可以使用以下代码：
const domainName = window.location.hostname.replace(/(^\w+:|^)\/\//, ''); console.log(domainName); // 输出 example.com
2. 跨域问题
在某些情况下，由于浏览器的同源策略，可能无法获取到其他域名下的信息。比如，如果当前页面在 https://www.example.com 下，想要获取 https://api.example.com 下的信息，则会出现跨域问题。
解决跨域问题的方法有很多种，这里不再赘述。
指导意义
本文介绍了JavaScript中获取当前域名的几种常用方法，并提供了相关示例代码和讨论。掌握这些知识可以帮助前端开发者更好地处理与域名相关的问题，从而提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10237
