我可以将什么 HTML 与 SweetAlert 一起使用？

Question

我正在尝试找到可以与 SweetAlert 警报功能一起使用的允许 HTML (http://t4t5.github.io/sweetalert/)。

我发现我可以使用标题（h1 等），例如，但是如果我尝试添加内联样式，例如 style="color:blue;"，那么警报将不再有效。不同的标题样式似乎没有任何区别。

这是我使用的代码：

<script>
swal({   
title: "text<br /><br />text",   
text: "<strong>text</strong>",   
timer: 4000, html: true,  
showConfirmButton: false });
</script>

如果我想让提醒与我网站的风格相匹配，那么我想我需要修改 SweetAlert CSS。

请帮我弄清楚 HTML 可以在 SweetAlert 中使用而不会破坏警报功能。

Answer 1

看起来你只需要在初始化插件时将 html 选项设置为 true 即可。这将防止 SweetAlert 转义 HTML。它应该允许您使用任何元素。

请注意，这可能会导致 XSS 攻击，但这仅适用于您的警报内容是用户生成的情况。

来自文档：

swal({
    title: "HTML <small>Title</small>!",
    text: "A custom <span style='color: #F8BB86'>html<span> message.",
    html: true
});

Answer 2

2017 年更新。

解决方案 html = true 来自版本 SweetAlert 1.x。实际版本不再支持。现在您将 html 内容放在 "html" 选项中，并关闭 "text" 选项。

在“6.9.1”中工作正常：

swal({
        title: 'Title',
        html: 'A custom <span style="color: #F8BB86">html<span> message.'
});

Javascript Sweet Alert and html link inside text

我可以将什么 HTML 与 SweetAlert 一起使用？

What HTML can I use with SweetAlert?

html

javascript

css

jquery

sweetalert