如何使用 JavaScript 显示加载文档的服务器域名？

我们使用document对象的window.location.hostname属性，使用JavaScript来显示加载文档的服务器域名。document对象是DOM的一部分，对应于浏览器加载的当前网页。它包含有关浏览器以及网页状态的所有信息。

互联网上可用的每个资源或计算机都有一个地址，该地址要么是IPV4（192.88.99.255），要么是IPV6（2001:db8:3333:4444:5555:6666:7777:8888）。这些地址对计算机来说很好，但对我们来说却不是。域名系统是在此寻址组织之上的一层抽象，通过提供这些地址的域名。

google.com的IP地址分别为IPV4 – 142.250.183.174和IPV6 – 2404:6800:4009:825::200e。记住这个地址有点太麻烦了，而且我们还有数百个这样的地址需要记住。域名系统使我们能够通过简单的语法名称轻松记住网页的位置。

使用window.location.hostname属性

如果想了解URL及其包含的各种属性，那么window.location对象是一个重要的资源。它包含一系列属性，例如

  • window.location.protocol

  • window.location.port

  • window.location.pathname

  • window.location.hostname

  • window.location.host

hostname属性返回网页的域名。

因此，对于像这样的典型URL

https://tutorialspoint.com/java-testing-learn-from-scratch/index.asp

域名是www.tutorialspoint.com

语法

var myDomain = window.location.hostname;

我们调用hostname属性并将其返回的值（一个字符串）存储在变量myDomain中。

让我们看一个例子来更好地理解。

示例 1

在下面的代码片段中，我们提取主机名并在HTML主体中记录它。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"> </div>
   <script>
      var myDomain = window.location.hostname;
      document.getElementById("result").innerHTML = "<br>Domain name of the server that loaded the document: "+ myDomain;
   </script>
</body>
</html>

使用window.location.host属性

window.location.host也返回网页的域名，但此外，它还返回端口号后跟域名，这是一个额外的信息。在大多数情况下，除非在URL中指定了端口号，否则host和hostname将返回相同的结果。

语法

var myDomain = window.location.host;

我们调用hostname属性并将其返回的值（一个字符串）存储在变量myDomain中。

让我们看一个例子来更好地理解。

示例 2

在下面的程序中，我们提取网页的host属性并在HTML主体中记录它。

<!DOCTYPE html>
<html>
<body>
   <div id = "result"> </div>
   <script>
      var myDomain = window.location.host;
      document.getElementById("result").innerHTML = "<br>Domain name of the server that loaded the document: "+ myDomain;
   </script>
</body>
</html>

我们也可以对HTML文档中已存在的链接使用hostname属性。

for(var i = 0 ; i < document.links.length ; i++){
   var ithHostname = document.links[i].hostname;
}

在这里，我们找到文档中存在的链接数量，然后遍历它们以查找它们的主机名并将其存储在ithHostname中。

让我们通过一个例子更好地理解这一点 -

示例 3

在下面的代码片段中，我们有多个指向不同开源站点的链接，以及HTML和CSS的教程。我们使用上述语法引用文档的链接，并在HTML主体中记录所有链接的域名。

<!DOCTYPE html>
<html>
<body>
   <a href="https://www.tutorix.com/">Tutorix</a>
   <br>
   <a href="https://tutorialspoint.com/javascript/">JavaScript</a>
   <br>
   <a href="https://tools.tutorialspoint.com/">Tools </a>
   <br>
   <a href="https://tutorialspoint.com/html5/">HTML</a>
   <br>
   <a href="https://tutorialspoint.com/css/">CSS</a>
   <br>
   <br>
   <button onclick = "displayHostName()">Find Domains !</button>
   <div id = "result"> </div>
   <script>
      function displayHostName(){
         var numberOfLinks = document.links.length;
         var resultDiv = document.getElementById("result");
         var text = "";
         for(var i = 0 ; i < numberOfLinks ; i++){
            var linkName = document.links[i].text;
            var hostname = document.links[i].hostname;
            text += linkName + " -> " + hostname + "<br>";
         }
         resultDiv.innerHTML = text;
      }
   </script>
</body>
</html>

查找域名按钮触发displayHostName()javascript函数，该函数依次遍历HTML文档中的所有链接，并在HTML主体中记录它们的域名。

结论

在本教程中，我们讨论了获取加载文档的域名服务器的两个主要属性。它们是window.location.hosname和window.location.host。

更新于：2022年9月21日

2K+ 次浏览

开启你的职业生涯

通过完成课程获得认证

开始学习
广告