如何在页面加载时显示 Bootstrap toast？

Question

我在索引中添加了一个查询字符串参数，目的是它可以显示错误等信息。尽管我正在努力让它在页面加载时显示。

我正在使用

$('#toast').toast('show');

方法。当我将其指定为按钮的 onclick 时，它会起作用，但不能直接在脚本标记或其他 JQuery 事件中，包括 $(document).ready() 和 $(window).load()。

Answer 1

弄清楚了，jQuery 在页面结束之前没有加载。

Answer 2

window.onload = (event) => {
    var toastLiveExample = document.getElementById('liveToast')
    var toast = new bootstrap.Toast(toastLiveExample)
    toast.show()
}

Answer 3

留下一个普通的 JS 解决方案来显示加载时的所有 toast：

window.onload = (event) => {
    const toastElements = document.querySelectorAll('.toast');
    toastElements.forEach((element) => {
        const toast = new bootstrap.Toast(element);
        toast.show();
    });
}