页面加载时未调用 JavaScript 函数

Question

我在页面底部放置了一个 JavaScript 函数，但由于某种原因，该页面在页面加载时并未被调用。我尝试在控制台上运行它以确保它不会产生错误，但它运行得很好。我什至尝试设置

window.onload = function() {applyMovement();}

这根本不起作用。

about.js

function applyMovement() {
    let bars = document.getElementsByClassName('progress-bar');
    for (let i = 0; i < bars.length; i++) {
        moveBar(bars[i], i);
    }
}

index.blade.php

...
</body>
<script src="{{ asset('/js/about.js') }}">window.onload = function() {applyMovement();} </script>
</html>

需要注意的是，我使用的是 Laravel 5.8。我已将 JS 文件放在 public 目录中。此外，正在运行文件上的其他操作，但不运行此特定函数。

Answer 1

尝试在 about.js 的声明下放置一个新的脚本标签。就像这样:

...
</body>
<script src="{{ asset('/js/about.js') }}"> </script>
<script> window.onload = function() {applyMovement();} </script>
</html>

如果这不起作用，请尝试以下操作(将其作为全局绑定(bind)到窗口):

window.applyMovement = function() {
    let bars = document.getElementsByClassName('progress-bar');
    for (let i = 0; i < bars.length; i++) {
        moveBar(bars[i], i);
    }
}