如何在 Javascript 文件（.js）中使用 Python Flask？
当 Javascript 代码在 HTML 文件中时，这不是问题。但是，当我将脚本标记的内容移动到 js 文件以用于其他 HTML 文件时，就会出现无法读取图像的问题。代码如下。
脚本.js
function mouseOverSelf() {
let img = document.getElementById("changeImg1");
let m = document.getElementById("changeColor1");
img.src = "{{ url_for('static', filename='img/edit_w.svg') }}";
m.style.color = "white";
}
function mouseOutSelf() {
let img = document.getElementById("changeImg1");
let m = document.getElementById("changeColor1");
img.src = "{{ url_for('static', filename='img/edit.svg') }}";
m.style.color = "black";
}
function mouseOverExcel() {
let img = document.getElementById("changeImg2");
let m = document.getElementById("changeColor2");
img.src = "{{ url_for('static', filename='img/spreadsheet_w.svg') }}";
m.style.color = "white";
}
function mouseOutExcel() {
let img = document.getElementById("changeImg2");
let m = document.getElementById("changeColor2");
img.src = "{{ url_for('static', filename='img/spreadsheet.svg') }}";
m.style.color = "black";
}
索引.html
<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>
我能怎么做？
繁星点点滴滴浏览 129回答 1
1回答
-
慕田峪4524236
{% block %}解决方案是通过模板中的标记而不是通过<script src="..">html 标记 ( )包含 javascript 代码（与 css 相同<link rel="stylesheet" href="..">）。您有两个选择，javascript 代码（与 css 相同）旨在加载和执行：特定页面（本地）所有页面（全局）使用jinja2模板继承机制，下面你可以怎么做：在base.html<!doctype html><html class="no-js"><head> <meta charset="utf-8"> <title>{% block title %}{% endblock %}</title> <meta name="description" content="{% block description %}{% endblock %}"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}"> <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}"> <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}"> {% block stylesheets %} <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> {% block stylesheets_others %}{% endblock %} <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-override.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-extend.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"> {% block stylesheets_local %}{% endblock %} {% endblock %} <meta name="theme-color" content="#fafafa"></head><body> <!--[if IE]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]--> {% block body %} {% include 'includes/header.html' %} {% block content %}{% endblock %} {% include 'includes/footer.html' %} {% endblock %} {% block javascripts %} <script src="{{ url_for('static', filename='js/vendor/modernizr-3.8.0.min.js') }}"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='js/vendor/jquery-3.4.1.min.js') }}"><\/script>')</script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> {% block javascripts_others %}{% endblock %} <script src="{{ url_for('static', filename='js/vendor/vendor.min.js') }}"></script> <script src="{{ url_for('static', filename='js/plugins.js') }}"></script> <script src="{{ url_for('static', filename='js/main.js') }}"></script> {% block javascripts_local %}{% endblock %} <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. --> <script> window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date; ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview') </script> <script src="https://www.google-analytics.com/analytics.js" async></script> {% endblock %}</body></html>在my-page.html{% extends 'base.html' %}[..]{% block stylesheets_local %} {{ super() }} {# to load the parent assets #} <style> /* You "Local" css goes here .. (if any) */ </style>{% endblock %}{% block body %} [..]{% endblock %}[..]{% block javascripts_local %} {{ super() }} {# to load the parent assets #} <script> // You "Local" javascript code goes here .. </script>{% endblock %}如果您想通过例如加载其他 javascript 或 css外部库：cdn对于特定页面，逻辑是相同的，您需要在模板中扩展{% block javascripts_others %}{% endblock %}和{% block stylesheets_others %}{% endblock %}阻止，但不要忘记包括{{ super }}加载父资产（如果有）。但是，如果您认为应该全局加载外部库（javascript 或 css），则将它们base.html分别添加到下面bootstrap和font awesome库中。因此，使用此逻辑，您将以正确的顺序为任何页面加载资产，而不会发生冲突。但是碰巧您的代码（js或css）是为几个页面而不是所有页面（不是全局）加载的，在这种情况下，创建一个单独的模板并将您的js或css代码包含在正确的位置和订单（就像我们之前做的那样）在page-1.html, page-2.html, page-3.html..{% extends 'base.html' %}[..]{% block stylesheets_local %} {{ super() }} {# to load the parent assets #} {% include 'includes/mycss.css.html' %}{% endblock %}{% block body %} [..]{% endblock %}[..]{% block javascripts_local %} {{ super() }} {# to load the parent assets #} {% include 'includes/myscript.js.html' %}{% endblock %}请注意我如何将部分模板命名为约定，这是一个很好的做法。
随时随地看视频慕课网APP
相关分类
JavaScript