如何在 JavaScript 中获取当前网页的协议和页面路径?
协议
指定要使用的数据传输协议的 URL 段称为 URL 的协议。在此示例中，https:// 表示 HTTPS 协议。
在本文中，我们将学习如何获取当前看到的网页或网站的网站 URL。Document 对象的"URL"属性包含当前 URL 的数据，用于获取当前 URL。"URL"属性返回一个字符串，其中包含当前看到的页面的完整地址以及 HTTP 协议，例如 (http://)。
语法
以下是 protocol 方法的语法
protocol = location.protocol;
示例 1
在此示例中，让我们了解如何使用 location.protocol 属性返回 URL 的协议方案以及最后的冒号 (:)。当前 URL 使用的协议主要由 window.location.protocol 属性返回 −
<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div id="result"></div> <script> const webUrl = new URL('https://www.tutorialspoint.com/index.htm'); document.getElementById("result").innerHTML =webUrl.protocol; </script> </body> </html>
示例 2
在此示例中，让我们了解如何使用 url.protocol 属性将 URL 的协议方案与最后一个冒号 (:) 一起返回。
<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <p>Protocol is: <span class="protocol"></span></p> <button onclick="protDetails()"> Click ME </button> <script type="text/javascript"> function protDetails() { current_url = window.location.href; url_object = new URL(current_url); getProtocol = url_object.protocol; document.querySelector('.protocol').textContent = getProtocol; } </script> </body> </html>
当前网页的页面路径
Web 客户端想要访问主机服务器上的特定资源，主机服务器上的路径名指示在哪里可以找到该资源。例如，/htdocs 目录充当 apache Web 服务器的根目录，可以使用其路径查看其中的任何内容。可以使用 window.location 轻松访问 location 对象，该对象包含有关网页当前 URL 的所有详细信息。
在此示例中，我们将使用 JavaScript 检索当前页面的 URL，然后将其保存在变量中。之后，我们将显示网页的当前 URL。
window.location 对象将在 window.location.href 属性的帮助下返回当前网页 URL
示例 3
在此示例中，让我们了解页面的当前 URL 是如何存储在以下代码中的变量"result"中的。然后，在使用其 ID 选择 div 标签后，使用 innerHTML 属性设置 HTML 内容。我们将包含当前显示页面的 URL 的变量发送到我们的 HTML 内容。
在浏览器上运行代码。您将能够在网页上看到当前页面的 URL。
<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <div id="result"></div> <body> <script type="text/javascript"> let getURL = window.location.href; document.getElementById("result").innerHTML = getURL; </script> </body> </html>
示例 4
在此示例中，让我们了解如何通过检查 window.location.pathname 属性来找到当前页面的路径名。
<!DOCTYPE html> <html> <title>How to get the protocol and page path of the current web page in JavaScript - TutorialsPoint</title> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <div id="result"></div> <body> <script type="text/javascript"> document.getElementById("result").innerHTML = "The Current Web page path is: " + window.location.pathname; </script> </body> </html>
简介
在 JavaScript 中，您可以借助 window.location.href 属性检索当前网页的 URL，如上例所示。
获取当前页面的 URL 可让您快速执行所需的任何操作。在本文中，我们研究了捕获 URL 后可能采取的一些操作以及如何在 JavaScript 代码中执行方法以实现这些功能。
