如何使用 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+ 次浏览

开启你的职业生涯

通过完成课程获得认证

开始学习
广告