在前端开发中，我们常常需要获取当前页面的完整 URL，包括 protocol、host、path 等。而 full-url 是一个能够方便获取当前页面完整 URL 的 npm 包。
本文将为大家介绍 full-url 的使用方法、详细步骤以及示例代码。
安装
首先，我们需要在项目中安装 full-url。
打开命令行，输入如下代码：
npm install full-url
等待安装完成即可。
使用方法
在项目中引入 full-url：
const fullUrl = require('full-url');接下来就可以通过调用 fullUrl() 方法来获取当前页面的完整 URL，示例如下：
const currentUrl = fullUrl(); console.log(currentUrl);
返回值
fullUrl() 方法会返回一个对象，对象包含以下属性：
protocol：当前页面协议，如http或https。hostname：当前页面主机名。port：当前页面端口号。pathname：当前页面的路径名，即 URL 中主机名后的部分。search：当前页面的查询参数。hash：当前页面的 URL 中的标记值。
示例代码：
const currentUrl = fullUrl(); console.log(currentUrl.protocol); // 'https' console.log(currentUrl.hostname); // 'www.example.com' console.log(currentUrl.pathname); // '/home' console.log(currentUrl.search); // '?id=1234' console.log(currentUrl.hash); // '#section1'
完整示例代码
下面是一个完整的示例代码，用于获取当前页面的完整 URL，并展示页面上的 URL。
-- -------------------- ---- ------- ----- ------- - -------------------- -- -------- --- ----- ---------- - ---------- -- ----- --- --- ----- ----- - ------------------------------- -- ---- --- ----- ----------------- - ------------------- - ---- - ------------------- - ------------------- - ----------------- - ----------------
注意事项
- 在服务器端计算当前页面 URL 时，请注意使用服务器的协议、主机名、端口号等信息，而不是客户端信息。
- 如果在浏览器端使用，则需要注意浏览器跨域的问题，有些 URL 可能无法获取。
总结
full-url 是一个非常方便的 npm 包，能够方便地获取当前页面的完整 URL。使用简单，只需要在项目中引入即可。同时，使用时需要注意要确保获取到的 URL 是正确的，不要使用客户端信息来计算服务器端 URL。
希望这篇文章能够对大家在日常开发中使用 full-url 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/75712