PyWebview中如何从JavaScript向Python传值？点击按钮报NoneType错误

错误原因 #

• DOM元素缺失：JS代码尝试获取id为inputValue的元素，但提供的HTML中没有对应的输入框，导致element为null，读取element.value时触发Nonetype（对应JS中的null）错误。
• Python类方法定义错误：InputValueReceiver的sendValue方法缺少self参数，作为类的实例方法，第一个参数必须为self，否则会出现参数不匹配的后端错误。
• 方法名不匹配：JS中调用的是send_value，但Python类里定义的方法是sendValue，命名规则不统一，导致PyWebview无法找到对应的API方法，进而引发错误。

修复后的完整代码 #

整合后的可运行代码 #

import webview

def handle_input_value(value):
    print(f"Received input value: {value}")

class InputValueReceiver:
    def send_value(self, value):  # 补全self参数，方法名与JS调用的send_value统一
        handle_input_value(value)

html_content = """
<input type="text" id="inputValue" placeholder="输入内容">
<button onclick="sendValue()">Send Value</button>

<script>
function sendValue() {
    var element = document.getElementById('inputValue');
    // 增加元素存在性判断，提前拦截错误
    if (!element) {
        console.error('未找到id为inputValue的元素');
        return;
    }
    var value = element.value;
    window.pywebview.api.send_value(value);
}
</script>
"""

api = InputValueReceiver()
window = webview.create_window("PyWebview Input Value Example", html=html_content, js_api=api)

webview.start(debug=True)

关键修复点说明 #

1. 补充了id为inputValue的输入框，确保JS能获取到目标元素。
2. 修正Python类方法的参数和命名，让方法名与JS调用的send_value完全一致，并添加self参数符合类实例方法的规范。
3. 增加JS端的元素存在性判断，避免因DOM结构问题再次触发错误。

内容的提问来源于stack exchange，提问作者AlexanderLamilton