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

Question

我正在使用 Jupyter HUB 从存储在服务器中的 jupyter notebook 渲染一个 Html 页面。

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

重现这种情况的最简单示例如下。我尝试使用我在此处获得的代码通过 Ipython 注入 JS：() 一个按钮应该触发代码并将文本放入剪贴板。但事实并非如此。

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 hub 中不起作用。我猜是因为实际上您没有运行在本地机器中编译代码。

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

实际上在其他情况下会遇到此问题，在这些情况下，您可以使用 Ipython 在本地使用 voila 渲染笔记本时与本地浏览器进行交互。例如，使用 webbrowser 模块打开一个新选项卡很容易，但当笔记本在 jupyter HUB 中运行时它不起作用。

有什么想法吗？

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

注意 2：运行实际上这段代码在本地不起作用，它会产生： Javascript 添加输出时出错！类型错误：无法设置属性 '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)

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

Copy content of variable into clipboard when rendering html with voila and Jupyter Hub (injecting JS via Ipython??)

python

jupyter-notebook

ipython

jupyterhub

voila