javascript - 使用 Javascript 将大块 HTML 插入元素的最佳实践？

Question

我正在构建一个 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);

查看我的解决方案 here或 here .

Answer 1

is it the best practice?

没有。事实上，您遇到了导致错误的 HTML 注入(inject)问题，并且在注入(inject)的字符串可能包含用户提交的内容的最坏情况下，XSS 安全漏洞。

当您将纯文本内容和属性值放入 HTML 字符串时，您必须对它们进行 HTML 编码。在 PHP 中，您必须调用 htmlspecialchars()在进入 HTML 的字符串上执行此操作。在 JavaScript 中，你没有内置的 HTML 转义函数，所以你必须自己制作，例如。通过使用 s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;')在进入 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)到新节点。