PJW*_*PJW 7 html javascript css jquery jinja2
当我的页面完全加载时，我试图运行一个简单的 JavaScript 函数。例如这个函数：
<script type="text/javascript">
function changeSize() {
var el = document.getElementById("my-id");
el.style.height = "500px";
};
</script>
我的页面有一个从外部 URL 检索的长时间加载（秒）脚本，该脚本呈现 html 正文中的主要内容。
我正在使用 Bootstrap，其中我的主体部分base.html是：
<body>
<div class="container-fluid">
{% block header %}{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
内容块通过外部 html 文件加载，即：
{% extends 'base.html' %}
{% block header %}
{% include 'header.html' %}
{% endblock %}
{% block content %}
<div class="my-class" id="my-id">
{{ myapp | safe }}
</div>
{% endblock %}
{% block footer %}
{% include 'footer.html' %}
{% endblock %}
在'my-id'元素中，myapp通过长时间加载的 js 脚本进行渲染，完成后，渲染页面的所有内容。外部 URL 路由myapp由使用 Flask 的 python 脚本检索和定义。
我已经尝试过了window.onload = changeSize;，<body onload="changeSize();">并且我已经检查了所有阶段的时间安排document.readyState。
当 html 完全加载时，但在外部脚本完成之前，这些都会触发我的 js 函数myapp。如何检测所有元素和脚本何时完全加载完成？
PJW*_*PJW 10
我最终找到了使用延迟方法的解决方案（改编自这个SO答案）。
将以下内容放入custom.js文件中：
function delay() {
setTimeout(function() {
changeSize();
}, 200);
}
if (document.readyState == 'complete') {
delay();
} else {
document.onreadystatechange = function () {
if (document.readyState === "complete") {
delay();
}
}
}
然后custom.js加载base.html：
<script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>
这会成功等待长时间加载的脚本和相关内容完全呈现，然后执行该changeSize()函数。
| 归档时间： |
|
| 查看次数： |
12736 次 |
| 最近记录： |