如何向弹出窗口添加 sanitize: false 选项？

Question

我正在尝试在 Bootstrap 中放置一个按钮Popovers。但我没有成功。

我正在使用 Bootstrap-Popover。我想在弹出窗口内有一个按钮。

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
});
popoverList.forEach(function (popover) {
   popover.getTipElement().getElementsByClassName('.servicePOP').innerHTML += '<button type="button" class="btn btn-primary">My Button</button>';  
   });

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4 mb-3 servicePOP" data-aos="fade-up" tabindex="0" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Title" data-bs-content="A short description">
  <div class="card position-relative">
    <div class="d-block card-icon">
      <img src="images.png" class="card-icon position-absolute start-0 end-0 m-auto rounded-circle mb-5 lazy" alt="Title">
    </div>
    <div class="card-body text-center mt-5 pt-5">
      <a href="# class=" text-decoration-none text-dark ">
                <h5 class="card-title ">Title</h5>
            </a>
            <p>A short description</p>
            <a href="# " class="btn btn-primary ">More Details</a>
        </div>
    </div>
</div>

我的问题是：

如何向弹出窗口添加 sanitize: false 选项？

Answer 1

您可以设置sanitize: false为启用弹出窗口时可以通过的选项。在弹出窗口中插入 HTML 还需要将该选项html设置为true（默认 false）。

文档在这里。

const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
  sanitize: false,
  html: true,
  content: '<button type="button" class="btn btn-primary">My Button</button>'
})

如果页面上有多个弹出窗口，您可以通过按 data-bs-toggle 属性选择它们来初始化所有弹出窗口，如下所示：

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, options))

然后我们可以在选项中传递弹出窗口配置并将一个函数附加到该content选项。在该函数内，我们可以访问弹出窗口触发器元素，在我的示例中，从中获取属性data-pop-example（我在 HTML 中添加）并将其content作为按钮名称插入到弹出窗口中，如下所示：

const servicePOP = document.querySelector('.servicePOP')
const popover = new bootstrap.Popover(servicePOP, {
  sanitize: false,
  html: true,
  content: '<button type="button" class="btn btn-primary">My Button</button>'
})

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, options))

您可以在函数内部执行很多操作来设置content，例如访问要插入的 JSON 数据、自定义 URL 等。这里没有限制。