JQuery document.readyとPhonegap deviceready

Question

私はjqueryでphonegapアプリケーションを作っています。私はjQueryの$(document).ready()

$(document).ready(function(){ 
    //mycode 
}); 

または

document.addEventListener("deviceready", function(){ 
    //mycode 
}); 

のようなのPhoneGapのdevicereadyイベント内部のような内部の私の全体のコードをラップする必要があるかどうか混乱しています私は現在document.readyを使用していますが、私は、私ならば、私は問題が発生するかもしれないと思いますdocument.readyのPhonegap APIメソッドにアクセスしてみてください。

私のコードをdocument.readyまたはdevicereadyにラップするのに最適なイベントはどれですか？

Answer 1

面白いことが起きないように、devicereadyイベントを使用する必要があります。

ドキュメントの状態：

これは、すべてのPhoneGapアプリケーションが使用する必要があることが非常に重要なイベントです。

PhoneGapは、ネイティブとJavaScriptの2つのコードベースで構成されています。ネイティブコードが読み込まれている間に、カスタム読み込みイメージが表示されます。ただし、JavaScriptはロードされるとロードされます。つまり、Webアプリケーションが読み込まれる前にPhoneGap JavaScript関数を呼び出す可能性があります。

PhoneGapデバイスイベントは、PhoneGapが完全に読み込まれると起動します。デバイスが起動すると、PhoneGapの機能を安全に呼び出すことができます。

通常、HTMLドキュメントのDOMがロードされたら、document.addEventListenerのイベントリスナーを添付します。

ここにドキュメントを読む：答えでhttp://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

Answer 2

キーポイントは、devicereadyイベントのdocumentationからこの行です。

このイベントは、イベントが発生した後に登録されたイベントハンドラのコールバック関数がすぐに呼び出されるという点で、他とは動作が異なります。

これは、イベントが発生した後にリスナーを追加すると、イベントを「見逃し」ないということです。

最初に、すべての初期化コードをonDeviceReady関数に移動します。その後、まずdocument.readyを処理します。 document.ready内で、ブラウザで実行していると判断した場合は、onDeviceReady関数を呼び出すか、そうでない場合はdevicereadyリスナを追加します。 onDeviceReady関数に入っているとき、このようにして、必要な準備が整ったことを確認できます。

$(document).ready(function() { 
    // are we running in native app or in a browser? 
    window.isphone = false; 
    if(document.URL.indexOf("http://") === -1 
     && document.URL.indexOf("https://") === -1) { 
     window.isphone = true; 
    } 

    if(window.isphone) { 
     document.addEventListener("deviceready", onDeviceReady, false); 
    } else { 
     onDeviceReady(); 
    } 
}); 

function onDeviceReady() { 
    // do everything here. 
} 

のPhoneGapで、index.htmlををfile:/// URLを使用してロードされるため、isphoneチェックが機能します。

Answer 3

@ Kinjalの答えは本当に助けになりましたが、私はタイミングに関して多くの問題と戦わなければなりませんでした。

私は、アプリケーション用のデータファイルを読み込むためにCordovaデバイスレディイベントを使用しています。インターフェイスビルドを駆動し、デフォルトでwwwフォルダ内にロードされるいくつかのJSONパケットですが、最終的にサーバーからダウンロードしてアプリケーションデータベース。

ルーティングが開始される前にアプリケーションデータ構造が初期化するのに十分な時間がなかったため、私は多くの問題を発見しました。

このソリューションでは、jQueryを初期化し、jordan初期化の最後にCordovaのイベントハンドラを呼び出し、Cordova初期化の最後の処理の最後にアプリケーション起動ルーチンを呼び出します。

私はHogan.js用のテンプレートファイルを読み込む方法が必要だったため、ファイルプロトコルと単純なXHRでそれらを読み取ることができなかったので、この悪夢が始まりました。このよう

：私はPhoneGapのは、CLI-6.2.0をビルドし、私は手順をテストするときは、関数onDeviceReady()内部に何もしません示唆し使用しています

$(document).ready(function() { 

    ... 

    // are we running in native app or in a browser? 
    window.isphone = false; 
    if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) { 
     window.isphone = true; 
    } 

    if (window.isphone) { 
     document.addEventListener('deviceready', onDeviceReady, false); 
    } else { 
     onDeviceReady(); 
    } 
}); 

function onDeviceReady() { 
    function readFromFile(fileName, cb) { 
     // see (https://www.neontribe.co.uk/cordova-file-plugin-examples/) 
    } 

    ... 

    readFromFile(cordova.file.applicationDirectory + 'www/views/tappa.html', function (data) { 
     app.views.lastview = data; 
     app.start(); 
    }); 
} 

Answer 4

。

古いバージョンのPGBでは動作します。

\t $(document).ready(function() { 
 
\t \t window.isphone = false; 
 
\t \t if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true } 
 
\t \t if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); } 
 
\t }); 
 
\t function onDeviceReady() { 
 
\t \t alert(window.isphone); \t \t 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 5

彼らは同じではありません。

jQuery.readyは（）を使用している：

document.addEventListener("DOMContentLoaded", yourCallbackFunction, false); 

出典：https://code.jquery.com/jquery-3.1.1.js

コルドバ/ PhoneGapのは、あなたが使用することを指示します。

document.addEventListener("deviceready", yourCallbackFunction, false); 

出典：https://cordova.apache.org/docs/en/latest/cordova/events/events.html

私の提案それは、あなたのCordova/PhoneGapプラグインは、devicereadyイベントが発生したときに起動されるコールバック関数内にあります。例：

document.addEventListener("deviceready", onDeviceReady, false); 

function onDeviceReady() { 
    // Now safe to use device APIs 
}