如何通过 jinja[Flask] 访问外部 javascript 文件？答案

【问题标题】：How to access external javascript files through jinja[Flask]?如何通过 jinja[Flask] 访问外部 javascript 文件？
【发布时间】：2018-07-18 14:05:22
【问题描述】：

我想知道我是否可以通过 jinja 访问外部 javascript 文件？它适用于 html 文件或嵌入在 html 文件中的 js，但不适用于 javascript 文件是外部的。

代码：

@app.route('/')
def default():
    return render_template('main.html', var1 = 1, var2 = 2)

main.html 代码：

<html>
<body>
        <p>The first value is {{var1}}</p>
        <script src="main.js"></script>
</body>
</html>

main.js 文件：

window.onload=function(){
    console.log('{{var2}}');
};

现在 main.js 中的 jinja 代码不起作用

可能在外部js中无法使用？

如果有人可以提供帮助，请回复此主题。

【问题讨论】：

你记得把js文件放在服务器可以访问的地方吗？
有没有办法在模板文件夹中运行js文件
浏览器运行 JavaScript 文件。浏览器从服务器获取 JavaScript 文件。
你能解释清楚吗！
目前我的服务器可以从静态文件夹访问 javascript 文件，但我不能在 javascript 文件中包含 jinja 代码

标签： javascript python python-3.x flask jinja2

【解决方案1】：

TLDR；将烧瓶变量从 HTML 文件传递给全局 JS 变量。

我认为直接从 Flask 访问外部 JavaScript 文件是不可能的。但是你可以使用这个 hack，它适用于许多模板语言（Jinja、EJS...）

main.py:

@app.route('/')
def default():
    return render_template('main.html', var1 = 1, var2 = 2)

main.html

<html>
<body>
        <p>The first value is {{var1}}</p>
        <!-- Insert this <script/> tag before loading you main.js -->
        <script type="text/javascript"> window.myVar1 = "{{var1}}" </script>
        <script src="main.js"></script>
</body>
</html>

main.js

window.onload=function(){
    // Now you can access to myVar1 directly
    console.log(myVar1);
};

【讨论】：

【解决方案2】：

您需要了解 Jinja 的工作原理。当你运行命令时 return render_template('main.html', var1 = 1, var2 = 2)，按如下方式处理：

Flask 服务器打开 main.html 模板
渲染/替换所有已定义的 Jinja 变量，即模板中的上下文
将呈现的 HTML 发送到客户端。

因此变量没有加载到客户端的{{ var }}占位符中，而是在服务器端。

因此，要实现您想要做的事情，您可以执行以下操作：在 main.html 代码中：

<html>
<body>
        <p>The first value is {{var1}}</p>
        <script>var var2 = {{var2}};
        <script src="main.js"></script>
</body>
</html>

在 main.js 代码中：

window.onload=function(){
    console.log(var2);
};

注意：在调用依赖脚本的main.js之前，我们已经在HTML代码中添加了脚本。

如果这解决了您的问题并且您已经理解了解释，请告诉我。

【讨论】：

@Fcmam5 在我起草时发布了答案。他的建议是相同的，并且可以正常工作。