单击按钮时如何调用python脚本(使用pyscript)
当单击按钮(在html文件上)时，我想在浏览器上运行Python脚本。与此很接近的东西：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
</py-env>
</head>
<body>
<button type="button" onclick="runPython()">run Python</button>
<script>
function runPython() {
<py-script>
print("you clicked me")
</py-script>
}
</script>
</body>
</html>回答 3
Stack Overflow用户
发布于 2022-05-20 18:56:44
要从JavaScript调用Python代码，需要创建一个代理。此代理处理与JavaScript之间的类型(数据)转换。
若要创建代理：
from js import document
from pyodide import create_proxy
function_proxy = create_proxy(runPython)更改HTML元素声明以声明ID并删除onClick：
<button type="button" id="button">run Python</button>将代理分配给按钮的事件侦听器：
e = document.getElementById("button")
e.addEventListener("click", function_proxy)这种样式非常类似于JavaScript也如何分配事件侦听器。
把这些放在一起：
<body>
<button type="button" id="button">run Python</button>
<py-script>
from js import document
from pyodide import create_proxy
def runPython():
print("you clicked me")
function_proxy = create_proxy(runPython)
document.getElementById("button").addEventListener("click", function_proxy)
</py-script>
</body>我写了几篇关于JavaScript和Python的文章：
Stack Overflow用户
发布于 2022-06-16 05:43:13
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<link rel = 'stylesheet' href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<button id = "show_output" class = "btn btn-primary" type = "submit" pys-onClick="show_output">Show Output</button>
<div id="output_div" style="margin-top: 10px;margin-bottom: 10px;"></div>
<py-script>
def show_output(*args, **kwargs):
output = Element("output_div")
output.write("You Clicked Me!")
</py-script>
</body>
</html>Stack Overflow用户
发布于 2022-06-18 22:03:39
您可以在没有javascript的<script>和function的情况下完成它。你已经有pyscript了。将按钮的onClick属性更改为pys-onClick，并向按钮添加id属性，然后在python函数pyscript.write('element-id', 'element-value', append=False)中使用该属性
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
<py-env>
</py-env>
</head>
<body>
<button id="thebuttonid" type="button" pys-onClick="runPython">run Python</button>
<py-script>
def runPython(*args):
pyscript.write("thebuttonid", "you clicked me")
</py-script>
</body>
</html>只有当带有pys-onClick的按钮有一个id时，这才能工作。提供给pyscript.write函数的id是要写入的元素的id。在这个特殊的例子中，它恰好是调用函数的同一个元素。函数需要接收参数(因此是*args)，因为它接收一个pyodide代理作为参数。一个完整的注释版本将是：
<py-script>
from pyodide import JsProxy
def runPython(proxy: JsProxy) -> None:
"""
Writes 'you clicked me' in the html element with the id 'thebuttonid'.
This function must be called from an element with the property pys-onClick='runPython'.
"""
pyscript.write("thebuttonid", "you clicked me")
</py-script>现在，由于您使用的是pyscript，所以可以用py按钮替换普通的html按钮：
<py-button id="thebuttonid" label="run Python" type="button" pys-onClick="runPython"></py-button>它将采用顺风css的样式，因为您在头部导入了css文件。注意，必须将标签移动到属性，而不是将其用作按钮的值。
https://stackoverflow.com/questions/72321468
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号