javascript - 如何使用 JavaScript 添加 jQuery 到 Head？

Question

我正在尝试有条件地将 jQuery 包含到 HTML 页面中。仅当尚不存在时才需要添加。

我在 body 标签顶部附近使用以下代码来注入(inject)一个脚本标签，该脚本标签在头部包含 jQuery 库。

<script type="text/javascript">

    if (typeof jQuery === 'undefined') {
        alert('now adding jquery');
        var head = document.getElementsByTagName("head")[0];
        script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';
        head.appendChild(script);
        if (typeof jQuery === 'undefined') {
            alert('jquery still not present :(');
        }
    } else {
        alert('jquery already present');
    }
</script>

当我执行它时，我收到一条消息:添加 jQuery 后仍然不存在。脚本标签确实正确显示在加载页面的源代码中。

尝试在我的页面下方进一步使用 jQuery，确认 jQuery 确实无法正常工作。正如预期的那样，Chrome 的 JavaScript 控制台显示“$ 未定义”。

我怎样才能让它发挥作用？

Answer 1

脚本异步加载。这意味着附加元素后其内容无法直接使用。

改用onload:

script = document.createElement('script');

script.onload = function() {
    // jQuery is available now
};

script.type = 'text/javascript';
script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js';

head.appendChild(script);