jquery - 为什么 Bootstrap 4 弹出窗口中缺少 HTML 属性?
问题描述
$(document).ready(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return "<div style='color:red;'>test</div>";
}
});
});
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<a class="btn btn-primary" data-html="true" data-toggle="popover" data-placement="bottom">Click Me</a>
当我在 Bootstrap 4 弹出窗口中使用 HTML 内容时,缺少 HTML 属性。我希望看到红色文本,但它输出没有红色样式的 div 标签。
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return "<div style='color: red;'>Test</div>";
}
});
解决方案
Bootstrap 弹出框执行一些清理以去除“不安全”属性 - 默认情况下它是打开的。
与我之前的评论和我的测试相矛盾,即使在旧版本中它也是默认的。了解手册总是好的:-)
https://getbootstrap.com/docs/4.4/components/popovers/#options
允许的属性是按标签定义的:
https://getbootstrap.com/docs/3.4/javascript/#js-sanitizer
sanitize
可以将选项设置为 false来关闭它。
$("[data-toggle=popover]").popover({
html: true,
sanitize: false,
content: function () {
return "<div style='color: red;'>Test</div>";
}
});
推荐阅读
- openstreetmap - Nominatim导入数据导入导致Segmentation fault
- swift - 有没有办法让这段代码更小?[迅速]
- apache - 重定向不起作用,是否与它们的规则或顺序冲突?
- reactjs - Flask:如何渲染 React 组件而不是服务器响应
- core - Blazor 服务器端的 AddHttpClient
- python - MatLab 到 Python 的转换 - 索引?
- python - 计算百分位使用熊猫
- algorithm - 有效地找到大于给定整数的最小“稳定数”
- kubernetes - 在 helm 值中添加单引号
- kotlin - Kotlin 中具有(可能)未知编码的文件 I/O