在脚本标签内使用 HTML/Template实现HTML Dom注入

Golang不知道大家是否熟悉？今天我将给大家介绍《在脚本标签内使用 HTML/Template实现HTML Dom注入》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

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

模板失败： html/template:javascript.partial.tmpl:18:10: on range 循环重新进入：{{range}} 分支在不同的上下文中结束：{statejsregexp delimnone urlpartnone jsctxregexp attrnone elementscript }，{statejs delimnone urlpartnone jsctxregexp attrnone 元素脚本 }

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}}
                &lt;/select&gt;
                `

我在 2012 年的 google groups 上发现了类似的问题，但答案是针对包文本/模板的，因此该来源的解决方案尚不清楚。 https://groups.google.com/forum/#!topic/golang-nuts/8l4edkr5q84

似乎如果我可以向编译器断言状态为 statehtml 而不是 statejs，那么就不会出现此问题。这是我能做的吗？

解决方案

这可以按预期工作，但是 javascript 中的反引号用于定义 template literals。我相信 html/template 包没有很好的能力来处理这些。

因此，一个简单的解决方法是在 javascript 中不使用模板文字，而是使用简单的字符串文字，因此您可以使用模板操作，并且仍然可以进行上下文相关的转义。

使用此模板：

<script>
function addparameter(){
        let div = document.createelement('div');
        div.id = 'parameter'+parameterindex.tostring();
        div.innerhtml = '&lt;input type=&quot;text&quot; name=&quot;parameters_value&quot;&gt;'+
                '&lt;select name=&quot;parameters_key&quot;&gt;'+
                '{{range .user.keys}}<option value="{{.keyhtml}}">{{.keyplain}}</option>{{end}}'+
                '&lt;/select&gt;';
        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 = '&lt;input type=&quot;text&quot; name=&quot;parameters_value&quot;&gt;'+
                '&lt;select name=&quot;parameters_key&quot;&gt;'+
                '<option value="h1\x3c">p1\x3c</option><option value="h2\x3e">p2\x3e</option>'+
                '&lt;/select&gt;';
        document.body.appendChild(div);
}
var parameterIndex = 1;
addParameter();
</script>

如果您在浏览器中打开，则可以正确呈现 html，甚至转义的 "h1<"、"p1<" 值也能正确显示。

理论要掌握，实操不能落！以上关于《在脚本标签内使用 HTML/Template实现HTML Dom注入》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！