我想更好地理解HTML空白处理模型.现在我正在比较两个HTML片段:
<div>a <br>z</div>
Run Code Online (Sandbox Code Playgroud)
和
<div>a<br> z</div>
Run Code Online (Sandbox Code Playgroud)
第一个片段,当被renered时,产生两行:"a "和"z"(所以第一行有一个尾随空格.)
第二个片段产生两行:"a"和"z".第二行没有前导空间.
我的问题是:为什么?我目前正在使用http://www.w3.org/TR/CSS2/text.html#white-space-model作为参考.它指出
- 如果一行开头的空格(U + 0020)将"white-space"设置为"normal","nowrap"或"pre-line",则会将其删除.
- 所有选项卡(U + 0009)都呈现为水平移位,使下一个制表符与下一个制表符对齐.制表位于块的起始内容边缘以块的字体呈现的空格宽度(U + 0020)的8倍的倍数处出现.
- 如果一行末尾的空格(U + 0020)将"white-space"设置为"normal","nowrap"或"pre-line",它也会被删除.
- 如果行末尾的空格(U + 0020)或制表符(U + 0009)将"白色空间"设置为"预换行",则UAs可能会在视觉上将其折叠.
对此的简单解读表明,由于要删除行的开头或结尾的空格(当"空格"为"正常"时),我的第一个片段应该不会产生尾随空格.但事实并非如此.
发生什么了?
我现在的理论是,它<br>被秘密地算作一个"角色",在第一个片段中,它阻止尾随空间位于其线的"末端".但我真的不知道.
编辑:要清楚,我知道如何使用随意 创建空格.我的问题是关于什么规则(关于某些规范)引发了上述行为.
我意识到调用setState不会this.state立即更新,也不会立即调用render和刷新DOM.文档说
setState()不会立即改变this.state,但会创建挂起状态转换.调用此方法后访问this.state可能会返回现有值.
无法保证对setState的调用进行同步操作,并且可以对调用进行批处理以获得性能提升.
我希望能够在任何时候强制这样的"状态转变".这似乎应该是一个相当自然的操作,但我在文档中找不到任何提及它.有办法吗?
std::shared_ptr保证是线程安全的.我不知道典型实现使用什么机制来确保这一点,但肯定它必须有一些开销.即使您的应用程序是单线程的,也会出现这种开销.
以上情况如何?如果是这样,那是否意味着它违反了"你不为不使用的东西付费"的原则,如果你没有使用线程安全保证?
假设我复制了一些“恶意”输入,例如带有事件处理程序或其他 JavaScript 的 DOM 节点
<img src="bunny.jpg" onload="alert('hi');">
Run Code Online (Sandbox Code Playgroud)
如果我将其复制到剪贴板并将其粘贴到contenteditablediv 中,则事件处理程序将被干净地删除。
<img src="/Users/tjhance/Desktop/bunny.jpg">
Run Code Online (Sandbox Code Playgroud)
我现在可以随心所欲地操纵这个 DOM 节点了。到目前为止还不错。
另一方面,假设我想挂钩浏览器的粘贴事件并以我自己的方式处理粘贴。我可以轻松获取剪贴板数据:
<div contenteditable="true" id="myContentEditableDiv"></div>
<script>
$('#myContentEditableDiv').on('paste', function(event) {
console.log(event);
var pastedHtml = event.originalEvent.clipboardData.getData('text/html');
console.log(pastedHtml);
});
</script>
Run Code Online (Sandbox Code Playgroud)
当我粘贴时,我得到了 HTML
<meta charset='utf-8'><img src="/Users/tjhance/Desktop/bunny.jpg" onload="alert('hi');" style="color: rgb(0, 0, 0); font-family: Times; font-size: medium; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px;">
Run Code Online (Sandbox Code Playgroud)
它未经消毒,并且仍然具有事件侦听器。据我所知,我无法用这个字符串做任何事情。我无法使用浏览器将其解析为 HTML,因为它会运行 JavaScript,这是一个巨大的安全漏洞。
很明显,浏览器具有一定的清理 HTML 的功能,因为它是在粘贴时执行的。因此,如果我想要干净的 HTML,我可以等待事件完成并将 …