javascript - 在脚本标签中使用 HTML/模板进行 HTML Dom 注入(inject)

Question

我在尝试使用 html/template 包构建一些 javascript 时遇到了这个错误。编译器似乎对我正在做的事情的上下文和状态感到困惑。有没有办法在这里覆盖编译器并避免此消息？下面是我尝试执行的代码示例。

The template failed: html/template:javascript.partial.tmpl:18:10: on range loop re-entry: {{range}} branches end in different contexts: {stateJSRegexp delimNone urlPartNone jsCtxRegexp attrNone elementScript }, {stateJS delimNone urlPartNone jsCtxRegexp attrNone elementScript }

function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = `<input type="text" name="parameters_value">
                <select name="parameters_key">`+
                {{range $index, $value := .User.Keys}}`<option value="{{$value.KeyHTML}}">{{$value.KeyPlain}}</option>`+
{{end}}
                </select>
                `

我在 2012 年的 google 群组中发现了类似的问题，但答案是针对包文本/模板，因此该来源的解决方案尚不清楚。 https://groups.google.com/forum/#!topic/golang-nuts/8L4eDkr5Q84
似乎如果我可以向编译器断言状态是 stateHTML 而不是 stateJS，那么它就不会有这个问题。这是我能做的吗？

Answer 1

这可以按预期工作，但 Javascript 中的反引号用于定义 template literals .我相信 html/template 包没有很好地处理这些。
因此，一个简单的解决方法是在 JavaScript 中不使用模板文字，而是使用简单的字符串文字，因此您可以使用模板操作，并且仍然可以进行上下文相关的转义。
使用此模板:

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '{{range .User.Keys}}<option value="{{.KeyHTML}}">{{.KeyPlain}}</option>{{end}}'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>`

使用输入参数对其进行测试:

t := template.Must(template.New("").Parse(src))

type Key struct {
    KeyHTML, KeyPlain string
}
m := map[string]interface{}{
    "User": map[string]interface{}{
        "Keys": []Key{
            {"h1<", "p1<"},
            {"h2>", "p2>"},
        },
    },
}

if err := t.Execute(os.Stdout, m); err != nil {
    panic(err)
}

这将输出以下 HTML:

<script>
function addParameter(){
        let div = document.createElement('div');
        div.id = 'parameter'+parameterIndex.toString();
        div.innerHTML = '<input type="text" name="parameters_value">'+
                '<select name="parameters_key">'+
                '<option value="h1\x3c">p1\x3c</option><option value="h2\x3e">p2\x3e</option>'+
                '</select>';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>

如果您在浏览器中打开，可以正确呈现 HTML，即使是转义的 "h1<" , "p1<"值正确显示。