如何在 JavaScript 中获取当前网页的协议和页面路径？

很酷的站长

于 2022-12-19 22:04:52 发布

阅读量917

点赞数

分类专栏：编程笔记文章标签： javascript html servlet

原文链接：https://s.10zhan.com/art/109.html

版权

编程笔记专栏收录该内容

554 篇文章 18 订阅

订阅专栏

协议

指定要使用的数据传输协议的 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 代码中执行该方法以实现这些功能。

很酷的站长

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何在 JavaScript 中获取当前网页的协议和页面路径？

在这个例子中，让我们了解页面的当前URL是如何存储在下面代码的变量“result”中的。文档对象的“URL”属性（其中包含有关当前 URL 的数据）用于获取当前 URL。“URL”属性返回一个字符串，其中包含当前看到的页面的完整地址以及HTTP协议，例如（http://）。在这个例子中，我们将使用 JavaScript 检索当前页面的 URL，然后将其保存在变量中。在 JavaScript 中，您可以借助 window.location.href 属性检索当前网页的 URL，如上例所示。
复制链接

扫一扫