Question

我想知道我是否可以通过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中使用它？

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

Answer 1

TLDR；将您的flask变量从HTML文件传递到全局JS变量。

我认为无法直接从Flask访问外部JavaScript文件。但是您可以使用此技巧，它可以与许多模板语言（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);
};

Answer 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代码中添加了脚本。

让我知道这是否可以解决您的问题，并且您已理解其中的解释。

如何通过Jinja [Flask]访问外部javascript文件？

2 个答案: