1

Firebase と Phonegap で少し遊んでみました (現在は Android のみで、Adobe のオンライン ビルド ツールを使用しています)。私は彼らのサイトから Firebase チャット サンプルを取得し、それをほぼ「そのまま」index.html ページに貼り付け、phonegap config.xml で必要とされるものをバンドルしました。Android モバイルで単一の index.html を使用してアプリを実行すると、100% 実行されます。index.html にリンクされた内部ページ (つまり、chat.html) に移動すると、受信チャットを受信できますが、送信されません。同じコードが index.html に表示されたときに機能するにもかかわらず、何かが正しく読み込まれていないようです。

私の推測では、それは私が述べた参照、それらの順序と場所に何らかの形で関連していると思います。

これが私のコードのスニペットです。必要に応じて、さらにいくつか述べることができます。

config.xml で:

<feature name="http://api.phonegap.com/1.0/device" />
<feature name="http://api.phonegap.com/1.0/notification"/>
<access origin="*" />

index.html で:

<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="my.js"></script>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

chat.html で、すべてのスクリプト タグにコメントを付けました (もちろん、すべてのスクリプト タグが存在する (コメントなし) でも試してみましたが、同じ結果が得られました)。

my.js (完全):

    $(document).on("mobileinit", function () {
    // Make your jQuery Mobile framework configuration changes here!

    $.support.cors = true;
    $.mobile.allowCrossDomainPages = true;
});

$(document).ready(function () {
    // Get a reference to the root of the chat data.
    var messagesRef = new Firebase('https://alon.firebaseio.com/');

    $('.send-action').click(function () {
        var name;
        if (navigator.platform == 'Win32') {
            name = 'me';
        } else {
            name = device.name + ' (' + device.uuid + ')'; //$('#nameInput').val();
        }
        var text = $('#messageInput').val();
        messagesRef.push({ name: name, text: text });
        $('#messageInput').val('');
    });

    // Add a callback that is triggered for each chat message.
    messagesRef.on('child_added', function (snapshot) {
        var message = snapshot.val();
        $('<div/>').text(message.text).prepend($('<em/>').text(message.name + ': ')).appendTo($('#messagesDiv'));
        $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
        if (message.name != device.name + ' (' + device.uuid + ')') {
            navigator.notification.beep(1);
        }
    });
});

ありがとう！

4

2 に答える 2

1

これはおそらく少し遅れており、すでに気付いている可能性があります-しかし、すべてのコードを別のページに移動したときにfirebaseが機能しなくなった理由は、移動先のページがルートフォルダーの外にあった可能性があります(つまり- /chat/index.html)。

ソースが「firebase.js」と「my.js」である上記の 2 つのスクリプト参照があります。これらは「相対 URL」です。これは、これらのファイルを含むドキュメントが配置されている場所に相対的であることを意味します。したがって、このコードをそのまま URL /chat/index.html のページに配置すると、これら 2 つの js ファイルへの参照は実際には「http://yourdomain.com/chat/firebase.js」を探し、 「http://yourdomain.com/chat/my.js」...しかし、これらのファイルを /chat/ ディレクトリにコピーしなかった場合、404 エラー (または見つからない) とスクリプトが表示されます。動作しません。両方のインスタンスでこれを修正する正しい方法は、代わりに「絶対 URL」を使用することです。各スクリプト参照に「/」を追加することで絶対参照にするので、「my.js」ではなく「/my.js」にします。

于 2013-01-23T23:14:32.630 に答える
1

deviceready イベントをリッスンしていますか? PhoneGap Device API を使用するすべてのページで必要です。JQM を使用していることがわかります。つまり、ページは通常AJAX 経由で読み込まれるため、私の提案は無効になりますが、それをオーバーライドすると (JQM でそれが可能になります)、これは問題になります。

于 2012-12-24T20:34:40.167 に答える