我正在构建一个 Web 应用程序(使用原型(prototype)),它需要将大块 HTML 添加到 DOM 中。其中大部分是包含具有各种属性的元素的行。
目前我在一个变量中保留了一行空白的 HTML
var blankRow = '<tr><td>'
+'<a href="{LINK}" onclick="someFunc(\'{STRING}\');">{WORD}</a>'
+'</td></tr>';
function insertRow(o) {
newRow = blankRow
.sub('{LINK}',o.link)
.sub('{STRING}',o.string)
.sub('{WORD}',o.word);
$('tbodyElem').insert( newRow );
}
现在这一切都很好,但这是最佳实践吗?
当我更新页面上的代码时,我必须更新 blankRow 中的代码,因此插入的新元素是相同的。当我有大约 40 行 HTML 进入空白行然后我也必须转义它时,它变得很糟糕。
有没有更简单的方法?我在考虑 urlencoding,然后在插入之前对其进行解码,但这仍然意味着 blankRow 和大量转义。
意思是 PHP 等人的 eof 函数。
$blankRow = <<<EOF
text
text
EOF;
这意味着没有转义,但它仍然需要一个 blankRow。
遇到这种情况你会怎么做?
已解决
最终在原型(prototype)中使用了 DOMBuilder。不需要其他库:
$w('a div p span img table thead td th tr tbody tfoot input').each(function(e) {
window['$' + e] = function() {
return new Element(e, arguments[0]);
}
});
newPart = $div({id: 'partition-4'})
.insert( $p()
.insert('<b>Stuff</b>')
)
.insert( $p({
id: 'a-p'})
.insert('<b>More stuff</b>')
);
$('parentDiv').insert(newPart);
最佳答案
is it the best practice?
没有。事实上,您遇到了导致错误的 HTML 注入(inject)问题,并且在注入(inject)的字符串可能包含用户提交的内容的最坏情况下,XSS 安全漏洞。
当您将纯文本内容和属性值放入 HTML 字符串时,您必须对它们进行 HTML 编码。在 PHP 中,您必须调用 htmlspecialchars()
在进入 HTML 的字符串上执行此操作。在 JavaScript 中,你没有内置的 HTML 转义函数,所以你必须自己制作,例如。通过使用 s.replace(/&/g, '&').replace(/</g, '<').replace(/"/g, '"')
在进入 HTML 的字符串上。
onclick="someFunc(\'{STRING}\');"
这是逃避困惑的全新水平。在事件处理程序属性内的 JavaScript 字符串文字中,您必须对字符串进行 JS 编码(\
-转义 '
和 \
加上一些 Unicode 字符以确保完整性)and 然后对结果进行 HTML 编码。否则,字符串可能会突破其字符串文字定界符并注入(inject)任意 JS 代码。在所有情况下都避免使用内联事件处理程序属性,尤其是在模板中。
用 HTML 字符串创建页面内容很糟糕。您很可能会犯转义错误并危及应用程序的安全性。改用类似 DOM 的方法,您不必为此担心。您似乎在使用 jQuery,因此请尝试使用 jQuery 1.4 元素创建快捷方式:
$('<tr>').append(
$('<td>').append(
$('<a>', {
href: o.link,
text: o.word,
onclick: function() {
someFunc(o.string);
}
})
)
);
或者,将您的空白行实际保留在文档中作为 HTML,但随后将其隐藏(display: none
)或在开始时将其从文档中分离(removeChild
或 jQuery detach
)。然后,当您想要一个新行时,克隆空白行并进行所需的更改:
var blankRow= $('#blankRow').detach();
...
var newRow= blankRow.clone();
var link= newRow.find('td>a');
link.attr('href': o.link);
link.text(o.word);
link.click(function() {
someFunc(o.string);
});
如果您必须从字符串模板创建内容,请确保您的模板函数默认对每个替换进行 HTML 转义,并通过选择已解析内容中的节点来调用 click(function() { ... })
来附加事件。上。或者使用事件委托(delegate)(例如 jQuery live()
)来处理事件,而无需在添加时绑定(bind)到新节点。
关于javascript - 使用 Javascript 将大块 HTML 插入元素的最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2839844/