Question

如果我在HTML文档的标题或正文中包含此script标记，则将执行它指向的外部脚本：

<script type="text/javascript" src="http://www.example.com/script.js"></script>

如果在加载完成后通过在页面中使用其他脚本或运行script URI将相同的javascript:标签添加到页面中，则不会加载外部脚本。 / p>

这是一个HTML文档，试图完成我正在谈论的事情：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function f () {
                var s;

                s = document.createElement("script");
                s.setAttribute("type", "text/javascript");
                s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
                document.body.appendChild(s);
                alert(typeof $);
            }
        </script>
    </head>
    <body onload="f();">
    </body>
</html>

如果在Web浏览器中打开此文档，则JavaScript弹出对话框将显示“未定义”而不是“对象”。如果它说“对象”，则意味着jQuery代码已加载。

另一种情况是小书签，它需要运行该页面的页面未使用的JavaScript代码。例如，如果一个书签需要jQuery，并且运行它的页面不使用jQuery，则可以这样做：

s = document.createElement("script");
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
document.body.appendChild(s);

上面的代码不会导致jQuery的加载。

在HTML页面加载后，如何加载脚本？我不想使用任何JavaScript库，因为这将要求该库代码已由页面加载。

Answer 1

使用javascript附加脚本会异步加载它们。添加一个onload处理程序以执行所需的代码

    <script type="text/javascript">
        function f () {
            var s;

            s = document.createElement("script");
            s.setAttribute("type", "text/javascript");
            s.setAttribute("src", "https://code.jquery.com/jquery-3.4.1.min.js");
            document.body.appendChild(s);
            s.onload=function(){alert(typeof $)};
        }
    </script>

Answer 2

在HTML页面加载后如何加载脚本？

放入

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js">

关闭身体后。 html页面是从上到下呈现的，因此只有在加载了正文之后，浏览器才会下载脚本（如果尚未存储在缓存中）。这样，如果您确实需要，可以在此之后放置另一个脚本来控制台typedef日志

页面加载后加载外部脚本

2 个答案: