如何使用 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+ 次查看

启动你的职业生涯

完成课程获得认证

开始学习
广告