javascript - 将 JS 代码注入(inject)/执行到 IPython notebook 并禁止其在页面重新加载时进一步执行

Question

我正在编写必须将 javascript 代码嵌入到 IPython notebook 并执行它的库。 HTML/JS 代码如下所示:

<div id="unique_id"></div>
<script>
var div = document.getElementById("unique_id");
// Do the job and get "output"
div.textContent = output;  // display output after the cell
</script>

和 python 代码:

from IPython import display
display.display(display.HTML(code))

副作用是 javascript 代码存储在笔记本单元格的输出中，每次重新加载页面或打开笔记本时都会再次运行。

有没有办法禁止代码在重新加载时执行？或者是否可以在不将其保存在输出中的情况下运行 javascript 代码？

Answer 1

我找到了窍门。

诀窍是使用 update=True IPython.display.display() 的参数这将用新输出替换输出(有关示例，请参见 here)。

所以需要做的是:首先输出完成工作的javascript，然后等到创建了具有特定ID的div，用输出填充它。一旦这个display()被调用，我们可以调用display第二次用带有 div 的实际 HTML 更新第一个。所以 javascript 代码一旦完成就会用结果填充它，但代码本身不会被保存。

测试代码如下:

首先，定义回调函数(看起来很重要，这里显示为 HTML("<script> ... </script>") 而不是 Javascript(...) ):

from IPython.display import display, HTML, Javascript

js_getResults = """<script>
function getResults(data, div_id) {
    var checkExist = setInterval(function() {
       if ($('#' + div_id).length) {
          document.getElementById(div_id).textContent = data;

          clearInterval(checkExist);
       }
    }, 100);    
};
</script>"""

display(HTML(js_getResults))

然后在一个单元格中执行更新技巧:

js_request = '$.get("http://slow.server/", function(data){getResults(data, "unique_id");});'
html_div = '<div id="unique_id">Waiting for response...</div>'

display(Javascript(js_request), display_id='unique_disp_id')
display(HTML(html_div), display_id='unique_disp_id', update=True)

get()回调后被执行，内容Waiting for response...将替换为服务器的输出。