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

Question

我正在使用jupyter HUB从存储在服务器中的jupyter笔记本中呈现一个Html页面。

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

重现这种情况最简单的例子如下。我尝试通过Ipython使用我在这里得到的代码注入JS：(将JavaScript变量的输出复制到剪贴板(一个按钮应该触发代码并将文本放入剪贴板。但事实并非如此。

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的笔记本时与本地浏览器进行交互。例如，使用网络浏览器模块打开一个新的选项卡很容易，但当笔记本在jupyter HUB中运行时，它就不起作用了。

知道吗？

注意：代码不会产生错误，只会在日志中显示：<IPython.core.display.Javascript对象>

注意2：在本地运行实际上这个代码不起作用，它产生：添加输出时出现Javascript错误！TypeError:无法设置null的属性"value"有关更多详细信息，请参阅您的浏览器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)