5

ネットワーク ステータスのイベント リスナーを含むページがあります。ネットワークが「オフライン」の場合、クロス ドメイン リンクを無効にしてオフライン モードに移行したいと考えています。を使用しようとしていまし.preventDefault()たが、アプリがオンラインに戻ったら、リンクを再度有効にする必要があります。

イベントリスナー

//check network status
if(!navigator.onLine) { 
    offlineLinks(); //Offline mode function
}
//add event listeners for network status
window.addEventListener('offline', function(e) {
    offlineLinks(); //Offline mode function
}, false);
window.addEventListener('online', function(e) {
    //need to re-enable links/Online mode
}, false);
window.addEventListener('error', function(e) {
    alert('Error fetching manifest: there is a good chance we are offline.');
    offlineLinks(); //Offline mode function
});

「デリンク」機能

function offlineLinks() {
    $('a[href^="http"]').click(function(e) {
        e.preventDefault();
        $('#offline-dialog').dialog({
            modal: true,
            buttons: {
                Ok: function() {
                    $(this).dialog('close');
                }
            }
        });
    });
}

ページに多数のリンクがある場合に遅延を引き起こさないスケーラブルなソリューションを探しています。呼び出しを元に戻す簡単な解決策、.preventDefault()またはこのタスクを達成するためのより良い方法はありますか?

可能な解決策

私の最初の考えは、href値の配列を保存してから削除/追加することでした。を使用して HTML5 ストレージをいじっていwebdbますが、データベースを作成して、onclick で hrefs を動的にプルできます...ただし、これが最適なソリューションであるかどうかはわかりません。

4

1 に答える 1

9

少なくともリンク ハンドラー部分については、jQuery を使用しているようです。

$.click(handler) は .bind('click', handler) の省略形であることに注意してください。ハンドラーを別の場所で定義した場合、次のように、後でアンバインドすることもできます。

var handler = function(event) { 
  event.preventDefault();
  console.log("the links, they do nothing!");
}

// when you want the external links to be inactive.
// you could use .click(handler) here too, it's the same.
$('a[href^="http"]').bind('click', handler);

// when you want them back
$('a[href^="http"]').unbind('click', handler);

ところで、これを外部リンクだけにしたい場合、 href^="http" は少し壊れやすいです。内部リンクは「http」で始まる場合があり、一部の外部リンクは「ftp」などの他のプロトコルで始まる場合があります。ウィキペディアが「外部」で行っているように、そのようなリンクには独自のクラスを与えることをお勧めします。

于 2011-06-14T05:06:36.407 に答える