2

javascriptを使用して、外部リンクをクリックしたときに警告するポップアップを実行する方法がわかりません。

外部リンクにもクラスを配置すると便利だと思いましたが、今のように正しく行われたかどうかはわかりません。これは私が現在使用しているHTMLです：

        <div id="commercial-container">
        <a href="http://www.link1.com" class="external" target="_blank"> <img src="picture1.jpg" /> </a>
        <a href="http://www.link2.com" class="external" target="_blank"> <img src="pciture2.jpg" /> </a>
        <a href="http://www.link3.com" class="external" target="_blank"> <img src="picture3.jpg" /> </a>
        <a href="http://www.link4.com" class="external" target="_blank"> <img src="picture4" /> </a>
        </div>

私はjavascriptに非常に慣れておらず、問題を解決する方法がよくわかりません。これまでに理解したことのほとんどは、window.onbeforeloadを使用する必要があるということですが、必要な関数の記述方法を理解する方法がわかりません。

JavaScriptをHTMLではなく別の.jsドキュメントに保存したいと思います。

4

4 に答える 4

3

onClick属性からconfirm（）関数を呼び出します。この関数は、ユーザーが[OK]をクリックするとtrueを返し、それ以外の場合はfalseを返します。

<a href="http://www.link1.com" onClick="return confirm('Do you want to leave')" class="external" target="_blank"> <img src="picture1.jpg"/> </a>

お役に立てれば。

于 2012-11-26T00:20:47.700 に答える
1

これを行うには、各リンクにクリックイベントハンドラーを追加します。これにより、クラス名を使用する必要がなくなります。window.onunloadは、ユーザーがサイトを閉じようとしている場合でも実行されますが、これは望ましくない場合があります。

   <a href="yourwebsitedomain.com">staying in site</a>
    <a href="two">going external</a>

    <script>
    var a = document.getElementsByTagName('a');
    var b = a.length;

    while(b--){
        a[b].onclick = function(){
            if(this.href.indexOf('yourwebsitedomain.com')<0){
                //They have clicked an external domain
                alert('going external');
            }
            else{
                alert('staying in your site');
            }
        };
    }
    </script>
于 2012-11-26T00:29:10.787 に答える
0

あなたはJavascriptに慣れていないので、javascriptフレームワークを使用してすべての「重い作業」を行うことをお勧めします。

たとえば、JQueryを使用すると、次のようにしてonClickイベントをすべての外部リンクに簡単にバインドできます。

$(".external").click(function(event) {
   var confirmation = confirmation("Are you sure you want to leave ?");
   if (!confirmation) {
     // prevents the default event for the click
     // which means that in this case it won't follow the link
     event.preventDefault();
   }
 });

このように、ユーザーが外部クラスとのリンクをクリックするたびに、終了の確認を求めるポップアップメッセージボックスがユーザーに表示され、ユーザーが「はい」と答えた場合にのみリンクをたどります。アクションを実行せずに通知するだけの場合は、確認を単純なアラート呼び出しに置き換えることができます。

$(".external").click(function(event) {
   alert("You are leaving the site");
 });
于 2012-11-26T00:56:55.717 に答える
0

ユーザーがimage、div、..をクリックした場合は、親ノードを探す必要があります。！aタグでラップされた要素がいくつかある可能性があります。

document.addEventListener('click',function(event){
    var eT=(event.target||event.srcElement); 

    if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
    || (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a' 
    && eT.parentNode.href.indexOf('<mydomay>')<0))
    {
    //do someting
    }

    else if(eT...){
      ...
    }
},false);

2つのサイドノート：

  • Cookieなどでユーザーを追跡したい場合は、外部リンクを確認し、タイムアウトを設定して、同期取得要求を作成して更新することをお勧めします。
  • ドキュメントまたはすべてのイベントを含むdivにイベントを追加して、ターゲットを決定することをお勧めします。
于 2014-08-26T09:25:29.933 に答える