如何在另一个 html 文件中包含 html 片段（对于 bootstrap 模态）？

Question

所以我正在尝试构建一个使用 html/knockout/web api.

的小应用程序

我不想使用 Durandal 或其他类似的导航框架，如果我可以不用的话。

我目前有三个独立的 html 页面，所有这些页面都（通过公共数据上下文）访问需要身份验证的受保护数据方法。如果数据上下文在访问 Web Api 后收到 401 错误，我想弹出一个具有登录功能的 bootstrap 模式，以便用户可以验证自己并从中断的地方继续。

我通过欺骗和使用 asp.net 带有包含登录功能的登录用户控件的 Web 表单来实现这一点。此用户控件包含在三个单独的页面中。但是，我现在陷入了涉及脚本加载顺序和依赖项的复杂性中，所以我想尽可能使用普通 html 将这一切带回一个更简单的基础。

我想避免的是必须在每个 HTML 页面中复制 bootstrap 模式的 html 代码，因为这会非常低效，但我不看看我如何在不这样做的情况下实现我想要的功能。

这是否可行，或者我是否需要更进一步，使它成为一个单页应用程序并根据需要注入视图模型？最后一个选项让我更接近（或接近）我尽可能避免使用 Durandal 风格的应用程序。

Answer 1

您可以使用 jQuery 的 load() 函数检索 HTML，然后将其注入 Bootstrap 模态，如下所示：

$('#your-selector').on('click', function () {
    $('#your-modal-selector').load('/your-file.html ', function (response, status, xhr) {
        if (status == "success") {
            $($this).modal('show');
        }
    });
});

如何在另一个 html 文件中包含 html 片段（对于 bootstrap 模态）？

How can I include an html snippet (for a bootstrap modal) in another html file?

html

javascript

requirejs

knockout.js

single-page-application