正文

轻松掌握：JS获取域名端口号的5种方法及实战案例

/0 浏览量
0715

在Web开发中，获取当前页面的域名和端口号是一个常见的操作，这对于调试、跟踪和配置等任务非常有用。下面，我将详细介绍五种在JavaScript中获取域名和端口号的方法，并附上实战案例。

方法一：使用window.location.hostname和window.location.port

这种方法是最直接的方式，通过访问window.location对象的hostname和port属性来获取。

// 获取域名
const hostname = window.location.hostname;
console.log('域名:', hostname);

// 获取端口号
const port = window.location.port;
console.log('端口号:', port);

方法二：使用document.domain和document.port

这种方法在某些情况下更为适用，特别是在子域跳转时。

// 获取域名
const domain = document.domain;
console.log('域名:', domain);

// 获取端口号
const port = document.port;
console.log('端口号:', port);

方法三：使用window.location.href

通过解析完整的URL来获取域名和端口号。

// 获取域名
const url = window.location.href;
const hostname = new URL(url).hostname;
console.log('域名:', hostname);

// 获取端口号
const port = new URL(url).port;
console.log('端口号:', port);

方法四：使用window.location.protocol

结合window.location.protocol来获取包括协议在内的完整URL，然后从中提取域名和端口号。

// 获取完整的URL
const url = window.location.protocol + "//" + window.location.host + window.location.pathname;
console.log('完整URL:', url);

// 提取域名和端口号
const hostname = new URL(url).hostname;
const port = new URL(url).port;
console.log('域名:', hostname);
console.log('端口号:', port);

方法五：使用自定义函数

有时候，你可能需要更灵活地处理获取域名和端口号的逻辑。这时，你可以创建一个自定义函数来实现。

function getDomainAndPort() {
  const url = window.location.href;
  const hostname = new URL(url).hostname;
  const port = new URL(url).port;
  return { hostname, port };
}

const { hostname, port } = getDomainAndPort();
console.log('域名:', hostname);
console.log('端口号:', port);

实战案例

以下是一个简单的HTML页面，展示了如何在实际项目中使用这些方法。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取域名和端口号示例</title>
<script>
// 在这里添加上述JavaScript代码
</script>
</head>
<body>
<h1>获取域名和端口号</h1>
<div id="result"></div>
<script>
// 调用自定义函数获取域名和端口号，并显示在页面上
const { hostname, port } = getDomainAndPort();
document.getElementById('result').innerHTML = `域名: ${hostname}<br>端口号: ${port}`;
</script>
</body>
</html>

通过以上方法，你可以轻松地在JavaScript中获取域名和端口号，并在实际项目中应用。希望这些信息对你有所帮助！

-- 展开阅读全文 --