Bootstrap 来自另一个 HTML 文件的弹出数据

Question

我希望它从 html 文件中检索数据，而不是对数据进行硬编码，如果您愿意，可以使用模板。我怎样才能做到这一点？假设我有另一个带有 <h1> 和 <body> 的 html 文件，弹出窗口应该从中获取数据（弹出窗口的 header/body）

<button type="button" class="btn btn-default" title="Help" data-toggle="popover"  data-content="423241421453453"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button>
</div>

$(document).ready(function popover() {
   $('[data-toggle="popover"]').popover();
});

Answer 1

假设您有这样的模板：

<h1>header</h1>
<body>this is a test</body>

然后将模板文件名作为 data-templatefile 属性添加到您的按钮标记中：

<button type="button" data-templatefile="template.html" class="btn btn-default" title="Help" data-toggle="popover"><span class="glyphicon glyphicon-info-sign" style="font-size: 20px; padding-top:5px"></span></button>

然后像这样初始化弹出窗口：

$('[data-toggle="popover"]').popover({
    html : true,
    content : function() {
        return loadContent($(this).data('templatefile'))
    }
});

这是直截了当的。 loadContent() 需要更加棘手。如果您使用 jQuery 来解析内容，您将看到 <body> 标记被删除。这是 the browser doing that，而不是 jQuery。但是您可以使用 DOMParser 来准确提取要在弹出窗口中使用的那些标签：

function loadContent(templateFile) {
    return $('<div>').load(templateFile, function(html) {
        parser = new DOMParser();
        doc = parser.parseFromString(html, "text/html");
        return doc.querySelector('h1').outerHTML + doc.querySelector('body').outerHTML;
    })
}

结果将如下所示：

演示 -> http://plnkr.co/edit/9pHmKBvhxMOdGjCHz2OG?p=preview

Bootstrap 来自另一个 HTML 文件的弹出数据

Bootstrap popover data from another HTML file

html

javascript

popover

twitter-bootstrap