如何在Jupyter笔记本中将HTML元素与Python function链接起来？

Question

I've written JavaScript code that shows a custom right click menu.我编写了 JavaScript 代码来显示自定义右键单击菜单。

I'd like to know how to trigger Python functions upon my menu items being clicked.我想知道如何在单击菜单项时触发 Python 函数。 These menu items are the divs nested under the div with the class of menu, which consequently is the only element in the body section of my HTML.这些菜单项是嵌套在菜单 class 的 div 下的 div，因此它是我的 HTML 正文部分中的唯一元素。

The environment I'm using is Jupyter Notebook.我使用的环境是Jupyter Notebook。 notebook.笔记本。

import jinja2
from bokeh.embed import components

template = jinja2.Template("""
<!doctype html>

<html>
    <head>
        <script>
            src="http://cdn.pydata.org/bokeh/dev/bokeh-0.13.0.min.js"
            var menuDisplayed = false;
            var menuBox = null;
           
            window.addEventListener("contextmenu", function() {
                var left = arguments[0].clientX;
                var top = arguments[0].clientY;
               
                menuBox = window.document.querySelector(".menu");
                menuBox.style.left = left + "px";
                menuBox.style.top = top + "px";
                menuBox.style.display = "block";
               
                arguments[0].preventDefault();
               
                menuDisplayed = true;
            }, false);
           
            window.addEventListener("click", function() {
                if(menuDisplayed == true){
                    menuBox.style.display = "none";
                }
            }, true);
        </script>
        <style>
            .menu
            {
                width: 150px;
                box-shadow: 3px 3px 5px #888888;
                border-style: solid;
                border-width: 1px;
                border-color: grey;
                border-radius: 2px;
                padding-left: 5px;
                padding-right: 5px;
                padding-top: 3px;
                padding-bottom: 3px;
                position: fixed;
                display: none;
            }
           
            .menu-item
            {
                height: 20px;
            }
           
            .menu-item:hover
            {
                background-color: #6CB5FF;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="menu">
            <div class="menu-item">Add Node</div>
            <div class="menu-item">Delete Node</div>
            <div class="menu-item">Update Node</div>
        </div>
    </body>
</html>
""")

Answer 1

I think you will get clear understanding and clarity on this with below example easily:我想你会很容易地通过下面的例子对此有清楚的理解和清晰：

// %%javascript
window.executePython = function(python) {
    return new Promise((resolve, reject) => {
        var callbacks = {
            iopub: {
                output: (data) => resolve(data.content.text.trim())
            }
        };
        Jupyter.notebook.kernel.execute(`print(${python})`, callbacks);    
    });
}



// Use it in any Jupyter JS/HTML cell like this
%%javascript
window.executePython("1 + 1")
    .then(result => console.log(result)); // Logs 2

// You can access any defined object/method in the notebook
// I suggest writing a function that returns your data as JSON and just calling the function.

如何在Jupyter笔记本中将HTML元素与Python function链接起来？

问题描述

1 个解决方案

解决方案1
1 2020-07-17 04:30:03

如何在Jupyter笔记本中将HTML元素与Python function链接起来？

问题描述

1 个解决方案

解决方案1 1 2020-07-17 04:30:03

解决方案1
1 2020-07-17 04:30:03