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

我們使用document物件的URL屬性來使用JavaScript顯示文件的完整URL。document物件是DOM的一部分，對應於瀏覽器已載入的當前網頁。它包含有關瀏覽器以及網頁狀態的所有資訊。它可以被視為在渲染網頁的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代表統一資源識別符號。統一資源識別符號是唯一標識Web上邏輯或物理資源的字元字串。它與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.