Моя цель - сериализовать вывод тега шаблона 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
Я рассмотрел несколько стековых потоковответы, но не нашел того, который, как я понял, достаточно уместен для справки.
Мой код 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 | json_script: «myIdname» на основе ранее упомянутого ресурса Django Docs - и без фильтра шаблонов 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>
ThЭта попытка отображает ошибку в консоли 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
Вызов static_vars (предполагаемое имя объекта JSON из кода, указанного ранее) в консоли Chrome возвращает undefined для обеих попыток.
Используя Chrome Console, выходные данные следующих команд соответствуют ожидаемым:
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>
Но я нахожу это сколь угодно грязным, и, таким образом, мое стремление к цели, изложенной в начале этого поста.