Key Insight：替换单元格输出

Question

我正在编写必须将javascript代码嵌入到IPython笔记本中并执行它的库。 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的{{1}}参数，它将用新的替换输出（例如，参见here）。

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

这是测试代码：

首先，定义回调函数（看起来，这里显示为display而非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()将替换为服务器的输出。

Answer 2

在每个开放的笔记本上遇到同样的Javascript执行问题后，我将@ Vladimir的解决方案改编为更通用的形式：

在每个渲染上使用新的唯一ID（因为旧的ID与笔记本的HTML输出一起保存）。
无法轮询以确定何时呈现HTML元素。
当然，当笔记本关闭时，不会保存JS完成的HTML修改。

Key Insight：替换单元格输出

from IPython.display import clear_output, display, HTML, Javascript
# JavaScript code here will execute once and will not be saved into the notebook.
display(Javascript('...'))
# `clear_output` replaces the need for `display_id` + `update`
clear_output()
# JavaScript code here *will* be saved into the notebook and executed on every open.
display(HTML('...'))

让它发挥作用

这里的挑战是HTML和Javascript块可以不按顺序呈现，操作HTML元素的代码只需要执行一次。

import random
from IPython.display import display, Javascript, HTML, clear_output

unique_id = str(random.randint(100000, 999999))

display(Javascript(
    '''
    var id = '%(unique_id)s';
    // Make a new global function with a unique name, to prevent collisions with past
    // executions of this cell (since JS state is reused).
    window['render_' + id] = function() {
        // Put data fetching function here.
        $('#' + id).text('Hello at ' + new Date());
    }
    // See if the `HTML` block executed first, and if so trigger the render.
    if ($('#' + id).length) {
        window['render_' + id]();
    }
    ''' % dict(unique_id=unique_id)
    # Use % instead of .format since the latter requires {{ and }} escaping.
))

clear_output()

display(HTML(
    '''
    <div id="%(unique_id)s"></div>
    <!-- When this script block executes, the <div> is ready for data. -->
    <script type="text/javascript">
        var id = '%(unique_id)s';
        // See if the `Javascript` block executed first, and if so trigger the render.
        if (window['render_' + id]) {
            window['render_' + id]();
        }
    </script>
    ''' % {'unique_id': unique_id}
))

为了保持笔记本清洁，我会把这个管道代码放到一个单独的.py文件中并从Jupyter导入它。

向IPython笔记本注入/执行JS代码，并禁止其在页面重新加载时进一步执行

2 个答案:

Key Insight：替换单元格输出

让它发挥作用