时间戳

首页 > 解决方案 > 弹出框内的白名单表

twitter-bootstrap - 弹出框内的白名单表

问题描述

我有一个 Rails 应用程序的以下弹出窗口：

= link_to(organization_path(@organization), "data-toggle": "popover", "data-content-container": "#organization-information", class: "info-icon")

为了激活它，我有这个功能

$("[data-toggle=popover][data-content-container]").popover({
    html: true,
    content: function() {
        var attr = $($(this).attr("data-content-container")).html();
        return attr
    },
    trigger: "hover",
    placement: "auto",
    viewport: {
        selector: "body",
        padding: 40
    },
    animation: false,
});

它在 Bootstrap 3.3 上运行良好，现在我们升级到 3.4 并且停止工作。阅读文档，我意识到现在还有一个 whiteList 选项以及一些默认值。我认为这个默认列表对我们来说是不够的，因为我们试图在弹出框内渲染一个带有表格的 div：

<div id="organization-info">
    <table class="table">
        <thead>
            <tr>
                <th colspan="2">
                    <h3>Org. Name</h3>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Credit Limit</th>
                <td>3,000.00 zł</td>
            </tr>
            <tr>
                <th>Outstanding</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Available</th>
                <td>3,000.00 zł</td>
            </tr>
            <tr>
                <th>Total Paid Out</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Total Paid Back</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Non-performing Amount</th>
                <td>0.00 zł</td>
            </tr>
            <tr>
                <th>Total Amount of Overdue Fees</th>
                <td>0.00 zł</td>
            </tr>
        </tbody>
    </table>
</div>

我试图在默认白名单中添加更多内容

var internalWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList
internalWhiteList.div = ['*']

并将其传递给函数，whiteList: internalWhiteList但没有任何改变。如何正确实施此白名单？

标签： twitter-bootstraptwitter-bootstrap-3

解决方案

您需要像这样将所有表格元素列入白名单

$.fn.popover.Constructor.Default.whiteList.table = [];
$.fn.popover.Constructor.Default.whiteList.tr = [];
$.fn.popover.Constructor.Default.whiteList.td = [];
$.fn.popover.Constructor.Default.whiteList.tbody = [];
$.fn.popover.Constructor.Default.whiteList.thead = []

推荐阅读