3

私がやろうとしていることのアイデアは、私がホストするスクリプトをクライアントが Web サイトに追加できるようにすることです。スクリプトで jQuery を使用できるようにしたいのですが、常に使用できるとは言えません。これが私が賢明なコードを持っているものです。これは、これまでにホストされた JavaScript ページの完全なファイルであり、動作させることができません。$('title').html の部分は、動作するかどうかを確認するためのものです

私がホストしているスクリプトで、クライアントの Web サイトに 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 アナリティクスの場合とほぼ同じ方法で、クライアントにこのファイルがインクルードされます。

これは、クライアントに含めてもらいたい唯一のものです。基本的に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 がまだ完全にロードされていないタイミングと関係があると確信しています。私の質問は、jquery が利用できない場合に動的にロードするクライアントが追加できる JavaScript ページを作成し、スクリプトの他のものを実行する前にそれをロードするにはどうすればよいかということです。

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タグの「投票」タブをクリックすると、最高投票リストに表示されます

Google でホストされている jQuery を使用する最善の方法ですが、Google でホストされているライブラリにフォールバックできません

編集: シナリオの違いは、ローカルと CDN のチェックです。この状況の逆

于 2012-06-23T01:47:28.767 に答える