Javascript 如何在Jupyter笔记本中将HTML元素与Python函数链接？_Javascript_Python_Html_Jquery_Flask

Javascript 如何在Jupyter笔记本中将HTML元素与Python函数链接？

javascript python html jquery flask

Javascript 如何在Jupyter笔记本中将HTML元素与Python函数链接？,javascript,python,html,jquery,flask,Javascript,Python,Html,Jquery,Flask,我已经编写了显示自定义右键单击菜单的JavaScript代码我想知道如何在单击菜单项时触发Python函数。这些菜单项是嵌套在带有menu类的div下的div，因此它是我的HTML的body部分中唯一的元素我使用的环境是Jupyter笔记本。笔记本 import jinja2 from bokeh.embed import components template = jinja2.Template(""" <!doctype html> <

我已经编写了显示自定义右键单击菜单的JavaScript代码

我想知道如何在单击菜单项时触发Python函数。这些菜单项是嵌套在带有menu类的div下的div，因此它是我的HTML的body部分中唯一的元素

我使用的环境是Jupyter笔记本。笔记本

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>
""")

importjinja2
从bokeh.embed导入组件
模板=jinja2。模板（“”）
src=”http://cdn.pydata.org/bokeh/dev/bokeh-0.13.0.min.js"
var menuDisplayed=false；
var menuBox=null；
addEventListener（“上下文菜单”，函数（）{
var left=参数[0]；
var top=参数[0]。客户端；
menuBox=window.document.querySelector（“.menu”）；
menuBox.style.left=left+“px”；
menuBox.style.top=top+px；
menuBox.style.display=“块”；
参数[0]。preventDefault（）；
menuDisplayed=true；
}，假）；
addEventListener（“单击”，函数（）{
if（menuDisplayed==true）{
menuBox.style.display=“无”；
}
}，对）；
.菜单
{
宽度：150px；
盒影：3px 3px 5px#8888888；
边框样式：实心；
边框宽度：1px；
边框颜色：灰色；
边界半径：2px；
左侧填充：5px；
右侧填充：5px；
垫面：3件；
垫底：3件；
位置：固定；
显示：无；
}
.菜单项
{
高度：20px；
}
.菜单项：悬停
{
背景色：#6CB5FF；
光标：指针；
}
添加节点
删除节点
更新节点
""")

我认为通过下面的示例，您将很容易对这一点有清晰的理解和理解：

// %%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.

你能@ihimanshu告诉我如何在我的JS中添加你的代码吗？如果我点击我的自定义菜单，这也可以吗？