Search code examples
javascriptflaskjinja2

Passing jinja variable to external JS

Sorry if duplicate. But couldn't find it, besides doing some workaround calling functions etc. Is there any straight forward method nowadays? If so, how to do that? Thanks!

It works normally if I use {{ var }} inside the script tag in html, but if I import the js file, it won't work.

Solution

  • Use a script tag to define the jinja variable, then import your external JS after the script tag.

    html

    <body>
  <h1>Hello</h1>
  <script>
    const myJinjaVar = {{ var }};
  </script>
  <script type="text/javascript" src="externalJs.js"></script>
</body>

    externalJs.js

    console.log(myJinjaVar); // uses var defined in template