★ FEATURED ARTICLE 编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载本篇指南以 Brython 文档中关于browser包www/doc/en/browser.md的官方说明为主体结合 www/src/builtin_modules.js 等源码实现系统讲解 BrythonBrowser Python运行在浏览器中的 Python 3 实现为 Python 开发者提供的浏览器内置命名空间与模块。读完本文你将掌握alert/confirm/prompt对话框、document/window对象、事件绑定bind、动态加载 JavaScript 的load、动态执行 Python 的run_script以及 Web Worker 上下文下的is_webworker与scope等全部核心 API 的用法与底层原理。1.browser包是什么在 Brython 中browser是一个把浏览器原生能力包装成 Python 风格接口的内置包它聚合了 Brython 特有的名称与模块。在 Python 脚本中直接from browser import ...即可使用无需额外安装from browser import document, window, alert, console从实现上看browser包的初始化逻辑位于 www/src/builtin_modules.js未压缩的构建产物在 www/src/brython.js。该初始化会根据运行环境分三条路径处理Node.js 环境$B.isNode为真删除browser.window与browser.winWeb Worker 环境$B.isWebWorker为真置browser.is_webworker True删除browser.window/browser.win并把browser.document设置为一个访问即抛出ValueError提示document is not available in Web Workers的占位对象普通浏览器页面注册alert、confirm、prompt、document、load、reload、URLParameter等全部成员。此外browser包还包含一系列按功能划分的子模块位于 www/src/Lib/browser 目录例如ajax.py、timer.py、local_storage.py、session_storage.py、indexed_db.py、object_storage.py、svg.py、template.py、websocket.py、worker.py、ui.py、markdown.py、highlight.py以及widgets/子包。本文聚焦browser包自身的核心成员。2. 交互对话框alert、confirm 与 prompt2.1browser.alert(message)在弹窗中打印message返回Nonefrom browser import alert alert(Hello Brython!)源码实现位于 www/src/builtin_modules.js它调用浏览器原生的window.alert并把消息强制转换为 Python 字符串$B.builtins.str.$factory(message || )因此传入非字符串对象如数字、列表也能被正确转成字符串显示。2.2browser.confirm(message)在窗口中打印message并提供 ok/cancel 两个按钮。用户点击 ok 返回True点击 cancel 返回Falsefrom browser import confirm if confirm(确定要删除吗): # 用户点击了 ok pass其实现是直接包装原生window.confirmwww/src/builtin_modules.js。2.3browser.prompt(message[, default])打印message并显示一个输入框。返回用户输入的值如果未输入任何值返回default若提供了该参数否则返回空字符串from browser import prompt name prompt(请输入你的名字, 匿名用户) print(你好, name)实现上它包装了原生window.prompt(message, default_value || )www/src/builtin_modules.js所以第二个参数缺省时等价于传入空字符串作为默认值与文档所述未输入则返回空字符串一致。这三个函数都是同步阻塞的会暂停脚本直到用户做出响应适用于确认流程、简单数据录入等场景在 Web Worker 中它们不可用。3. 文档对象模型document、DOMNode 与 DOMEvent3.1browser.documentdocument表示当前浏览器窗口中显示的 HTML 文档是操作页面的入口对象。文档中说明其接口详见 Browser interface 章节即官方文档的 DOM API 指南 与 属性与样式。典型用法from browser import document # 按 id 获取元素并修改文本 document[greeting].text Hello Brython! # 遍历所有 p 标签 for p in document.select(p): print(p.text)从实现看document是$B.DOMNode.$factory(document)的包装www/src/builtin_modules.js即把浏览器的document对象包装成 Python 的DOMNode实例。源码中还提供了别名browser.doc与document等价。3.2browser.DOMNode与browser.DOMEventDOMNodeDOM 节点的类document本身以及通过document[...]、document.select(...)取到的元素都是它的实例封装了属性读写、事件绑定、子节点操作等接口DOMEventDOM 事件的类事件回调函数的第一个参数即DOMEvent实例携带type、target、坐标等事件信息。两者在 www/src/builtin_modules.js 中直接暴露给 Python 层对应 www/src/py_dom.js 中的事件与节点实现。3.3browser.windowwindow表示浏览器窗口对象接口定义参见 MDN 的 Window 文档。通过它可以访问全局 JavaScript 对象、执行window.setTimeout等例如from browser import window # 调用 window 上的 JavaScript 全局函数 window.console.log(来自 Brython 的日志)3.4browser.URLParameter(name)与browser.mouseCoords(ev)源码补充成员除文档列出的成员外www/src/builtin_modules.js 还注册了两个实用函数URLParameter(name)解析当前页面 URL 查询串返回名为name的参数值已做 URL 解码无匹配时返回空字符串mouseCoords(ev)从事件对象中提取鼠标坐标。4. 事件绑定装饰器browser.bind(target, event)bind(target, event)是一个用作事件绑定装饰器的函数用法详见 事件处理指南from browser import document, bind bind(document[mybutton], click) def on_click(event): print(按钮被点击了) # 也可以绑定到一组元素或字符串选择器 bind(#mybutton, click) # 通过 CSS 选择器 def on_click2(event): print(selector 方式绑定)从 www/src/brython.js 的实现可见bind支持多种target单个DOMNode元素直接addEventListenerCSS 选择器字符串用document.querySelectorAll遍历绑定可迭代对象如元素列表逐个绑定。绑定成功后返回原回调函数因此可以继续作为装饰器使用且回调会在事件触发时自动捕获并处理 Python 异常。5. 浏览器控制台browser.consoleconsole是用于与浏览器控制台交互的对象其完整接口随浏览器而异但至少暴露log(msg)方法把消息打印到控制台from browser import console console.log(调试信息)实现上www/src/builtin_modules.js 与 www/src/brython.js它直接把浏览器的原生console对象包装为 Python 对象self.console $B.jsobj2pyobj(self.console)因此现代浏览器中通常还支持console.warn、console.error等方法但文档保证的最少接口是log。仓库测试代码中随处可见这一用法例如 www/tests/console.py 与 www/tests/editor.py 都通过from browser import ... console ...导入。6. 动态加载 JavaScript 库browser.load(script_url)load(script_url)用于加载位于script_url的 JavaScript 库from browser import load # 加载第三方 JS 库例如某个图表库 load(https://example.com/lib.js) # 库注入到全局命名空间的名字可经 window 对象访问 from browser import window window.LibClass文档强调两点使用约束它使用阻塞式 Ajax 调用。加载完成前脚本会等待因此适用于无法在 HTML 页面里通过script srcprog.js/script加载的场景库注入到 JavaScript 全局命名空间的名字在 Brython 脚本中通过window对象的属性访问。从 www/src/builtin_modules.js 的源码看load的实际流程是用$B.builtins.open(script_url)读取文件内容然后eval(content)执行——这与文档阻塞式 Ajax 调用的描述吻合。补充同文件还实现了异步版本load1(script_url, callback)www/src/builtin_modules.js它创建script标签追加到document.body实现非阻塞加载并可传入回调函数在加载完成后执行。它未在文档中列出但属于browser包的可用成员。7. 动态执行 Pythonbrowser.run_script(src[, name])run_script(src[, name])执行src中的 Python 源码可选的name用于标识这段脚本from browser import run_script run_script(x 42\nprint(x * 2)) # 控制台输出 84它可作为exec()的替代方案额外的收益是从标准库导入模块时会使用 indexedDB 缓存从而加速重复导入。这一特性与 www/src/Lib/browser/indexed_db.py 以及 idbcache 机制www/src/Lib/browser/idbcache.py相关。从实现看www/src/brython.jsrun_script会调用$B.runPythonSource(src, name)当name缺省时自动生成默认名script_ UUID$B.UUID()。而 www/src/brython_builtins.js 中的$B.runPythonSource会创建一个模拟 HTMLscript标签fakeScript并调用$B.run_script(script, src, script_id, url, true)从而复用与页面内script typetext/python完全相同的编译与执行管线并返回对应的已导入模块对象。8. Web Worker 上下文browser.is_webworker 与 browser.scope8.1browser.is_webworker布尔值指示当前脚本是否在 Web Worker 中执行from browser import is_webworker, document if is_webworker: # Worker 中没有 document访问会抛 ValueError ... else: document[status].text 主线程运行中结合 www/src/builtin_modules.js 的初始化逻辑Worker 环境下is_webworker为True且browser.document访问时会抛出ValueError: document is not available in Web Workers主线程环境下为False。Brython 的 Web Worker 用法可进一步参考 Web Worker 文档 与 browser.worker 模块。8.2browser.scopescope是对浏览器中可用命名空间的引用无论执行上下文是普通脚本还是 Web Worker都有效等价于 JavaScript 的globalThis。它用于在两种上下文中统一访问全局对象from browser import scope # 在 Web Worker 中也能通过 scope 访问全局 API scope.postMessage(hello)实现上scope直接映射为globalThiswww/src/brython.js。9. 综合示例把这些 API 串起来结合仓库测试如 www/tests/console.py、www/tests/dom.py、www/tests/editor.py中的常见写法一个典型的交互页面脚本如下from browser import document, alert, confirm, prompt, bind, console, window bind(document[ask], click) def ask(ev): name prompt(你的名字, ) if confirm(f确认名字是 {name} 吗): document[result].text f你好{name} alert(欢迎使用 Brython) console.log(用户完成交互名字:, name) bind(#reload-lib, click) def load_lib(ev): window.location.reload()要点回顾alert/confirm/prompt处理同步交互binddocument完成事件与 DOM 操作console输出调试信息window桥接 JavaScript 全局能力动态 JS 库用load动态 Python 代码用run_script涉及 Worker 时用is_webworker判断环境、用scope访问全局。更完整的 DOM 操作、属性与样式细节可继续阅读 DOM API 指南、属性与样式 与 事件处理browser包下的ajax、timer、local_storage等子模块分别对应 Ajax 文档、Timer 文档、Local Storage 文档 等官方指南。赞分享编程语言语言运行时编译器前端【免费下载链接】brythonBrython (Browser Python) is an implementation of Python 3 running in the browser项目地址https://gitcode.com/gh_mirrors/br/brython点击查看免费下载相关推荐NocoBase HTTP 遥测导出器配置指南用 TELEMETRY_METRIC_READERhttp 将指标推送到外部监控系统NocoBase HTTP 遥测导出器配置指南用 TELEMETRY_METRIC_READERhttp 将指标推送到外部监控系统 本篇围绕 NocoBas编程语言语言运行时编译器前端ZeroClaw 硬件外设设计让 AI Agent 通过自然语言驱动 GPIO、I2C 与 SPI 的完整架构指南ZeroClaw 硬件外设设计让 AI Agent 通过自然语言驱动 GPIO、I2C 与 SPI 的完整架构指南 ZeroClaw 将微控制器MCU如编程语言语言运行时编译器前端如何用N_m3u8DL-RE解决你的流媒体下载难题跨平台终极指南如何用N_m3u8DL RE解决你的流媒体下载难题跨平台终极指南 在数字内容爆炸的时代你是否经常遇到心仪的在线视频却无法保存的困扰无论是重要的在线课程、珍CLI音视频上一篇SOLAR_merge_DPOv3-openmind核心架构解析从Llama到DPO优化的技术演进下一篇如何永久保存并深度分析你的微信聊天记录WeChatMsg完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
