Loading external script with jinja2 template directive

You have two choices here — the first is the way you did it — simply add the appropriate markup into a template (or a block if you want to be able to override it in templates which extend your first template.)

The second way is to use Jinja2’s include function:

{% block javascript %}
    <script type="text/javascript">
        {% include "https://stackoverflow.com/questions/3412275/myscript.js" %}
    </script>
    <!-- The contents of myscript.js will be loaded inside the script tag -->
{% endblock %}

The advantage of using include is that Jinja2 will process your javascript before including it — which means you can have variables in your javascript that change depending on the state of your program.

The disadvantage of using include in this manner is the same — your .js file will be run through Jinja2 before being sent out — if you are not using dynamic content you will just be processing the file unnecessarily for every request — and if you are using a javascript templating library with Jinja2 syntax then trouble is likely.

Leave a Comment