如何在 HTML 中引用外部 Python 文件执行脚本

本文介绍使用 pyscript 框架通过 `` 标签加载外部 python 文件的方法，并说明本地开发时需配合 http 服务器运行，避免因浏览器安全策略导致的跨域或文件读取失败问题。

在 Web 前端中直接运行 python 代码并非原生支持，但借助 PyScript（一个基于 WebAssembly 的 Python 运行时框架），你可以在浏览器中执行 Python 脚本，并像引入 js 或 css 那样模块化组织代码。关键在于：不能直接用 file:// 协议加载本地 .py 文件，而必须通过 HTTP 服务提供。

✅ 正确做法：使用 + 本地 HTTP 服务器

首先，在 html 中引入 PyScript 运行时（推荐使用 cdn）：

⚠️ 注意：src 属性值是相对或绝对 URL（如 ./game_logic.py、/scripts/main.py 或 https://example.com/logic.py），不是本地文件路径（如 C:mygame.py）。浏览器出于安全限制，禁止前端脚本直接读取本地文件系统。

接着，确保你的 Python 文件（例如 game_logic.py）放在与 HTML 同一目录（或按路径正确配置），内容示例：

# game_logic.py from pyscript import display import random  def start_game():     num = random.randint(1, 100)     display(f"? 游戏已启动！随机数已生成：{num}", append=False)  # 自动执行初始化（可选） start_game()

? 本地开发必备：启动简易 HTTP 服务器

在包含 index.html 和 game_logic.py 的目录下，打开终端，运行：

立即学习“Python免费学习笔记（深入）”；

# Python 3.7+ python -m http.server 8000

然后访问 http://localhost:8000 即可正常加载并执行外部 Python 文件。若使用其他端口（如 8080），请同步调整命令和浏览器地址。

❗重要注意事项

• 不支持 import 大多数第三方包：PyScript 当前仅内置少量常用库（如 micropip、random、math），numpy、pygame 等无法直接使用；复杂游戏逻辑建议拆分为前端（HTML/CSS/JS）+ 后端（flask/fastapi）架构。
• 无 DOM 操作权限？用 pyscript.display() 或 Element API：

  from pyscript import Element Element("output").write("Hello from Python!")

• 调试技巧：打开浏览器开发者工具 → console 标签页，查看 PyScript 错误日志（如 404 Not Found 表示路径错误，CORS 错误说明未启用 HTTP 服务）。

✅ 总结

通过合理使用 与本地 HTTP 服务，你既能保持 Python 游戏逻辑的清晰结构，又能无缝集成到 HTML ui 中——这是初学者迈向全栈 Python Web 开发的实用第一步。