浏览器中的Python：Brython

简介

将 Python 代码转换为 JavaScript，使我们能够在浏览器中编写和运行 Python 代码。
可以实现python和js代码相互调用。
基于Python 3 实现，支持HTML5环境（提供了DOM对象和事件接口）。
支持turtle绘图库，可以进行图像绘制。Brython会把绘图程序转换成svg格式的动画。
Brython仅支持本机Python模块，不支持C内置的Python模块，除非已在JavaScript中重新实现。
由于Brython在Web浏览器的上下文中运行，因此存在一些限制。例如，浏览器不允许直接访问文件系统，因此os.open()无法打开文件。与网络浏览器无关的功能可能无法实现。

Brython项目镜像目录：brython download | SourceForge.net

使用Brython

1、将 brython.js 库加载到 HTML 页面的 <head> 部分

xml 复制代码

$ npm install brython
<script src="node_modules/brython/brython.js"></script>  

// 或者从cdn中加载brython库，有以下几个cdn可供选择：
<!-- 1 : jsDelivr CDN -->  
<script src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython.min.js"></script>  
<script src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython_stdlib.js"></script>  

<!-- 2: CloudFlare CDN -->  
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.9.1/brython_stdlib.min.js"></script>  

<!-- 3: GitHub as the CDN -->  
<!--如果要使用最新的开发版本，可以选择此选项 -->  
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython.js"></script>  
<script src="https://raw.githack.com/brython-dev/brython/master/www/src/brython_stdlib.js"></script>

当然下载到本地后加载也是可以的，这样加载速度会快不少。

2、Brython中的转译发生在加载HTML页面的同时，所以我们需要在HTML文档的body标签中调用函数brython()。

ini 复制代码

<body onload="brython()">

3、brython() 函数会搜索HTML文档中所有具有type ="text/python"属性的script标签，从而将标签中的 Python 代码的转译。所以 Python 代码都必须用<script type="text/python">标记包围：

xml 复制代码

<script type="text/python">
    <!-- Python code -->
</script>

或者，从单独的文件下载Python代码：

xml 复制代码

<script type="text/python" src="test.py"></script>

示例

xml 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython.min.js"> </script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/brython@3.9.1/brython_stdlib.js"> </script>
</head>

<body  onload="brython()" >
  <script type="text/python">
  from browser import document, alert

  def hello(ev):
    alert(" Open Alert")

  document["button-click"].bind("click", hello)
  </script>  
    
  <button id="button-click"> Open Alert </button>
</body>
</html>

如何得到Python代码的执行结果，将结果信息传递给DOM元素或作为字符串传递给JS脚本？

xml 复制代码

<body onload="brython()">
    <script type="text/python">
    import sys
    from browser import document, window

    def _write(*args):
        document["output"].html += "".join(args) + "<br>"

    def __write(*args):
        document["output"].html += "<span style='color: red'>"+ "".join(args) + "</span>" +  "<br>"

    sys.stdout.write = _write
    sys.stderr.write = __write

    def exec_code(ev):
        exec(document['code'].value)
        
    document['run'].bind('click',exec_code)
    </script>
    
    <input id='code' value="print('1')"></i>
    <button id='run'>RUN</button>
    <div id='output'></div>
</body>

当然，Brython还有很多花式用法，其源码中也列举了不少demo,有不解之处可以去源码中找找到答案。

github：brython-dev/brython: Brython (Browser Python) is an implementation of Python 3 running in the browser (github.com)
参考：An Introductory Guide to Brython (stackabuse.com)