0

地下鉄のユーザー向けに、オフライン対応の HTML 5 Web アプリを構築しています。多くの場合、地下鉄ではモバイル ネットワークが非常に遅いため、ページ リクエストの応答に 1 分以上かかることがあります。ページの読み込みに 10 秒以上かかる場合にオフライン モードに切り替えるオプションをユーザーに提供したいと考えています。

window.location を新しいページに設定する直前に、javascript setTimeout() でこれを実行しようとしました。タイムアウト関数が呼び出されたときにページがまだ存在する場合、これはページに時間がかかりすぎていることを意味し、confirm() ダイアログでユーザーにプロンプ​​トを表示します。ユーザーが [OK] をタップすると、appcache から提供される window.location = '/offline' を設定します。

これはほとんどの場合うまく機能しますが、確認ダイアログが画面に表示されている間に、元のハイパーリンクからの応答が返されることがあります。iOS と Android の両方で、確認ダイアログが表示されると、元のハイパーリンクがページを置き換えるのをブロックしているようです。ただし、iOS では、確認ダイアログを閉じると、オフライン ページではなく、常に元のページに移動します。

おそらく、確認ダイアログをページ上の同様のフローティング HTML ダイアログ ボックスに置き換えることもできますが、ダイアログが表示されている間にページが戻ってきた場合に、ユーザーが応答する変更はまったくありません。

私が本当にやりたいことは、ハイパーリンクのクリックをキャンセルすることです。しかし、これは不可能に思えます。

目的の効果を達成する他の方法はありますか?

4

3 に答える 3

1

別のページへのナビゲーションが開始されたら、古いページが何らかの方法で応答する必要はありません。

AJAX 経由で新しいページをリクエストできる場合がありますが、これはキャンセル可能です (.abort()レスポンスを使用するか、単に無視することにより)。次に、ロード時にinnerHTML、現在のページ全体をダンプするために使用できます。繰り返しますが、これはいくぶんハクシーで信頼性に欠けます (スタイルシート、スクリプトなどが機能しない可能性があります)。

全体として、この方法でネットワーク接続を台無しにしようとすると、接続自体と同じくらい信頼できなくなります。

于 2012-12-28T16:57:17.880 に答える
0

WebKit ブラウザーでは、window.stop() を使用して、ブラウザーが読み込んでいるすべてのものをキャンセルできます。これにより、ブラウザは次のページのリクエストを終了します (画像、javascript、ajax などをダウンロードするその他のリクエストも同様です)。

ページが最終的にデザインをロードすると、低速接続ダイアログが消える問題を解決しました。ダイアログの代わりに、ページの中央にリボンを重ねて配置したので、ページの応答が最終的に得られたときにリボンとページが消えても、ユーザーへの不快感が少なくなりました。以下の待機オプションは、単にリボンを非表示にします。Webkit ブラウザーで動作するコードは次のとおりです。

    // This code executes in the click event for a link to forUrl
    clearTimeout(MyApp.slowPageTimeout);
    MyApp.slowPageTimeout = setTimeout('MyApp.slowPageLoadEvent("'+forUrl+'");', 10000);

    slowPageLoadEvent: function(forUrl) {           
        var cachedDocument = myApp.getDocumentByUrl(forUrl);            
        var height = 100;
        var position = window.innerHeight/2+window.scrollY-height/2;
        var slowHttp = "<div id='slow-http-warning'>Slow connection.  <span id='no-wait'>Read offline</span>, or <span id='wait'>wait</span>?</div>";

        if ($("#slow-http-warning").length == 0) {
            $('body').append(slowHttp);                         
        }
        else {
            $('#slow-http-warning').html(slowHttp);                     
        }
        $("#slow-http-warning").css('top', ""+position+"px");
        $("#wait").click(function() {
            $('#slow-http-warning').remove();
        });
        $("#no-wait").click(function() {
            window.stop(); // not supported in IE, but it has an equivalent: document.execCommand("Stop");
            $('#slow-http-warning').remove();
            MyApp.setOffline();  // switch to operating in offline mode
            MyApp.go(cachedDocument); // display page from local storage cache
            return;           
        });
    }
于 2013-02-02T16:47:46.623 に答える
0

確認機能をjQueryダイアログに置き換えることができます。jQuery ダイアログでは、ユーザーをオフライン ページに誘導するボタンにリンクを設定できます。ユーザーが時間内にリンク/ボタンをクリックすると、ユーザーはオフライン ページに誘導されます。

jQuery ダイアログ サンプルへのリンク: http://jqueryui.com/dialog/#modal-message

于 2012-12-28T17:01:48.010 に答える