使用PyScript在HTML页面搭建在线Python编译器遇阻求助

PyScript默认在页面初始加载时解析并执行<py-script>标签内的代码，若你是动态修改标签内容（比如通过JS编辑innerHTML），不会自动触发重新执行，只会把代码当成普通文本显示。以下是两种解决思路：

• 手动触发代码执行
  移除原有<py-script>元素，创建新元素注入代码后，调用PyScript.run()执行：

  // 假设代码容器id为code-container
  const container = document.getElementById('code-container');
  container.innerHTML = '';
  
  const pyScript = document.createElement('py-script');
  pyScript.textContent = 'print("动态修改后的代码已执行")';
  container.appendChild(pyScript);
  
  // 手动触发执行
  PyScript.run(pyScript);
  

• 改用<py-repl>标签（更适配在线编译器场景）
  <py-repl>原生支持编辑和执行，无需手动处理执行逻辑：

  <py-repl id="my-repl">
    # 初始示例代码
    print("Hello PyScript")
  </py-repl>
  

  通过JS修改内容后，用户可直接按Shift+Enter或点击执行按钮运行：

  const repl = document.getElementById('my-repl');
  repl.innerHTML = 'print("修改后的代码")';
  

分享三种实用的实现方式：

• 全局window对象共享
  JS将变量挂载到window，PyScript通过js.window访问：

  // JS代码
  window.jsData = "来自JS的变量内容";
  

  <py-script>
    from js import window
    received_data = window.jsData
    print(received_data)  # 输出：来自JS的变量内容
  </py-script>
  

• 调用JS函数获取变量
  定义返回变量的JS函数，PyScript直接调用：

  function getMyVar() {
    return "通过函数传递的变量";
  }
  

  <py-script>
    from js import getMyVar
    var_from_js = getMyVar()
    print(var_from_js)
  </py-script>
  

• 事件交互传递（适合用户操作场景）
  比如点击按钮时传递变量，需要用Pyodide的代理函数：

  <button onclick="sendToPy()">传递变量</button>
  <py-script>
    from js import document
    from pyodide import create_proxy
  
    def process_js_var(var):
        print(f"收到JS变量：{var}")
  
    // 创建代理函数供JS调用
    window.process_js_var = create_proxy(process_js_var)
  </py-script>
  <script>
    function sendToPy() {
      let targetVar = "点击按钮传递的变量";
      window.process_js_var(targetVar);
    }
  </script>
  

内容的提问来源于stack exchange，提问作者Срђан Станишић