web-dev-qa-db-ja.com

JQuery document.ready vs Phonegap deviceready

Jqueryでphonegapアプリケーションを作成しています。 JQueryの$(document).ready()のようにコード全体をラップする必要があるかどうか混乱しています

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

またはphonegapのdevicereadyイベント内で

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

現在document.readyを使用していますが、document.ready内のPhonegap APIメソッドにアクセスしようとすると問題が発生する可能性があります。

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

javascriptjquerycordova
66
ajaybc

Devicereadyイベントを使用して、おもしろいことが起こらないようにする必要があります。

ドキュメントの状態：

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

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

PhoneGapが完全にロードされると、PhoneGap devicereadyイベントが発生します。デバイスの起動後、PhoneGap関数を安全に呼び出すことができます。

通常、HTMLドキュメントのDOMが読み込まれたら、document.addEventListenerを使用してイベントリスナーをアタッチします。

こちらのドキュメントをお読みください： http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html

28
AbdulFattah Popoola

答えの重要なポイントは、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.
}

Isphoneチェックは、phonegapでは、index.htmlがfile:/// url。

87
Kinjal Dixit

それらは同じではありません。

jQuery.ready（）は次を使用しています：

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

ソース： https://code.jquery.com/jquery-3.1.1.js

Cordova/PhoneGapは次の使用を指示します。

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

ソース： https://cordova.Apache.org/docs/en/latest/cordova/events/events.html

私の提案は、devicereadyイベントが発生したときに起動されるコールバック関数内にCordova/PhoneGapプラグインのすべての初期化コードを配置することです。例：

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

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

@Kinjalの回答は本当に軌道に乗るのに役立ちましたが、タイミングに関する多くの問題と戦わなければなりませんでした。

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

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

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

この悪夢はすべて、Hogan.jsのテンプレートファイルを読み取る方法が必要であり、ファイルプロトコルと単純なXHRで読み取ることができなかったために始まりました。

このような：

$(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();
    });
}
0
mico

PhoneGap Build cli-6.2.0を使用していますが、関数onDeviceReady()の内部では何もしないという提案された手順をテストします。

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

        $(document).ready(function() { 
                window.isphone = false;
                if (document.URL.indexOf("http://") === -1 && document.URL.indexOf("https://") === -1) { window.isphone = true }
                if (window.isphone) { document.addEventListener("deviceready", this.onDeviceReady, false); } else { onDeviceReady(); }
        });
        function onDeviceReady() {
                alert( window.isphone );                
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
0
user6796773

一方が他方を除外する必要はありません。簡単な例：

$(document).on('deviceready', function() {
    console.log('event: device ready');
    $(document).on('pause', function() {
        console.log('event: pause');
    });
    $(document).on('resume', function() {
        console.log('event: resume');
    });
});
0
Martin Zeitler