如何使用 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.tw/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.tw/javascript/">JavaScript</a> <br> <a href="https://tools.tutorialspoint.com/">Tools </a> <br> <a href="https://tutorialspoint.tw/html5/">HTML</a> <br> <a href="https://tutorialspoint.tw/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+ 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.