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

有什么想法吗？谢谢。

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 代码。为了让它发挥作用：

• 在

  display

  对象上明确使用

  Javascript

  ，并且
• 定义应显示对象的输出区域

例如，单元格 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"))

Answer 2

这对我来说在 2023 年进行了一些小的修改。在单元格中运行它。我需要使用显示呼叫来呼出和按钮。并且不要忘记打开浏览器的控制台。

`

from ipywidgets import widgets
from IPython.display import Javascript, Markdown

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

def on_button_clicked(b):
    my_js = """
    console.log('Hello world2!');
    alert("hi");
    """
    with out:
        #print(my_js)
        display(Javascript(my_js))
        display(Markdown("on_button_clicked called"))
        print("on_button_clicked call ended")

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

button.on_click(on_button_clicked)
display(button, out)

`