如何检查jquery是否从外部JS文件加载

How can I check if jquery is loaded from external JS file?

本文关键字：从外部 是否 JS 文件 加载 jquery 何检查 检查      更新时间：2023-09-26

我有一个外部JS文件来管理我的页面中的所有脚本。我想在这个文件中写一些代码来检查是否jquery插件加载和(如果没有)加载它!

我尝试用以下代码开始我的myScripts.js文件:

if (typeof jQuery == 'undefined') {
    var script = document.createElement('script');
    script.type = "text/javascript";
    script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(script);
}

在我的index。html

我这样做了:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <script src="myScripts.js"></script>
    </head>
    <body>
        <button id="test">test</button>
        <script>
        $('#test').click( function() {
            alert('clicked');
        });
        </script>
    </body>
</html>

但是它没有执行警告对话框。怎么了?

将click事件包含在$(document).ready中，以确保当DOM准备就绪时触发该事件。

$(document).ready(function(){
$('#test').click( function() {
            alert('clicked');
        });
});

使用脚本添加jquery文件时。它将不可用，所以你必须添加onload侦听器来检测它何时可用。

function fnjquery() {
    $('#test').click( function() {
        alert('clicked');
    });
}
if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
    jqTag.onload = fnjquery;
    headTag.appendChild(jqTag);
} else {
     fnjquery();
}

这是一个工作提琴

function myJQueryCode() {
    //Do stuff with jQuery
    $('#test').click( function() {
            alert('clicked');
        });
}
if(typeof jQuery=='undefined') {
    var headTag = document.getElementsByTagName("head")[0];
    var jqTag = document.createElement('script');
    jqTag.type = 'text/javascript';
    jqTag.src = '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js';
    jqTag.onload = myJQueryCode;
    headTag.appendChild(jqTag);
} else {
     myJQueryCode();
}
<button id="test">
click
</button>

相关文章：