浏览器中的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)

相关推荐
Yan-英杰34 分钟前
百度搜索和文心智能体接入DeepSeek满血版——AI搜索的新纪元
图像处理·人工智能·python·深度学习·deepseek
weixin_307779132 小时前
Azure上基于OpenAI GPT-4模型验证行政区域数据的设计方案
数据仓库·python·云计算·aws
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
多想和从前一样5 小时前
Django 创建表时 “__str__ ”方法的使用
后端·python·django
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
小喵要摸鱼7 小时前
【Pytorch 库】自定义数据集相关的类
pytorch·python