ContextQMD
Back to Whistle

jsPrepend

docs/docs/rules/jsPrepend.md

2.10.55.4 KB
Original Source

jsPrepend

在现有响应内容体前面插入指定内容（仅对响应类型 content-type 包含 javascript，且包含响应内容体的状态码（如 200/500 等）有才效）

⚠️ 注意：204、304 等无响应内容体的请求不受影响

规则语法

txt
pattern jsPrepend://value [filters...]
参数描述详细文档
pattern匹配请求 URL 的表达式匹配模式文档
value文本或二进制内容，支持以下类型：
• 目录/文件路径
• 远程 URL
• 内联/内嵌/Values内容操作指令文档
filters可选过滤器，支持匹配：
• 请求URL/方法/头部/内容
• 响应状态码/头部过滤器文档

配置示例

内联方式

txt
www.example.com/path1 jsPrepend://(Hello) file://(-test-)
www.example.com/path2 jsPrepend://(Hello) file://(-test-) resType://js
www.example.com/path3 jsPrepend://(Hello) file://(-test-) resType://css
  • 请求 https://www.example.com/path1/to 响应内容变成
    html
    <!DOCTYPE html>
<script>Hello</script>-test-
  • 请求 https://www.example.com/path2/to 响应内容变成 Hello-test-
  • 请求 https://www.example.com/path3/to 响应内容变成 -test-

内嵌/Values方式

txt
``` body.txt
Hello world.
```
www.example.com/path1 jsPrepend://{body.txt} file://(-test-)
www.example.com/path2 jsPrepend://{body.txt} file://(-test-) resType://js
www.example.com/path3 jsPrepend://{body.txt}) file://(-test-) resType://css
  • 请求 https://www.example.com/path1/to 响应内容变成
    html
    <!DOCTYPE html>
<script>Hello world.</script>-test-
  • 请求 https://www.example.com/path2/to 响应内容变成 Hello world.-test-
  • 请求 https://www.example.com/path3/to 响应内容变成 -test-

本地/远程资源

txt
www.example.com/path1 jsPrepend:///User/xxx/test.js
www.example.com/path2 jsPrepend://https://www.xxx.com/xxx/params.js
# 通过编辑临时文件
www.example.com/path3 jsPrepend://temp/blank.js

为注入的脚本设置 <script> 标签属性

通过 jsPrepend 注入到 HTML 页面的脚本，Whistle 会自动为其包裹 <script> 标签。若需要为该标签设置额外的属性，如 nomodule、module、defer、async、crossorigin 等，可以使用 lineProps 参数进行配置。

txt
www.example.com/path1 jsPrepend://https://www.xxx.com/xxx/params.js lineProps://nomodule
www.example.com/path2 jsPrepend://https://www.xxx.com/xxx/params.js lineProps://module
www.example.com/path3 jsPrepend://https://www.xxx.com/xxx/params.js lineProps://defer
www.example.com/path4 jsPrepend://https://www.xxx.com/xxx/params.js lineProps://async
www.example.com/path5 jsPrepend://https://www.xxx.com/xxx/params.js lineProps://crossorigin

属性说明与示例

属性用途说明配置示例
nomodule传统浏览器中执行，不支持 ES 模块的浏览器会运行此脚本lineProps://nomodule
module声明为 ES 模块，支持模块化导入lineProps://module
defer异步加载，在文档解析完成后执行lineProps://defer
async异步加载，下载完成后立即执行lineProps://async
crossorigin启用跨域资源共享（CORS）模式lineProps://crossorigin

关联协议 {#related}

  1. 在响应内容前注入内容（Prepend To Body）：resPrepend
  2. 在响应内容前注入 HTML 内容（Prepend HTML To Body，响应类型必须为 text/html）：htmlPrepend
  3. 在响应内容前注入 CSS 内容（Prepend CSS To Body，响应类型必须为 text/html 或 text/css）：cssPrepend
  4. 在响应内容前注入 JS 内容（Prepend JS To Body，响应类型必须为 text/html、text/css 或 application/javascript）：jsPrepend
  5. 替换响应内容（Replace Body）：resBody
  6. 用 HTML 内容替换响应内容（Replace Body，响应类型必须为 text/html）：htmlBody
  7. 用 CSS 内容替换响应内容（Replace Body，响应类型必须为 text/html 或 text/css）：cssBody
  8. 用 JS 内容替换响应内容（Replace Body，响应类型必须为 text/html、text/css 或 application/javascript）：jsBody
  9. 在响应内容后追加内容（Append To Body）：resAppend
  10. 在响应内容后追加 HTML 内容（Append HTML To Body，响应类型必须为 text/html）：htmlAppend
  11. 在响应内容后追加 CSS 内容（Append CSS To Body，响应类型必须为 text/html 或 text/css）：cssAppend
  12. 在响应内容后追加 JS 内容（Append JS To Body，响应类型必须为 text/html、text/css 或 application/javascript）：jsAppend
  13. 使用关键字或正则表达式替换响应内容（Modify Body Text）：resReplace
  14. 覆盖响应内容中的 JSON/Form 对象（Modify Form/JSON）：resMerge
  15. 删除响应内容中的 JSON/Form 对象属性（Delete Form/JSON）：delete://resBody.xxx