简介
在 Web 开发中，有时需要获取当前脚本的 URL，但是直接使用 document.currentScript 得到的 URL 不一定正确。current-script-polyfill 这个 npm 包用于解决这个问题。
本文将介绍如何在前端项目中使用 current-script-polyfill，并且结合代码示例演示使用方法和实际应用场景。
安装
current-script-polyfill 可以直接通过 npm 安装：
npm install current-script-polyfill --save
也可以通过 CDN 引入：
<script src="https://cdn.jsdelivr.net/npm/current-script-polyfill"></script>
使用方法
使用 current-script-polyfill 只需要在需要获取当前脚本 URL 的地方添加以下代码即可：
import 'current-script-polyfill'; const currentScript = document.currentScript; const currentScriptUrl = currentScript.src; console.log(currentScriptUrl);
或者在 HTML 页面中直接使用：
<script src="./your-script.js"></script> <script> console.log(document.currentScript.src); </script> <script src="https://cdn.jsdelivr.net/npm/current-script-polyfill"></script>
方法跟使用原生 document.currentScript.src 一样，只是在引入 current-script-polyfill 后可以确保获取到的 URL 是正确的。
示例代码
以下是一个示例代码，将使用 current-script-polyfill 获取当前脚本 URL，并使用 AJAX 请求相对应的 JSON 文件。
HTML 文件
-- -------------------- ---- ------- --------- ----- ----- ------------- ------ ----- ---------------- --------------------------- ------- -------------------------- ------- -------------------------------------------------------------------- ------- ------ ---- ------------------- ------- -------
JavaScript 文件 index.js
import 'current-script-polyfill';
const currentScript = document.currentScript;
const currentScriptUrl = new URL(currentScript.src);
const jsonUrl = `${currentScriptUrl.origin}/data.json`;
// 发送 AJAX 请求
fetch(jsonUrl)
.then(response => response.json())
.then(data => document.getElementById('content').textContent = data.content);JSON 文件 data.json
{
"content": "Hello, World!"
}当访问这个 HTML 页面时，它会在获取 current-script-polyfill 的资源后自动加载到 index.js，并使用 fetch 方法获取 data.json 中的数据，然后展示到页面上。
总结
current-script-polyfill 是一个解决前端获取当前脚本 URL 不正确的问题的优秀工具。它的用法简单，只需要在需要获取当前脚本 URL 的地方加载该 npm 包即可。
本文介绍了如何使用 current-script-polyfill，并且结合代码示例演示了它的应用场景，希望读者在实际开发中能够借鉴本文的思路，并在项目中灵活应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193666