在扩展的 html python 烧瓶中无法识别 JavaScript onload答案

【问题标题】：JavaScript onload not recognized in extended html python flask在扩展的 html python 烧瓶中无法识别 JavaScript onload
【发布时间】：2016-10-27 02:10:22
【问题描述】：

我在我的烧瓶应用程序中使用了basic.html，它加载了所有需要的资源，如页脚导航栏等，我所有的其他 html 网站都扩展了这个basic.html

在我的main.js 中，我创建了一个简单的函数：

function fun() {
  alert("we have fun");
}

我像这样在basic.html 中加载我的文件：

<script type=text/javascript src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/bootstrap.js') }}"></script>

<script type=text/javascript src="{{ url_for('static', filename='js/main.js') }}"></script>

现在我想在我的page.html 中使用这个函数，它扩展了basic.html：

{% extends "basic.html" %} 

{% block content %}

<div class = "container" onload="fun()">
<p> Test </p>
</div>

{% endblock %}

遗憾的是，没有任何反应，但如果我在 basic.html 本身中使用 onload="fun()"，它就可以工作。

那么我该如何解决呢？

这是我之前的一个问题的一个非常简化的版本，因为我坐了 4 个小时，我想我知道是什么导致了这个问题，但我无法解决它，我发现的所有解决方案都不起作用.

这是我之前的问题： question

我认为onload="fun()" 在 jQuery 甚至加载或我的 main.js 之前被调用，但我仍然不能 100% 确定这是否会导致错误并且我找不到解决方案

【问题讨论】：

标签： javascript jquery python html flask

【解决方案1】：

把它放在你的 basic.html 中

<head>

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

</head>

<body onLoad="fun();">

onLoad需要进入body而不是div

【讨论】：

这将在您已将静态路径设置为静态文件夹并且其中有一个名为 JS 的文件夹的假设下工作
这个答案没有用，因为您正在更改父模板以获得子模板所需的效果。这将导致使用子模板渲染的每个页面调用fun()，这显然是不可取的。
@MiteshNinja 如果你想让人们注册你的页面，这可能是我们想要的，它展示了我在实际项目中有用的东西

【解决方案2】：

问题很简单。您不能将onload 附加到div。

onload 事件只能用于文档（正文）本身、框架、图像和脚本。换句话说，它只能附加到主体和/或每个外部资源。 div 不是外部资源，它是作为 body 的一部分加载的，因此 onload 事件不适用于那里。

在 div 元素之后立即添加脚本标记将导致它在 div 呈现后立即触发。所以这将完美地工作：

{% extends "basic.html" %}
{% block content %}

<div class="container">
<p> Test </p>
</div>

<script type="text/javascript">
fun();
</script>

{% endblock %}

在此处阅读更多信息：How to add onload event to a div element?

您可以使用此处解释的另一种解决方案，而不是在函数调用中附加脚本标记：https://stackoverflow.com/a/17071878/4395646

【讨论】：

似乎他想将javascript代码保存在一个单独的文件中，所以问题是如何将js文件与html文件连接起来
@leela.fry 如果不明显，我很抱歉。但是他仍然将javascript代码保留在main.js中，只是在div之后调用它。我已经编辑了代码以清除它。
是的，将它附加到 div 是愚蠢的，我已经想通了，如果我连接到一个按钮并使用 onclick，它就可以工作，所以脚本加载成功，但我的主要问题是第一个问题中的一个，似乎 google apis 在 localhost 上不起作用
@Roman 如果此问题已得到解决，请接受答案。我也会看看你的另一个问题！谢谢。
我确信它根本无法在本地主机上运行，即 Google JavaScript Api