如何将 HTML 大块 HTML 代码作为参数传递给 JS 函数？

Question

我想将一大段 HTML 代码（可能是 2-3 段 html 格式的代码）作为参数传递给 HTML 的 Javascript 函数调用。问题是，格式化的 HTML 不断出现在页面本身中，但事实不应该如此！我假设单/双引号存在一些问题！

而且，我正在 Facebook 标签页上工作。

有人可以帮我吗？

谢谢。

- 阿山

Answer 1

一种方法是有一个隐藏的 div（带有 display:none 的东西），并用 2-3 段 html 格式的代码填充它。然后，您可以将 div 的 innerHTML 传递到您的函数中。在此方法中，引号（任何类型）不会导致问题。

Answer 2

像icanhaz.js这样的一些库也做了这样的事情：

<script type="text/html" id="someHTMLTemplate">
   <div>You can put whatever html you want here</div>
   <p>And the browser just ignores it</p>
</script>

我对mustache.js使用相同的技术，然后在通过dom id抓取模板后从脚本标签的innerHTML中抓取模板。这样做的优点是，浏览器在加载时不必解析额外的 html，只需在需要在页面上的另一个节点中显示它时解析它。

Answer 3

另一种方法是对 HTML 进行编码，然后在 JS 中进行解码。下面是一个使用 JS 转义信息的示例：

console.log(escape("<hello></hello>"));           // %3Chello%3E%3C/hello%3E
console.log(unescape("%3Chello%3E%3C/hello%3E")); // <hello></hello>

请注意，如果您的字符串引号一开始就有问题，那么编码仍然存在问题。