从 Jupyter Lab 或 Jupyter notebook 中的按钮单击事件函数调用 Javascript

Question

在 jupyter 单元中，我有以下代码，我可以看到它适用于“hello world！”在 Chrome 控制台中打印出来。

from IPython.display import Javascript
my_js = """
console.log('hello world!');
"""
Javascript(my_js)

现在，我在 jupyter 中创建一个按钮并将该功能移动到按钮单击事件。现在，当我单击按钮时，事件被执行，但 javascript 不起作用，chrome 控制台中没有输出：

button = widgets.Button(
   description='Button',
   disabled=False,
   button_style='', 
   tooltip='Button',
   icon='check' 
)

def on_button_clicked(b):
   print("on_button_clicked called")
   my_js = """
   console.log('Hello world2!');
   """
   Javascript(my_js)
   print("on_button_clicked call ended")
   
button.on_click(on_button_clicked)

display(button)

enter image description here

有什么想法吗？谢谢。

Answer 1

您正在创建 Javascript 类的对象，但随后将其丢弃（因为您没有将其分配给任何变量，也没有显示它）。这适用于您第一次使用Javascript，因为当 IPython 单元格的最后一个结果未分配给变量时，它将自动显示；这也意味着您可以在显示按钮时跳过display() 调用（如果它是单元格中的最后一行）：

button = widgets.Button(
    description='Button',
    disabled=False,
    button_style='',
    tooltip='Button',
    icon='check'
)
button.on_click(on_button_clicked)
# notice lack of `display()` call:
button

但如果要显示的对象在函数回调中，则它不起作用，因为 IPython 不知道要显示哪些表达式以及忽略哪些表达式。需要显示Javascript 对象，以便浏览器执行 JavaScript 代码。让它发挥作用：

• 在Javascript 对象上显式使用display，并且
• 定义应在其中显示对象的输出区域

例如，单元格 1：

out = widgets.Output(layout={'border': '1px solid black'})
out

然后：

def on_button_clicked(b):
    my_js = """
    console.log('Hello world2!');
    """
    with out:
        display(Javascript(my_js))
        display(Markdown("on_button_clicked called"))