Question

我的目标是将Django模板标签{% static 'my/file.png' %}的输出从HTML模板序列化为JSON对象，以在custom.js文件中进行引用。但是，我在Chrome控制台中收到此错误：

Uncaught SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)

控制台调试器显示{% static %}标签的输出，它是图像绝对路径的预期值： /static/img/my_image.png

我知道转义{% static %}标签的输出可能会出现问题-这引起了Chrome控制台中显示的明显语法错误。

之所以这样说是因为我的理解是，对于所使用的方法JSON.parse()而言，要解析的字符串无效。

也就是说，以下代码中引用的JSON.parse()方法带有一个参数，在这种情况下，该参数是{% static %}标记的输出-并且该参数对于据我了解，JSON方法。

据此，我的直觉告诉我，也许{% static %}标签输出可以转义-并且可以使用JSON.parse()方法有效地使用此修改后的值。

我当前的代码基于Quora和Django文档中描述的解决方案：

https://www.quora.com/How-does-one-access-Django-template-variables-in-JavaScript

https://docs.djangoproject.com/en/2.2/ref/templates/builtins/#escapejs

我查看了几个stackoverflow答案，但是没有找到我认为足够紧密的参考供参考。

为简洁起见，我的代码index.html被截断如下：

...

<body data-spy="scroll" data-target="#navbarResponsive" data-js-vars="{% static 'img/my_image.png'|escapejs %}">

<script type="text/javascript">
    var static_vars = JSON.parse(document.getElementsByTagName('body')[0].getAttribute('data-js-vars'));
</script>

我还尝试根据先前引用的Django Docs资源使用Django模板标签过滤器| json_script：“ myIdname”-并且没有任何Django模板过滤器，即{％static'img / my_image.png'％}

...

<body data-spy="scroll" data-target="#navbarResponsive" data-js-vars="{% static 'img/my_image.png'|escapejs %}">

<script id="json-vars" type="text/javascript">
    var static_vars = JSON.parse(document.getElementsById('json-vars')[0].textContent);
</script>

此尝试在Chrome控制台中显示错误：

VM6347 extensions::schemaUtils:115 Uncaught Error: Invocation of form runtime.connect(null, ) doesn't match definition runtime.connect(optional string extensionId, optional object connectInfo)
    at Object.normalizeArgumentsAndValidate (VM6347 extensions::schemaUtils:115)
    at Object.<anonymous> (VM6342 extensions::binding:363)
    at Object.<anonymous> (VM6341 extensions::runtime:56)
    at Object.handleRequest (VM6342 extensions::binding:64)
    at Object.<anonymous> (VM6342 extensions::binding:374)
    at notify (content.js:14336)
    at parse (content.js:14344)
normalizeArgumentsAndValidate   @   VM6347 extensions::schemaUtils:115
(anonymous) @   VM6342 extensions::binding:363
(anonymous) @   VM6341 extensions::runtime:56
(anonymous) @   VM6342 extensions::binding:64
(anonymous) @   VM6342 extensions::binding:374
notify  @   content.js:14336
parse   @   content.js:14344

在Chrome控制台中调用static_vars（先前列出的代码中JSON对象的预期名称）两次都返回undefined。

使用Chrome控制台，以下命令的输出符合预期：

document.getElementsByTagName('body')[0].getAttribute('data-js-vars')

输出为...

"/static/img/my_image.png"

但是，将此代码与JSON.parse（）方法结合使用，即...

var static_vars = JSON.parse（document.getElementsByTagName（'body'）[0] .getAttribute（'data-js-vars'））;

...返回上述第一个错误。

我可以使用以下方法将js变量传递给custom.js：

<script type="text/javascript">
    var darkimg = "{% static 'img/mydarkimg.png' %}";
    var lightimg = "{% static 'img/mylightimg.png' %}";
</script>

但是我发现这很乱，因此我对目标的渴望在这篇文章的顶部已经阐明。

如何将Django {％static％} Template Tag的输出序列化为JSON对象？

0 个答案: