python-3.x 如何通过jinja[Flask]访问外部JavaScript文件？

y3bcpkx1 于 2023-06-25 发布在 Python

关注(0)|答案(3)|浏览(151)

我想知道我是否可以通过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中无法使用它？
如果有人可以帮助，请回复此帖子。

python-3.x

来源：https://stackoverflow.com/questions/51404129/how-to-access-external-javascript-files-through-jinjaflask

3条答案

按热度按时间

2admgd591#

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

Flask服务器打开main.html模板
1.渲染/替换所有定义的Jinja变量，即模板中的上下文
1.将呈现的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代码中添加了脚本。
如果这解决了你的问题，并且你已经理解了解释，请告诉我。

赞(0）回复(0）举报 2023-06-25

8tntrjer2#

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);
};

赞(0）回复(0）举报 2023-06-25

qmb5sa223#

上周，我遇到了同样的问题，我也认为无法导入外部JavaScript文件。不过，我现在已经找到了解决办法。
实际上，所有的静态文件都应该放在“static”文件夹下。这样，无论是图像、CSV文件还是JavaScript，您都可以访问它们。例如，如果你在“static”文件夹中创建一个“js”文件夹，并将你的脚本放在那里，你可以像这样将它包含在HTML中：

<script src="{{ url_for('static', filename='js/your_script.js') }}"></script>

这将允许您的脚本正确执行。

赞(0）回复(0）举报 2023-06-25

我来回答

python-3.x 如何通过jinja[Flask]访问外部JavaScript文件？

3条答案

相关问题

热门标签

最新问答