简体   繁体   English

Python 鳗鱼 - Javascript 过早运行

[英]Python Eel - Javascript running prematurely

I am trying to learn to use the Python eel library.我正在尝试学习使用 Python 鳗鱼库。 Specifically, I am attempting to call a Python function by clicking a button (that runs a JavaScript function).具体来说,我试图通过单击一个按钮(运行 JavaScript 函数)来调用 Python function。

In my folder I have four files, arranged like this:在我的文件夹中有四个文件,排列如下:

|
+--- main.py
|
+--- web-gui
     |
     +--- index.html
     |
     +--- main.js
     |
     +--- style.css

Here is my main.py :这是我的main.py

# Start GUI using eel

import eel

eel.init('web-gui')
eel.start('index.html', size=(1440, 900), block=False)

# Boolean data from javascript (true or false) is given to python

result = eel.js_startPython()()

print('Javascript says hello! Your result is', bool(result))

Here is my main.js :这是我的main.js

// Javascript passes data to Python when button is pushed

document.getElementById("data").addEventListener("click", js_startPython);

eel.expose(js_startPython); // Expose this function to Python
function js_startPython() {
    console.log('successful button click')
    return result = true;    
}

And here is my index.html :这是我的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Python Decider</title>
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

    <div class="container">
        <div class="text">
            <h1>
                The Python Decider
            </h1>
            <p>
                Have a yes/no question? Click on the button to find out your answer.
            </p>
        </div>
        <div class="button">
            <div class="flex align-midde align-center">
                <a class="button glow-button" href="#" id="data">Click me!</a>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="/eel.js"></script>
    <script type="text/javascript" src="main.js"></script>
    
</body>
</html>

I expect that, when I press the button, python console will return this:我希望,当我按下按钮时,python 控制台将返回:

>>> Javascript says hello! Your result is True

My current issue is that the JavaScript code is running without being called.我当前的问题是 JavaScript 代码在未被调用的情况下运行。 Without pressing anything, it displays不按任何东西,它显示

>>> Javascript says hello! Your result is True # before button is even pressed

Sorry about the really long post.很抱歉这篇文章很长。 I appreciate any answers.我感谢任何答案。 I also apologize if this question has already been asked on SO, but I'm pretty sure it hasn't been.如果这个问题已经在 SO 上被问到,我也很抱歉,但我很确定它还没有被问到。

Your understanding of how Eel interacts with JS is wrong.你对 Eel 如何与 JS 交互的理解是错误的。 Currently, your Python code is calling js_startPython() after eel.start() .目前,您的 Python 代码在js_startPython() eel.start() The eel.expose(js_startPython) function exposes the JS function to Python, what you want to do is expose a Python function to your JS, using the decorator functions @eel.expose : eel.expose(js_startPython) function 将 JS function 公开到 Python,您要做的是使用装饰器函数@eel.expose将 Python function 公开到您的 JS:

Python Python

@eel.expose
def py_startJavaScript(result):
    print('Javascript says hello! Your result is', bool(result))

JavaScript JavaScript

document.getElementById("data").addEventListener("click", eel.js_startPython(true));

I also noticed that you have block=False on your eel.start() , which means that eel will stop after that line.我还注意到您的eel.start()上有block=False ,这意味着 eel 将在该行之后停止。 You can avoid that by adding the following underneath:您可以通过在下面添加以下内容来避免这种情况:

while True:
    eel.sleep(10)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM