2

サファリ拡張機能から jQuery を Web ページに挿入したいだけです。ただし、jQuery を start/endscript として追加するとすべてのページに挿入され、ブラウジングが遅くなるため、一部のページのみです。onload 関数を使用して script タグを作成してみました。

var node = document.createElement('script');    
node.onload = function(){
    initjquerycheck(function($) {
        dosomethingusingjQuery($);
    });
};
node.async = "async";
node.type = "text/javascript";
node.src = "https://code.jquery.com/jquery-2.0.3.min.js";
document.getElementsByTagName('head')[0].appendChild(node);

jqueryがロードされているかどうかを確認するには、次を使用します。

initjquerycheck: function(callback) {
    if(typeof(jQuery) != 'undefined'){
        callback(jQuery);
    }else {
        window.setTimeout(function() { initjquerycheck(callback); }, 100);
    }
}

しかし、typeof(jQuery) は未定義のままです。（console.log（）を使用して確認しました）。デバッグ コンソールから console.log(typeof(jQuery)) を呼び出した場合にのみ、「関数」が返されます。それを修正する方法はありますか？前もって感謝します！

4

1 に答える 1

5

拡張機能が挿入されたスクリプトは、Web ページの JavaScript 名前空間にアクセスできません。挿入されたスクリプトは<script>要素を作成し、それをページの DOM に追加しjQueryますが、スクリプトによってインスタンス化されたオブジェクトは、挿入されたスクリプトではなく、ページの名前空間に属します。

考えられる解決策は少なくとも 2 つあります。1 つ目は、拡張 API を使用して、通常の方法で jQuery をページに挿入します。この方法は、ターゲットとする Web ページが URL パターンを使用して分類できる場合にのみ有効です。

Window.postMessage2 つ目は、挿入されたスクリプトと Web ページの名前空間の間の通信に使用します。ページに別のスクリプトを追加する必要があります。このスクリプトには、イベント<script>のリスナーが含まれています。messageリスナーは、ページ自体に「ネイティブ」であるかのように jQuery を使用できます。

必要に応じて、開始するためのコードを次に示します。

拡張機能が挿入されたスクリプトでは:

var s0 = document.createElement('script');
s0.type = 'text/javascript';
s0.src = 'https://code.jquery.com/jquery-2.0.3.min.js';
document.head.appendChild(s0);

var s1 = document.createElement('script');
s1.type = 'text/javascript';
s1.src = safari.extension.baseURI + 'bridge.js';
document.head.appendChild(s1);

window.addEventListener('message', function (e) {
    if (e.origin != window.location.origin)
        return;
    console.log(e.data);
}, false);

window.postMessage('What jQuery version?', window.location.origin);

bridge.js で:

window.addEventListener('message', function (e) {
    if (e.origin != window.location.origin)
        return;
    if (e.data == 'What jQuery version?') {
        e.source.postMessage('Version ' + $.fn.jquery, window.location.origin);
    }
}, false);
于 2013-10-06T23:22:33.510 に答える