如何使用 JavaScript 顯示文件的完整 URL？

我們使用document物件的URL屬性來使用JavaScript顯示文件的完整URL。DOM的一部分的document物件對應於瀏覽器載入的當前網頁。它包含有關瀏覽器以及網頁狀態的所有資訊。它可以被視為在呈現網頁的HTML結構後獲得的層次結構。

URL代表統一資源定位符。它包含網際網路上資源的地址。一個典型的URL如下所示：

http://www.example.com/index.html

它是網際網路上資原始檔index.html的統一地址，這意味著它可以在此位置被普遍找到。

JavaScript的文件物件模型在HTML頁面上充當抽象層，為其建立基於物件的模型。document物件是層次結構的入口點，還包括其他物件的body、table等HTML標籤。

它包含許多與瀏覽器載入的當前網頁以及網頁瀏覽器相關的屬性。其中一些是：

  • document.URL
  • document.getElementById
  • document.characterSet
  • document.contentType
  • document.images

使用 document.URL 屬性

它是document物件的屬性。它包含文件的位置，以字串形式表示。它具有上面示例中給出的格式。

語法

var str = document.URL;

這裡str是儲存文件完整URL的字串。

讓我們看一個例子來更好地理解。

示例 1

在下面的程式碼片段中，我們將使用document.URL屬性顯示頁面的位置。

<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <div id = "url"></div>
   <script>
      var str = document.URL;
      document.getElementById("url").innerHTML = "URL: " + str;
   </script>
</body>
</html>

它在主體中列印文件的URL。

從document物件獲得的URL可以用於不同的目的。讓我們看一個例子。

示例 2

在下面的程式碼片段中，我們將建立一個按鈕，該按鈕首先提取當前文件的URL，然後使用相同的URL開啟一個新的選項卡/視窗，從而複製當前網頁。

<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <center>
      <p>This button will create a new browser tab with the same content. </p>
   </center>
   <div id = "url"></div>
   <script>
      var url = document.URL;
      document.getElementById("url").innerHTML = "URL: " + url ;
      function replicateTab(){
         window.open(url);
      }
   </script>
   <center>
      <button id = "button" onclick = "replicateTab()">Click me to replicate ! </button>
   </center>
</body>
</html>

顯示文件完整URL的另一種方法是使用document.documentURI屬性，該屬性返回位置作為字串。

使用document.documentURI屬性

URI代表統一資源識別符號。統一資源識別符號是唯一標識網路上邏輯或物理資源的字元字串。它與URL不同。

語法

var str = document.documentURI;

讓我們看一個例子。

示例 3

在下面的程式中，我們將使用document.documentURI屬性顯示頁面的位置。

<!DOCTYPE html>
<html>
<head>
   <title>URI of a document in JavaScript Example</title>
</head>
<body>
   <div id = "url"></div>
   <script>
      var str = document.documentURI;
      document.getElementById("url").innerHTML = "URI: " + str;
   </script>
</body>
</html>

URL是識別符號，用於定位資源的地址並指定檢索它的技術。

但是，document.documentURI和document.URL都返回網際網路上網頁位置的相同字串表示形式。

讓我們用一個例子來說明：

示例 4

在下面的程式碼片段中，我們將分別在兩個變數中提取URL和URI屬性，並比較它們以記錄成功訊息。

<!DOCTYPE html>
<html>
<head>
   <title>URL of a document in JavaScript Example</title>
</head>
<body>
   <div id = "url"> </div>
   <script>
      var url = document.URL
      var uri = document.documentURI
      var urlDiv = document.getElementById("url")
      checkValidity()
      function checkValidity(){
         if(url == uri){
            urlDiv.innerHTML = "Success !";
         }
         else{
            urlDiv.innerHTML = "Failure !";
         }
      }
   </script>
</body>
</html>

在上面的程式碼中，我們建立了兩個變數，在其中儲存document.URL和document.documentURI。然後我們比較這些字串並在HTML主體中記錄訊息。

結論

文件物件模型提供了很大的靈活性和功能。它幫助程式設計師將瀏覽器屬性以及網頁屬性與HTML整合。

更新時間： 2022年9月21日

2K+ 次瀏覽

開啟你的職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.