如何通过jinja[Flask]访问外部javascript文件？_Javascript_Python_Python 3.x_Flask_Jinja2

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

javascript python python-3.x flask

如何通过jinja[Flask]访问外部javascript文件？,javascript,python,python-3.x,flask,jinja2,Javascript,Python,Python 3.x,Flask,Jinja2,我想知道我是否可以通过jinja访问外部javascript文件？它可以很好地处理html文件或嵌入在html文件中的js，但当javascript文件是外部文件时就不行了代码： main.html代码： <html> <body> <p>The first value is {{var1}}</p> <script src="main.js"></script> </body>

我想知道我是否可以通过jinja访问外部javascript文件？它可以很好地处理html文件或嵌入在html文件中的js，但当javascript文件是外部文件时就不行了

代码：

main.html代码：

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

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

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

也许在外部js中不可能使用它

如果有人能提供帮助，请回复此帖子。

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>

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>

你需要了解Jinja是如何工作的。当你运行命令时返回render_模板'main.html'，var1=1，var2=2，它将按以下方式处理：

Flask服务器打开main.html模板将所有定义的Jinja变量（即上下文）呈现/替换到模板中将呈现的HTML发送到客户端。因此，变量不会加载到客户端的{{var}}占位符中，而是加载到服务器端

因此，为了实现您想要做的事情，您可以采取以下措施：在main.html代码中：

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

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

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

让我知道这是否解决了您的问题，并且您已经理解了解释。

您需要了解Jinja是如何工作的。当你运行命令时返回render_模板'main.html'，var1=1，var2=2，它将按以下方式处理：

因此，为了实现您想要做的事情，您可以采取以下措施：在main.html代码中：

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

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

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

让我知道这是否解决了您的问题，并且您已经理解了解释。

您是否记得将JS文件放在服务器可以访问的位置？是否有方法在模板文件夹中运行JS文件浏览器运行JavaScript文件。浏览器从服务器获取JavaScript文件。你能解释清楚吗！目前，我的服务器可以从静态文件夹访问javascript文件，但我不能在javascript文件中包含jinja代码。您是否记得将JS文件放在服务器可以访问的位置？是否有方法在模板文件夹中运行JS文件浏览器运行javascript文件。浏览器从服务器获取JavaScript文件。你能解释清楚吗！目前我的服务器可以从静态文件夹访问javascript文件，但我不能在javascript中包含jinja代码file@Fcmam5在我起草我的答案的时候发布了答案。他所建议的是同一件事，而且会正确地工作。@Fcmam5在我起草我的答案时发布了答案。他所建议的是同样的事情，而且会正确地工作。