使用 $(document).ready() 和 $.getScript() 在页面完成加载后加载外部脚本

Question

正如标题所说，我想通过将我的 script 标记放在网站的 header 而不是底部来加载脚本。

我的 example/attempt 短片是这样的：

HTML 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js">
        $(document).ready( function () {
            $.getScript("./js/script.js");
        } );
    </script>
   </head>
<body>
    <p id="para">hey there waht's up</p>
<body>
</html>

外部 JS 文件：

$("#para").click( function () {
    $("#para").hide();
})

但是没用。知道为什么吗？我在追独角兽吗？

Answer 1

根据 MDN documentation:

If a script element has a src attribute specified, it should not have a script embedded inside its tags.

所以将代码移到一个单独的脚本标签中。

<script src="js/jquery-3.3.1.js"></script> 
<script> 
    $(document).ready( function () { $.getScript("./js/script.js"); } );
</script>

使用 $(document).ready() 和 $.getScript() 在页面完成加载后加载外部脚本

Load external script after page is done loading by using $(document).ready() and $.getScript()

html

javascript

jquery

external