简介
在前端开发过程中，我们经常需要在页面中动态地插入 JavaScript 代码。使用 JavaScript 插入方式有多种，其中一种是在网页中使用 <script> 标签引入 JavaScript 文件，另一种是直接在网页中使用 <script> 标签嵌入 JavaScript 代码。但是，在某些情况下，这两种方式可能并不适用。例如：
- 需要动态地插入代码；
- 需要在页面中插入多个 JavaScript 文件或代码块；
- 需要在不同的浏览器环境下，动态地注入不同的 JavaScript 代码。
在这些情况下，可以使用 npm 包 js-injectable。js-injectable 是一个方便的工具，可以帮助我们动态地向网页中注入 JavaScript 代码。
安装
npm 包 js-injectable 可以通过 npm 安装。运行以下命令即可安装 js-injectable：
--- ------- -------------
使用
基本用法
使用 js-injectable 的基本用法非常简单。首先，要在项目中引入 js-injectable：
----- ------ - -------------------------
然后，就可以使用 inject 函数向页面中注入 JavaScript 代码：
--------------------- ------------
运行以上代码，就会在页面中弹出一个对话框显示 "Hello, world!"。
直接注入函数
使用 js-injectable 还可以直接将一个函数注入到页面中。例如：
-------- ----------- - ------------- ----------- - --------------
运行以上代码，js-injectable 将 hello 函数注入到页面中。此时，我们可以在控制台中输入 hello('world')，即可弹出一个对话框显示 "Hello, world!"。
加载外部文件
使用 js-injectable 还可以加载外部的 JavaScript 文件。例如：
-------------------------------------------
运行以上代码，js-injectable 将会在页面中注入一个 <script> 标签，并加载 https://example.com/test.js 文件。
注入选项
上面介绍的 js-injectable 的基本用法仅仅是 js-injectable 的冰山一角。js-injectable 还提供了很多有用的选项。例如，我们可以使用 inject 函数的第二个参数来指定一些选项：
-------
--------------------- -- -----------------
-
----- ---------
------------ -----
------ -----
------ -----
--------------- --------------
--
--运行以上代码，js-injectable 将会在页面中注入一个 <script> 标签，并设置 type 属性为 'module'，crossorigin 属性为 true，defer 属性为 true，async 属性为 true，referrerpolicy 属性为 'no-referrer'。
除了使用 inject 函数的第二个参数来指定选项以外，我们还可以使用 js-injectable 的其他 API 来设置选项。
下面是部分选项的说明：
- type：指定注入代码的 MIME 类型，默认为 text/javascript；
- crossorigin：指定是否开启 CORS 模式，默认为 false；
- defer：指定是否延迟执行注入的代码，默认为 false；
- async：指定是否异步执行注入的代码，默认为 false；
- referrerpolicy：指定引用的 referrer-policy，默认是 ""。
注入多个代码块
如果需要在页面中注入多个代码块，可以使用 group 函数。例如：
-------------- ----------------------- ----------------------- ---
运行以上代码，js-injectable 将会在页面中注入两个 <script> 标签，分别包含了两个代码块。
自定义其他选项
如果上述的选项不能满足我们的需求，我们还可以使用 js-injectable 提供的 html 函数自定义其他选项。例如：
----- ---- - --------------
----- ------ - --------------------- -
---- ------------------------------
----- -------------
------- -- -- -
------------------- ---------
--
---
--------------------运行以上代码，js-injectable 将会在页面中注入一个 <script> 标签，并设置 src 属性为 'https://example.com/test.js'，type 属性为 'text/plain'，并在脚本加载完成后打印 "Script loaded"。
示例代码
----- ------ - -------------------------
-- -- ---------- --
--------------------- ------------
-- ------
-------- ----------- -
------------- -----------
-
--------------
-- ---- ---------- --
-------------------------------------------
-- ----
-------
--------------------- -- -----------------
-
----- ---------
------------ -----
------ -----
------ -----
--------------- --------------
--
--
-- -------
--------------
-----------------------
-----------------------
---
-- -------
----- ---- - --------------
----- ------ - --------------------- -
---- ------------------------------
----- -------------
------- -- -- -
------------------- ---------
--
---
--------------------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055b0f81e8991b448d8b82