在没有浏览器评估的情况下，我可以使用哪些HTML元素保存一串javascript代码？

Question

I have the following code:

<!-- 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 -->

Which is stored as a string in my webserver and is being encoded by json as the following:

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"'

When I render this json_string in my html element:

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

This outputs as:

<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>

Somehow, I am getting an error:

master:4 Uncaught SyntaxError: Invalid or unexpected token

This is very strange because somehow the string is being evaluated even without me calling eval on it explicitly.

How can I pass store this string without triggering error from my browser?

Answer 1

Somehow, I am getting an error:

If you render script tags, which you do in 'This outputs as', anything within those will be treated as script by the browser.

Answer 2

<textarea style='display:none;' id='json_data'>
  {{ json_data }}
</textarea>


pixels = JSON.parse(document.getElementById('json_data').innerText);

If it's textarea we are good to go!