3

我正在尝试做的想法是允许客户将我托管的脚本添加到他们的网站上。我希望能够在我的脚本中使用 jQuery，但不能确定它是否始终可用。这是我的代码明智的。到目前为止，这是我托管的 javascript 页面的完整文件，但我无法让它工作。$('title').html 部分只是为了让我看看它是否有效

我希望我托管的脚本负责在客户网站上包含 jQuery。除了我的脚本之外，我不希望客户端必须包含 jQuery

window.onload = function () {
    if (typeof jQuery == 'undefined') {
        var jq = document.createElement('script'); 
            jq.type = 'text/javascript'; 
            jq.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
        var sc = document.getElementsByTagName('script')[0];
            sc.parentNode.insertBefore(jq, sc);
    } 

    console.log($('title').html());

}

这个 javascript 文件位于我的服务器上，我的客户端会以与 google 分析相同的方式包含这个文件。

这是我希望我的客户必须包括的唯一内容。拉取基本和谷歌分析一样

<script type="text/javascript">
    var _waq = _gaq || [];
        _waq.push(['PARAM1', 'PARAM2']);

    (function() {
        var wa = document.createElement('script'); 
            wa.type = 'text/javascript'; 
            wa.async = true;
            wa.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'PATH/TO/SCRIPT/wa.js';
        var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(wa, s);
    })();
</script>

当我运行页面时，我收到一条错误消息，Uncaught ReferenceError: $ is not defined但是如果我在页面加载后立即输入，$('title').html();我会在控制台中返回标题。

我确定这与脚本中 console.log 的运行时间有关，并且还没有让 jQuery 完全加载。我的问题是我如何能够创建一个客户端可以添加的 javascript 页面，如果它不可用动态加载 jquery，并在脚本上的任何其他内容运行之前加载它？

4

4 回答 4

3

我的同事只需要解决同样的问题。从他的代码中提取，变量更改以反映您的代码。

if(jq.readyState) {
    // For old versions of IE
    jq.onreadystatechange = function() {
        if(this.readyState == 'complete' || this.readyState == 'loaded') {
            // do something...
        }
    }
} else {
    // Other browsers
    jq.onload = function() {
        // do something...
    }
}
于 2012-06-23T01:21:03.707 回答
2

这个适用于所有浏览器

function done(){ //on submit function
    alert($);
}

function load(){ //load jQuery if it isn't already
    window.onload = function(){
        if(window.jQuery === undefined){
            var src = 'https:' == location.protocol ? 'https':'http',
                script = document.createElement('script');
            script.onload = done;
            script.src = src+'://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
            document.getElementsByTagName('body')[0].appendChild(script);
        }else{
            done();
        }
    }
}

if(window.readyState){ //older microsoft browsers
    window.onreadystatechange = function(){
        if(this.readyState == 'complete' || this.readyState == 'loaded'){
            load();
        }
    }
}else{ //modern browsers
    load();
}
于 2012-06-23T01:20:00.353 回答
0

您可以检查 window.jQuery 是否返回 true，如果它不包含该库。像这样的东西。

window.onload = function () {
    if (!window.jQuery) {
        var jq = document.createElement('script'); 
        jq.type = 'text/javascript'; 
        jq.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';
        var sc = document.getElementsByTagName('script')[0];
        sc.parentNode.insertBefore(jq, sc);
    }
    //You had this in the code you posted so I left it there
    console.log($('title').html());
}
于 2012-06-23T03:17:13.397 回答
-1

问题已在 SO 中多次讨论

这个线程代表了很多好的观点。点击jquery标签的“votes”标签，将在最高票数列表中看到它

使用 Google 托管 jQuery 的最佳方式，但退回到我在 Google 上的托管库失败

编辑：场景的区别是检查本地与 CDN。针对这种情况反向

于 2012-06-23T01:47:28.767 回答