页面上的所有脚本完全加载后运行js函数 [英] run js function after all scripts on page are fully loaded
问题描述
我试图在页面完全加载后运行一个简单的javascript函数.例如，此功能:
I am trying to run a simple javascript function when my page is completely loaded. For example, this function:
<script type="text/javascript">
function changeSize() {
var el = document.getElementById("my-id");
el.style.height = "500px";
};
</script>
我的页面有一个从外部URL检索的长负荷(秒)脚本，该脚本在html正文中呈现了主要内容.
My page has a long-loading (seconds) script retrieved from an external URL that renders the main content in the html body.
我正在使用Bootstrap，其中 base.html 的主体部分为:
I am using Bootstrap where the body section of my base.html is:
<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文件加载的，该文件是:
The content block is loaded via an external html file, which is:
{% 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'元素中，通过长时间加载的js脚本呈现 myapp ，该脚本完成后将呈现页面的所有内容. myapp 的外部URL路由是通过使用Flask的python脚本检索和定义的.
In the 'my-id' element, myapp is rendered via the long-loading js script that, when finished, renders all the content of the page. The external URL route for myapp is retrieved and defined by a python script using Flask.
我尝试了 window.onload = changeSize; ，< body onload ="changeSize();"> ，并且我检查了所有阶段的时间的 document.readyState .
I have tried window.onload = changeSize;, <body onload="changeSize();">, and I have checked the timing of all stages of document.readyState.
当html完全加载时，但在 myapp 的外部脚本完成之前，所有这些都会触发我的js函数.如何检测何时所有元素和脚本完全完成加载?
These all trigger my js function when the html is fully loaded, but before the external script for myapp is complete. How do I detect when all elements and scripts are completely done loading?
推荐答案
我最终找到了使用延迟方法的解决方案(改编自这个这样的答案).
I ended up finding a solution using a delay method (adapted from this SO answer).
将以下内容放入 custom.js 文件中:
Put the following in a custom.js file:
function delay() {
setTimeout(function() {
changeSize();
}, 200);
}
if (document.readyState == 'complete') {
delay();
} else {
document.onreadystatechange = function () {
if (document.readyState === "complete") {
delay();
}
}
}
然后使用以下命令将 custom.js 加载到 base.html 中:
Then load the custom.js in base.html with:
<script type="text/javascript" src="{{ url_for('static', filename='custom.js') }}"></script>
这将成功等待直到长时间加载的脚本和相关内容被完全呈现，然后执行 changeSize()函数.
This successfully waits until the long-loading script and related content is fully rendered, then executes the changeSize() function.
这篇关于页面上的所有脚本完全加载后运行js函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
