htmx：加载 JS 库并执行函数？

如何解决htmx：加载 JS 库并执行函数？

我确实通过 htmx 更新了 html 片段。

如何加载这个新代码段所需的 JS 库？

如何在代码片段加载后执行函数？

示例：

我想在 html 代码段添加到页面后显示一个快乐的动画 (confetti)。

这意味着浏览器需要加载这个：

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js"></script>

加载以上 lib 后，需要执行一个 JS 函数。

如何用 htmx 做到这一点？

解决方法

现在无法在内置于 htmx 的页面上加载新库（这是 IMO 的必要功能，请为它记录问题），因此最初应将五彩纸屑库作为主站点的一部分包含在内.

在主网站中包含外部库后，您可以包含一个普通的 script 标记，用于执行内联所需的 confetti 代码：

<script>
var myCanvas = document.createElement('canvas');
document.appendChild(myCanvas);

var myConfetti = confetti.create(myCanvas,{
  resize: true,useWorker: true
});
myConfetti({
  particleCount: 100,spread: 160
  // any other options from the global
  // confetti function
});
</script>

,

我找到了解决方案。我想它可以得到改进。如果您知道更简单的方法，请发表评论。

// lala.js 
// this file gets loaded in the page (before the hx-post call)

function loadScript(url,callback) {
    // https://stackoverflow.com/a/950146/633961
    // Adding the script tag to the head as suggested before
    var head = document.head;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
};

document.body.addEventListener("confetti",function(evt){
    var target = document.getElementsByClassName('htmx-settling')[0];
    loadScript('https://cdn.jsdelivr.net/npm/canvas-confetti@1.4.0/dist/confetti.browser.min.js',function () {
            var myCanvas = document.createElement('canvas');
            var rect = target.getBoundingClientRect();
            myCanvas.setAttribute('style','position: absolute; top:' +
                rect.top + 'px; left:' + rect.left + 'px');
            target.appendChild(myCanvas);

            var myConfetti = confetti.create(myCanvas,{
                resize: true,useWorker: true
            });
            myConfetti({
                particleCount: 100,spread: 160
                // any other options from the global
                // confetti function
            })
        })
})

在服务器端，我返回这样的响应（Django）：

def confetti_hx(request):
    ...  
    response = HttpResponse(html)
    response['HX-Trigger-After-Swap'] = 'confetti'
    return response