Brython - 在浏览器上运行Python（浏览器运行python脚本）

off999 2024-10-19 07:20 29 浏览 0 评论

想过在浏览器上面跑 Python 吗？想过 Python 能放在 script 元素里运行吗？想过 Python 能直接操控 DOM 和浏览器吗？Brython 告诉你，一切皆有可能。

简介

Brython（Browser Python），是由 brython-dev 组织在 Github 上开源的可在浏览器上运行的 Python3 实现，项目地址为 https://github.com/brython-dev/brython。仅需在 HTML 引入一个 brython.js 并初始化，就可以在浏览器上运行 Python 代码，包括 Python 的推导式、生成器、元类、模块导入，和许多 CPython 模块，并且可以操作 DOM 元素和事件，以及与 jQuery，Highcharts 等 JS 库进行交互。

安装

Brython 只需引入其 Javascript 文件即可使用，可以使用 CDN：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js"></script>

如果想要使用导入标准库，那还需要引用 stdlib 的 JS：

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython_stdlib.js"></script>

此外，还可以使用 pip 在本地安装：

pip install brython
python -m brython --install

示例

我们来看一个简单的例子：

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js"></script>
</head>
<body onload="brython()">

  <script type="text/python">
  from browser import document, alert

  def echo(event):
      alert(document["zone"].value)

  document["mybutton"].bind("click", echo)
  </script>

  <input id="zone"><button id="mybutton">click !</button>

</body>
</html>

可以看到，代码中使用了一个类型为 text/python 的 script 元素，在里面包含了 Python 代码。

在 Python 代码中，从由 Brython 提供的 browser 库中导入了 document 和 alert，分别对应 Javascript 中的 document 对象和 alert 函数。然后，定义了一个 echo 函数，用来弹出对话框来显示 id 为 zone 的输入框的值。最后对 id 为 mybutton 的按钮的 click 事件与 echo 函数进行绑定。

把代码放到浏览器中运行，显示出一个文本输入框和一个按钮。输入 Hello，并点击按钮，此时弹出了显示 Hello 的对话框。

我们再来看一个使用了 Python 标准库的例子：

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.8.8/brython_stdlib.js"></script>
</head>
<body onload="brython()" style="background-color: #ddd;">

  <script type="text/python">
  from datetime import datetime
  from browser import document, timer

  def show_time():
      now = datetime.now().strftime("%H:%M:%S")
      document["display"].textContent = now

  timer.set_interval(show_time, 1000)

  </script>

  <div id="display"></div>

</body>
</html>

此时我们需要引入 brython_stdlib.js。在 Python 代码中，使用了 Python 的 datetime 模块来获取当前时间，同时利用 Brython 的 timer 的 set_interval 来实现周期性调用。运行代码，网页上显示了每秒刷新的当前时间：