10

これは、私に提示されたとき、ほとんど不可能なことのように聞こえました。Web ページを離れるときに確認ダイアログ ボックスを表示できることは知っています。しかし、サイトを離れるときにダイアログ ボックスを表示することは可能ですか?

アドレスバーを読み取り、サイトを離れようとしていることを知ることができるものを見つけたり作成したりできませんでした.

4

7 に答える 7

16

まず、どのイベントが実際にユーザーをサイトから遠ざけることができるかを定義しますか?

  1. Web サイトのコンテンツ内のリンクのクリック
  2. 外部アクションへのフォームの送信
  3. 親ウィンドウの window.location を変更する子ウィンドウからの JavaScript
  4. 検索バーで検索を開始するユーザー (FF および IE)
  5. ユーザーがブラウザのアドレス バーに検索/アドレスを入力します。
  6. サイトに来たば​​かりのユーザーが戻るボタン (またはバックスペース) を押す
  7. ユーザーが前にサイトから離れていたときに進むボタン (または Shift-Backspace) を押した後、[戻る] ボタン機能を使用して戻ってきた
  8. ユーザーがブラウザ ウィンドウを閉じる

そう。これらすべてについて何ができますか？

  1. これらは簡単です。アンカーを確認し、それらが外側を指している場合は、onclickイベントにいくつかの機能を追加します
  2. onsubmit1 と同様。フォームがサイト外にポスト バックするイベント用の機能を追加します。
  3. -> 8. 制御できる適切な解決策が実際にはありません。イベントを好きなだけ悪用することはできonbeforeunloadますが、何が起こっているのかを知ることにはあまり成功しません。また、関連する特定の制限もあるonbeforeunloadため、ほとんどの場合、手が縛られます。

本当の質問は？

ユーザーがあなたを離れないようにすることを除いて、とにかくこのイベントを制御したいのはなぜですか。とにかく、物乞いはウェブの世界ではあまり正当化されません。そして、あるサイトがメッセージで私を悩ませたり、さらに悪いことに私が離れることを妨げたりすると、私はもう戻りたくありません. 悪臭悪臭悪臭とアドウェア サイトのヒントを与えます。

むしろ、価値のあるコンテンツを提供することで、ユーザーの関心を維持するようにしてください。

于 2010-03-02T19:36:56.817 に答える
14

あなたの最善の策は、非標準のbeforeunloadイベントを聞くことです。これは、W3C 標準に非常に厳密に準拠することが知られている Opera を除いて、ほぼすべてのブラウザでサポートされています。

キックオフの例:

window.onbeforeunload = function() {
    return "You're leaving the site.";
};

このメッセージは、一種の確認ダイアログとして表示されます。

null特定のケースでは、ナビゲーション リンクがクリックされるか、内部フォームが送信されるたびに、オフにする必要があります (単に に設定するだけです)。click目的のリンクのsubmitイベントと目的のフォームのイベントをリッスンすることで、これを行うことができます。ここでjQueryが大いに役立つかもしれません：

window.onbeforeunload = function() {
    return "You're leaving the site.";
};
$(document).ready(function() {
    $('a[rel!=ext]').click(function() { window.onbeforeunload = null; });
    $('form').submit(function() { window.onbeforeunload = null; });
});

外部リンクであることを示すために、すべての外部リンクに事実上の標準属性を与えるだけで済みrel="ext"ます。

<a href="http://google.com" rel="ext">Google</a>
于 2010-03-02T19:21:26.480 に答える
3

これは役立つかもしれません

  1. onclickattach の前にイベントを確認する必要がありinitLocalLinkException()ます。
  2. 免責事項：テストされていません。

HTML :

<a href="test.html">internal link</a>
<a href="#test">html anchor</a>
<a href="http://www.google.com">external link</a>
<a href="http://www.google.com" target="_blank">blank external link</a>
<form action="test.html" method="post" >
    <button type="submit">Post Button</button>
</form>

JavaScript :

$(document).ready(function () {
  initLocalLinkException();
  window.onbeforeunload = function () { confirmExit() };
  $('form').submit(function () { 
    window.onbeforeunload = null;
  });
});

function initLocalLinkException() {
  $('a').click(function () {
    if ($(this).attr('target') != '_blank') {

      var link = $(this).attr('href');
      if (link.substr(0, 4) == 'http') { 
        var LocalDomains = new Array('http://www.yourdomain.com', 
                                     'https://yourdomain.com', 
                                     'localhost', '127.0.0.1');
        var matchCount = 0;
        $.each(LocalDomains, function () {
          if (this == link.substr(0, this.length)) {
            matchCount++; 
          }
        });
        if (matchCount == '0') { 
          confirmExit(); 
        } else {
          window.onbeforeunload = null;
        }
      } else { window.onbeforeunload = null;  }

    }
  });
}

function confirmExit() {
  alert('Are you sure?'); // Do whatever u want.
}
于 2012-12-20T13:25:10.867 に答える
1

このスレッドを見てください。

これを実現する方法の 1 つは、JavaScript を使用して、ページのa読み込み時にページ上のすべてのタグを調べ、それらが外部サイトにリンクしているかどうかを確認することです。その場合は、onclickイベントを追加して、確認/警告ボックスまたはよりエレガントなものを表示できます。もちろん、jQuery を使用すると、上記のスレッドのように、記述しなければならない Javascript が大幅に簡素化されます。

于 2010-03-02T19:23:48.157 に答える
1

それが可能だ。SO に質問または回答を入力してから、送信する前に移動してみてください。リンクをクリックしても、アドレス バーに入力しても、「よろしいですか?」というメッセージが表示されます。アラート。SO Metaに投稿して、彼らがこれをどのように行っているかを尋ねるかもしれません。

于 2010-03-02T19:37:56.650 に答える
1

この質問の式を使用すると、次のことができます。

$.expr[':'].external = function(obj){
    return !obj.href.match(/^mailto\:/) && (obj.hostname != location.hostname);
};
$.expr[':'].internal = function(obj){
    return obj.hostname == location.hostname;
};

$(function() {
    var unloadMessage = function() {
        return "Don't leave me!";
    };

    $('a:internal').click(function() { 
        window.onbeforeunload = null;
    });
    $('form').submit(function() { 
        window.onbeforeunload = null;
    });

    $('a:external').click(function() { 
        window.onbeforeunload = unloadMessage;
    });

    window.onbeforeunload = unloadMessage;
});
于 2010-03-02T19:30:00.233 に答える
1

サイトを 1 ページの Web アプリとして設計する場合は、これを行うことができます。
つまり、1 つのページが読み込まれ、その後 ajax を使用して他のコンテンツが動的に読み込まれます。

その場合onbeforeunload、ユーザーがページ/サイトを離れたときにトリガーされます。

于 2010-03-02T19:52:59.243 に答える