使用voila和Jupyter Hub渲染html时，将变量的内容复制到剪贴板中(通过Ipython注入JS？？)

Question

我正在使用jupyter集线器呈现存储在服务器中的Jupyter笔记本的Html页面。

当使用voila时，我想创建一个按钮，它会将特定变量(文本)的内容复制到剪贴板中。

重现这种情况的最简单示例如下所示。我尝试使用我在这里获得的代码通过Ipython注入JS：(Copy output of a JavaScript variable to the clipboard)一个按钮应该触发代码并将文本放到剪贴板中。但事实并非如此。

import ipywidgets as widgets
from IPython.display import display, HTML, Javascript
mybtn = widgets.Button(description='copy to clipboard',button_style='success')
        
def mybtn_event_handler(change):
    display(Javascript('''var cb = document.getElementById("cb");
  cb.value = 'asdfasdfasdfasdfasdfasdf';
  cb.style.display='block';
  cb.select();
  document.execCommand('copy');
  cb.style.display='none';''')) 

mybtn.on_click(mybtn_event_handler)

display(mybtn)

这在jupyter集线器中不起作用。我猜是因为实际上你并没有在本地机器上运行代码。

你知道该如何处理这种情况吗？

实际上，在其他情况下也会遇到这个问题，在使用Ipython时，您可以在本地呈现带有voila的笔记本时与本地浏览器进行交互。例如，使用webbrowser模块打开一个新选项卡很容易，但是当笔记本在jupyter集线器中运行时，它就不起作用了。

有什么想法吗？

注意:代码不会产生错误，在日志中只会出现：

NOTE2:在本地运行实际上此代码不起作用，它会产生: Javascript error adding output！TypeError:无法将属性“”value“”设置为null。有关详细信息，请参阅浏览器Javascript控制台。“”

Answer 1

根据文档-你应该用widgets.Output()包装你的onclick方法输出。因此，为了通过点击按钮来运行一些Javascript，你应该这样做：

import ipywidgets as widgets
from IPython.display import display, HTML, Javascript

mybtn = widgets.Button(description='copy to clipboard',button_style='success')
output = widgets.Output()

display(mybtn, output)
        
def mybtn_event_handler(b):
    with output:
        display(Javascript('''console.log("Success");''')) 

mybtn.on_click(mybtn_event_handler)