在 Flask 应用程序中链接外部 .js 文件时未应用 JavaScript 功能

Question

I'm working on a flask application.我正在开发一个烧瓶应用程序。 I've made a .htm file and I need to write some javascript code for the web page.我制作了一个 .htm 文件，我需要为网页编写一些 javascript 代码。 I first wrote the code in an external file but while running my flask app, the javascript functionalities were not applied.我首先在外部文件中编写代码，但是在运行我的 Flask 应用程序时，没有应用 javascript 功能。 But when I included all the js code in the .htm file itself (within the script tag), then they were being applied.但是当我将所有 js 代码包含在 .htm 文件本身（在脚本标记内）时，它们就被应用了。 These are the Bootstrap CSS and JavaScript CDNs that I have linked.这些是我链接的 Bootstrap CSS 和 JavaScript CDN。 I'm thinking these are overriding the code written in the external .js file.我认为这些是覆盖在外部 .js 文件中编写的代码。

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>

This is how I'm linking my external .js file.这就是我链接外部 .js 文件的方式。

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

How can I link my external .js file so that those functionalities will get applied?如何链接我的外部 .js 文件以便应用这些功能？

This is my folder structure:这是我的文件夹结构：

This is how I have included the Bootstrap js CDNs and my .js file:这就是我包含 Bootstrap js CDN 和我的 .js 文件的方式：

Answer 1

Sometimes the JavaScript might not load due to the encoding.有时 JavaScript 可能由于编码而无法加载。
Set the encoding to UTF-8 and it will work.将编码设置为UTF-8 ，它将起作用。

Here is the code:这是代码：

<head>
  <!-- set encoding to utf-8 -->
<meta charset="utf-8">

  <!-- Adding your CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Adding your viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
   <!-- all other code of your file -->

   <!-- Add JavaScript in the end of the contents in body -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</body>

EDIT:编辑：
According to the picture you have given, use this code:根据您给出的图片，使用以下代码：

<script type="text/javascript" src="../static/index.js"></script>

You have to write it as ../static/index.js in your script src你必须在你的script src把它写成../static/index.js

在 Flask 应用程序中链接外部 .js 文件时未应用 JavaScript 功能

问题描述

1 个解决方案

解决方案1
0 2020-10-05 05:06:59

在 Flask 应用程序中链接外部 .js 文件时未应用 JavaScript 功能

问题描述

1 个解决方案

解决方案1 0 2020-10-05 05:06:59

解决方案1
0 2020-10-05 05:06:59