Jupyter Notebook中ipywidgets.HTML无法调用函数的问题求助

这不是你的本地环境问题，而是Jupyter Notebook 结合 ipywidgets 时的脚本隔离机制导致的——我之前做交互式组件的时候也踩过这个坑！

为什么会报错？ #

Jupyter 的输出区域（包括 ipywidgets 渲染的 HTML 内容）有特殊的沙箱/作用域限制：你内嵌的 <script> 标签里定义的 myFunction 并没有被挂载到全局的 window 对象上，但 onclick 属性里的代码是在全局上下文执行的，所以它找不到这个函数，就抛出了 ReferenceError。而内联代码直接在全局上下文运行，所以能正常生效。

两种可行的解决方案 #

方案1：直接绑定事件监听（推荐）

不用依赖全局函数，通过 DOM 事件监听的方式绑定点击逻辑，避开作用域问题：

from ipywidgets import HTML
HTML('''<!DOCTYPE html>
<html>
<body>
<button id="clickBtn">Try it</button>
<p id="demo"></p>
<script>
// 等DOM加载完成后绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const btn = document.getElementById('clickBtn');
    btn.addEventListener('click', function() {
        document.getElementById("demo").innerHTML = "Hello World!";
    });
});
</script>
</body>
</html>''')

方案2：把函数挂载到全局window对象

如果一定要用 onclick 属性的写法，可以手动把函数挂载到 window 上，让全局上下文能访问到：

from ipywidgets import HTML
HTML('''<!DOCTYPE html>
<html>
<body>
<button onclick="window.myFunction()">Try it</button>
<p id="demo"></p>
<script>
// 把函数挂载到window全局对象
window.myFunction = function() {
    document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>''')

总结 #

这是 ipywidgets 在 Jupyter 环境中处理 HTML 内容时的默认隔离策略，目的是避免不同输出的脚本互相干扰。只要调整脚本的作用域或者事件绑定方式，就能解决这个问题啦。

内容的提问来源于stack exchange，提问作者Albatross