想过在浏览器上面跑 Python 吗?想过 Python 能放在 script 元素里运行吗?想过 Python 能直接操控 DOM 和浏览器吗?Brython 告诉你,一切皆有可能。
Python
简介
Brython(Browser Python),是由 brython-dev 组织在 Github 上开源的可在浏览器上运行的 Python3 实现,项目地址为 。仅需在 HTML 引入一个 bry 并初始化,就可以在浏览器上运行 Python 代码,包括 Python 的推导式、生成器、元类、模块导入,和许多 CPython 模块,并且可以操作 DOM 元素和事件,以及与 jQuery,Highcharts 等 JS 库进行交互。
Brython
安装
Brython 只需引入其 Javascript 文件即可使用,可以使用 CDN:
<script type="text/javascript" src=";></script>
如果想要使用导入标准库,那还需要引用 stdlib 的 JS:
<script type="text/javascript" src=";></script>
此外,还可以使用 pip 在本地安装:
pip install brython python -m brython --install
示例
我们来看一个简单的例子:
<html> <head> <script type="text/javascript" src=";></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 的对话框。
Brython运行例子
我们再来看一个使用了 Python 标准库的例子:
<html> <head> <script type="text/javascript" src=";></script> <script type="text/javascript" src=";></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 = da().strftime("%H:%M:%S") document["display"].textContent = now (show_time, 1000) </script> <div id="display"></div> </body> </html>
此时我们需要引入 bry。在 Python 代码中,使用了 Python 的 datetime 模块来获取当前时间,同时利用 Brython 的 timer 的 set_interval 来实现周期性调用。运行代码,网页上显示了每秒刷新的当前时间:
Brython运行例子2
总结
Brython 所实现的功能极其丰富,把 Python 语言和浏览器 Javascript 有机地结合在了一起,实现了在浏览器中运行 Python 代码,并使用 Python 操作 DOM。
虽然 Brython 与原生 Javascirpt 和 WASM 等技术相比较实用价值仍不高,但为前端的跨语言实现给出了一种可行的方案,值得对相关领域感兴趣的开发者继续研究。