如何使用 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
語法
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。
資料結構
網路
關係資料庫管理系統
作業系統
Java
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP