Question

页面完全加载后，我正在尝试运行一个简单的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脚本呈现，该脚本在完成后呈现页面的所有内容。 myapp的外部URL路由由使用Flask的python脚本检索和定义。

我尝试了window.onload = changeSize;，<body onload="changeSize();">，并检查了document.readyState所有阶段的时间。

这些都在html完全加载后但在myapp的外部脚本完成之前触发了我的js函数。如何检测何时所有元素和脚本完全完成加载？

Answer 1

我不确定如何加载外部脚本。如果它们使用特殊的库加载，则需要等待回调，然后再调用应用程序初始化。

但是您可以看一下DOMContentLoaded事件。如果我是对的，它也可能会有所帮助。

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
});

Answer 2

我最终找到了使用延迟方法的解决方案（改编自this这样的答案）。

将以下内容放入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()函数。

页面上的所有脚本完全加载后运行js函数

2 个答案: