当前位置：首页 > 文章列表 > 文章 > python教程 > 浏览器运行Python脚本的几种方式

浏览器运行Python脚本的几种方式

2025-08-22 13:23:57 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《浏览器运行Python脚本的几种方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

Python不能直接在浏览器运行，因浏览器仅原生支持JavaScript。主流方案是通过Flask等Web框架在服务器端执行Python，生成HTML返回浏览器；或使用Pyodide、Brython等技术将Python代码转译或通过WebAssembly在浏览器中模拟执行。

运行Python脚本如何通过浏览器运行运行Python脚本的浏览器执行基础方法

运行Python脚本，直接在浏览器里像JavaScript那样跑起来，这事儿吧，从技术栈的原生设计来看，是不太行的。浏览器里头，天生就懂HTML、CSS和JavaScript。Python，它得有个解释器才能跑，这解释器通常是在服务器端或者你的本地机器上。所以，如果你想让Python和浏览器发生点关系，通常得走两条路：一条是让Python在服务器上干活，把结果甩给浏览器看；另一条，就是通过一些非常规的，或者说，是新兴的技术，让Python的代码在浏览器环境里“模拟”运行。

解决方案

要让Python脚本在浏览器中“运行”，核心在于理解浏览器本身的执行环境。它不直接支持Python，所以我们需要一个“中间人”或者“翻译官”。

最常见且成熟的方案，是服务器端渲染（Server-Side Rendering, SSR）。Python在这里扮演的是一个后端角色。你用Python的Web框架，比如Flask、Django或者FastAPI，来构建一个Web应用。当用户在浏览器里访问你的页面时，浏览器发送一个请求给服务器。服务器上的Python应用接收到请求，根据请求内容，可能去数据库取数据，进行逻辑处理，然后把处理好的数据和HTML模板结合起来，生成一个完整的HTML页面。这个HTML页面再通过HTTP响应发回给浏览器。浏览器接收到HTML后，就负责解析、渲染，最终呈现在用户眼前。在这个过程中，Python代码本身并没有在浏览器里执行，它只是在服务器上生成了浏览器能理解的内容。

另一种更直接，但仍在发展中的方式，是通过WebAssembly（Wasm）或者JavaScript转译。这有点像给浏览器装了个“Python运行环境插件”。比如Pyodide项目，它把CPython解释器编译成了WebAssembly，这样你就可以在浏览器里直接运行Python代码了。还有Brython，它是一个Python到JavaScript的转译器，你的Python代码会被转换成JavaScript，然后在浏览器里执行。这种方式的好处是，某些简单的逻辑或者前端交互，可以直接用Python写，而不需要后端服务器的介入。但它也有局限性，比如文件大小（需要加载整个解释器或转译库）、性能，以及对Python库的兼容性问题。

为什么Python不能直接在浏览器里运行，它和JavaScript有什么不同？

我一直觉得，理解一个工具，得先明白它的“出身”和“使命”。Python和JavaScript，它们俩的设计初衷和运行环境就截然不同。JavaScript，它就是为了浏览器而生的，它的设计目标就是让网页动起来，处理用户交互，动态修改DOM。所以，所有的主流浏览器都内置了JavaScript引擎，它能直接解析并执行JS代码。这就像你买了个电视机，它天生就知道怎么播放电视信号。

Python呢，它是个通用型编程语言，应用范围广得吓人：数据分析、人工智能、后端开发、自动化脚本……它需要一个独立的解释器来运行代码。这个解释器通常安装在操作系统上，比如你的电脑、服务器。浏览器作为一个客户端应用，它的安全模型和资源限制决定了它不能随意加载和运行外部的、未编译的程序。你想想，如果浏览器能直接跑任何语言的脚本，那安全漏洞得多大？所以，浏览器选择只内置一个高度受控的脚本语言，那就是JavaScript。

它们最大的区别，在我看来，就是运行环境。JavaScript的“家”在浏览器，而Python的“家”在操作系统。当然，现在随着WebAssembly的发展，这个界限正在变得模糊，但本质上，Python依然需要一个“桥梁”才能踏入浏览器的领地。

使用Web框架让Python在浏览器“动起来”的具体步骤是什么？

这其实是目前最主流、最稳健的方案，也是我个人在实际项目中用得最多的。让Python在浏览器“动起来”，其实是指Python在服务器端处理逻辑，然后把结果以浏览器能理解的形式（HTML、CSS、JavaScript）发回去。

具体步骤，咱们以Flask这个轻量级框架为例，因为它概念清晰，容易上手：

环境准备： 你得先在你的机器上安装Python，然后用pip安装Flask。 pip install Flask

编写后端Python代码： 创建一个app.py文件。这里面就是你的Python逻辑。它会定义路由（URLs），当浏览器请求某个URL时，对应的Python函数就会被执行。

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def index():
    # Python处理逻辑，比如从数据库取数据
    data = {"message": "Hello from Flask!", "items": ["Item 1", "Item 2", "Item 3"]}
    # 将数据传递给HTML模板
    return render_template('index.html', context=data)

@app.route('/greet', methods=['POST'])
def greet():
    name = request.form.get('name') # 获取表单提交的数据
    if name:
        return f"Hello, {name}! This response came from Python on the server."
    return "Please provide a name."

if __name__ == '__main__':
    app.run(debug=True) # 运行开发服务器

创建前端HTML模板： 在app.py同级目录下创建一个名为templates的文件夹，并在其中创建一个index.html文件。这个文件就是浏览器最终会渲染的页面骨架。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python与浏览器</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        ul { list-style-type: none; padding: 0; }
        li { margin-bottom: 5px; }
    </style>
</head>
<body>
    <h1>{{ context.message }}</h1>
    <p>这里的内容是由Python在服务器端渲染后发送过来的。</p>
    <ul>
        {% for item in context.items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>

    <h2>试试交互</h2>
    <form id="greetForm">
        <label for="userName">你的名字：</label>
        &lt;input type=&quot;text&quot; id=&quot;userName&quot; name=&quot;name&quot; required&gt;
        <button type="submit">打个招呼</button>
    </form>
    <p id="responseMessage"></p>

    <script>
        document.getElementById('greetForm').addEventListener('submit', function(event) {
            event.preventDefault(); // 阻止表单默认提交行为

            const formData = new FormData(this);
            fetch('/greet', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                document.getElementById('responseMessage').innerText = data;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('responseMessage').innerText = '请求失败，请检查控制台。';
            });
        });
    </script>
</body>
</html>

运行应用： 在命令行里，切换到app.py所在的目录，然后运行python app.py。
浏览器访问： 打开你的浏览器，访问http://127.0.0.1:5000/。

你会看到，页面内容已经由Python处理并填充好了。表单提交后，JavaScript将数据发送到服务器，Python处理后返回结果，再由JavaScript更新页面。这个流程完美体现了Python在后端、浏览器在前端的分工协作。

除了传统Web框架，还有哪些技术能让Python更接近浏览器前端？

除了上面提到的WebAssembly编译（如Pyodide）和JavaScript转译（如Brython），这些年确实涌现了一些很有意思的技术，它们试图让Python开发者能用更接近前端的方式来构建Web应用，减少JavaScript的依赖，或者至少让后端和前端的界限变得模糊。

一个值得关注的方向是全栈Python框架，比如Anvil。Anvil提供了一个拖拽式的界面设计器，但它最核心的理念是：前端和后端都可以用Python来写。它的工作原理是，你的前端Python代码实际上是在浏览器中运行的，但它通过Anvil自己的通信协议与后端Python服务进行交互。这使得你可以用Python直接操作前端组件，而不需要写JavaScript。对于那些不想碰JS的Pythonista来说，Anvil提供了一个非常完整的解决方案。它不是把Python编译成JS，而是提供了一个运行时环境和一套组件库。

另一个趋势是基于Python的数据应用框架，比如Streamlit和Dash。它们的目标用户主要是数据科学家和分析师，让他们能快速地用纯Python代码构建交互式的数据仪表板和Web应用。你写Python代码，调用它们的组件库，这些框架会在后台自动处理HTML、CSS和JavaScript的生成和通信。它们通常会启动一个Python服务器，负责渲染页面、处理用户输入，并将更新发送回浏览器。虽然Python代码没有直接在浏览器里运行，但从开发者的角度看，你几乎只在写Python，就能得到一个功能丰富、可在浏览器中交互的Web应用。它们把Web开发的复杂性封装得很好。

这些技术各有侧重，Pyodide/Brython更偏向于在浏览器内执行Python代码片段，而Anvil、Streamlit、Dash则更像是一种“Python优先”的Web应用开发范式，它们将Web的复杂性抽象掉，让Python开发者能够专注于业务逻辑和数据呈现，而无需深入了解底层的前端技术细节。选择哪种，很大程度上取决于你的项目需求、对性能和灵活性的要求，以及你愿意投入学习的精力。我个人觉得，对于快速原型开发和数据应用，Streamlit和Dash简直是神器。而对于更复杂的、需要高度定制的前端交互，传统Web框架结合JavaScript依然是主流，或者可以考虑Pyodide这类“真·浏览器Python”方案，但要做好应对挑战的准备。

到这里，我们也就讲完了《浏览器运行Python脚本的几种方式》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JavaScript,Web框架,WebAssembly,浏览器运行Python,Pyodide的知识点！

JavaScript Web框架 WebAssembly 浏览器运行Python Pyodide