Shiny.py引入外部JS/CSS文件时出现HTTP/1.1 404 Not Found错误

问题根源分析 #

1. 404错误原因：你混淆了ui.include_js()和外部脚本引用的用法。ui.include_js()是直接将JS文件内容嵌入到页面的<script>标签中，不会生成带src属性的脚本请求；而你尝试用htmltools.tags.script(src="script.js")时，若文件路径配置不对，就会触发404。
2. 脚本无效果原因：你把JS脚本放在<head>中执行，此时页面的<body>还未渲染完成，document.body对象不存在，所以修改背景色的代码自然不会生效。

具体解决方案 #

方案一：嵌入JS内容（无外部请求，适合小脚本） #

保留ui.include_js()的用法，但需要修改JS代码，确保在DOM加载完成后执行：

• 修改script.js内容：

  document.addEventListener('DOMContentLoaded', function() {
      document.body.style.backgroundColor = "skyblue";
  });
  

• 原app.py中的ui.head_content(ui.include_js(js_file))无需改动，JS内容会直接嵌入到页面头部的<script>标签中，既不会产生外部请求，代码也会在DOM就绪后正常执行。

方案二：引用外部JS文件（适合大脚本，便于维护） #

1. 确保script.js放在项目根目录的www文件夹下（和你的CSS文件位置一致）。
2. 修改app.py，将脚本引用放在页面内容的末尾（避免DOM未加载完成的问题）：

   app_ui = ui.page_fluid(
       ui.head_content(ui.include_css(css_file)),
       div(
           {"class": "redbkg"},
           ui.h2("Hello Shiny!"),
           ui.input_slider("n", "N", 0, 100, 20),
           ui.output_text_verbatim("txt")
       ),
       # 把外部脚本引用放在页面最后
       ui.tags.script(src="script.js")
   )
   

   此时Shiny.py会自动从www目录加载script.js，不会出现404，且脚本执行时<body>已经存在，代码能正常生效。

关于Starlette和WASM的疑问 #

你的问题和这个无关。Shiny.py在原生Python模式下用Starlette的StaticFiles处理静态资源，WASM模式下用自定义实现，但两种模式都会默认把项目根目录下的www文件夹作为静态资源目录，只要你的文件位置正确，就能正常访问。

内容的提问来源于stack exchange，提问作者s-mabdurrazak