我如何编码html引导弹出窗口和工具提示内容

How do I encode html for Bootstrap popover and tooltip content

本文关键字：窗口 工具提示 何编码 编码 html      更新时间：2023-09-26

这可能是重复的;很难判断，因为关键词包含"html"answers"content"，甚至必应和谷歌都返回了很多误报。

当data-html=true时，引导工具提示和弹出窗口支持data-content属性的html值。但是，这是无效的

<input id="email" class="form-control" type="email" 
  data-bind="value: Email, valueUpdate: 'afterkeydown'" 
  data-container="body" data-toggle="popover" data-placement="bottom"
  data-title="Email" data-html="true"
  data-content="<p>This is <i>your</i> email address.</p>" />

因为你不能把html放在一个本身就是html的属性的值中。它可能会混淆解析器，并且是HTML规范所不允许的。

虽然它似乎可以在ie浏览器上工作，但我真的不想在50个不同的浏览器和版本上进行测试。确实会混淆Visual Studio 2013 HTML编辑器中的解析器。那个编辑认为没有结束引号。

我可以通过在一个单独的文件中从JavaScript中分配属性来避免这种情况，但这很笨拙，并且会破坏关注点分离。

那么，正确的标记方式是什么呢?

正如公认的答案所指出的那样，您不能在用"引号括起来的字符串中使用引号"。这个问题经常发生。如果您想要显示看起来像HTML的文本，那么浏览器如何知道它应该解析为HTML的内容以及它应该直接显示的内容呢?

例如，如何让浏览器显示文本<p></p>

答案是转义。您可以使用&quot;和&lt;

等占位符来代替"和<等字符。

但是，转义引号的解决方案在这里不起作用。正是因为浏览器不会将其解析为HTML。如果你在html中加入转义引号，它们在浏览器看来就不像引号，而像文本。

然而，有一个不同的解决方案:用"引号括起来的字符串可以毫无问题地包含'。以下是有效的: 
data-content="<div id='string_in_string' ></div>"

这可以应用到你的引导弹出窗口，我已经设置了一个小提琴，它显示了如何正确解析单引号字符串，而转义字符串混淆浏览器:https://jsfiddle.net/z4t2sud3/3/

这是fiddle内部的代码(fiddle环境会自动导入bootstrap, jquery等)

<mark data-content="
    <button class=&quot;btnr&quot; type=&quot;button&quot;>
        Doesn't work
    </button>
    <button class='btn btn-info' type='button'>
        Works
    </button>
    " data-html="true" data-toggle="popover">
    Popovered
</mark>

确保通过Javascript激活弹出窗口:

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

你可以添加任何你想要的HTML属性，只要它是一个有效的HTML属性值。什么是有效的属性值?什么不包含标签，引号等。所以…和什么?解决方案是:在将字符串附加到html属性中之前，将其删除。

如果你正在使用PHP: http://fi2.php.net/htmlspecialchars或微博:http://twig.sensiolabs.org/doc/filters/escape.html

如果你正在使用jquery，当你做$el.data('my_scaped_json)将被转换为它原来是什么，这样的json对象或html-string: $($el.data('my_scaped_html));

相关文章：