javascript - 哪个 HTML 元素可以保存一串 javascript 代码而不需要浏览器对其进行评估？

Question

我有以下代码:

<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '12345'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=12345&ev=PageView&noscript=1"
/></noscript>
<!-- DO NOT MODIFY -->
<!-- End Facebook Pixel Code -->

它作为字符串存储在我的网络服务器中，并由 json 编码，如下所示:

In [3]: json.dumps(a)
Out[3]: '"\\n<!-- Facebook Pixel Code -->\\n<script>\\n!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?\\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;\\nn.push=n;n.loaded=!0;n.version=\'2.0\';n.queue=[];t=b.createElement(e);t.async=!0;\\nt.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,\\ndocument,\'script\',\'https://connect.facebook.net/en_US/fbevents.js\');\\nfbq(\'init\', \'12345\'); // Insert your pixel ID here.\\nfbq(\'track\', \'PageView\');\\n</script>\\n<noscript><img height=\\"1\\" width=\\"1\\" style=\\"display:none\\"\\nsrc=\\"https://www.facebook.com/tr?id=12345&ev=PageView&noscript=1\\"\\n/></noscript>\\n<!-- DO NOT MODIFY -->\\n<!-- End Facebook Pixel Code -->\\n"'

当我在 html 元素中渲染这个 json_string 时:

<div id='pixels_json' style='display:none'>
  {{ pixels_json|safe }}
</div>

输出为:

<div id='pixels_json' style='display:none'>
  ["<!-- Facebook Pixel Code -->\r\n<script>\r\n!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?\r\nn.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;\r\nn.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;\r\nt.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,\r\ndocument,'script','https://connect.facebook.net/en_US/fbevents.js');\r\nfbq('init', '325091591183913'); // Insert your pixel ID here.\r\nfbq('track', 'PageView'); fbq('track', 'Lead');\r\n</script>\r\n<noscript><img height=\"1\" width=\"1\" style=\"display:none\"\r\nsrc=\"https://www.facebook.com/tr?id=325091591183913&ev=PageView&noscript=1\"\r\n/></noscript>\r\n<!-- DO NOT MODIFY -->\r\n<!-- End Facebook Pixel Code -->\r\n"]
</div>

不知何故，我收到错误:

master:4 Uncaught SyntaxError: Invalid or unexpected token

这很奇怪，因为即使我没有显式调用 eval，字符串也会以某种方式被评估。

如何传递存储此字符串而不触发浏览器错误？

Answer 1

Somehow, I am getting an error:

如果您在“此输出为”中渲染脚本标记，则其中的任何内容都将被浏览器视为脚本。