如何在 JavaScript 中获取当前网页的协议和页面路径？
协议
指定要使用的数据传输协议的 URL 段称为 URL 协议。在此示例中，https:// 表示 HTTPS 协议。
我们将在本文中学习如何获取当前看到的网页或网站的网站 URL。文档对象的“URL”属性（其中包含有关当前 URL 的数据）用于获取当前 URL。“URL”属性返回一个字符串，其中包含当前看到的页面的完整地址以及HTTP协议，例如（http://）。
语法
以下是协议方法的语法
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的协议方案是如何与最后一个冒号（:)一起返回的。使用 url.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> <p>Protocol is: <span class="protocol"></span></p> <button οnclick="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 轻松访问）包含有关网页当前 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 代码中执行该方法以实现这些功能。
