13

サイト上のすべての外部リンクを新しいウィンドウで開こうとしています。ただし、ストアとメイン サイトなど、サイトには 2 つのバージョンがあります。したがって、メイン サイトには、たとえばhttp://store.example.comに移動するリンクがある場合があります。

ここには、すべての外部リンクを新しいウィンドウで開くことができるコードがあります。ただし、特定のドメインを除外できるようにしたいと考えています。私が上で述べたもののように。

コードは次のとおりです。

$(document).ready(function() {
   $("a[href^=http]").each(function(){
      if(this.href.indexOf(location.hostname) == -1) {
         $(this).attr({
            target: "_blank",
            title: "Opens in a new window"
         });
      }
   })
});

私はJS / jQueryが初めてなので、追加情報があれば素晴らしいでしょう.

4

9 に答える 9

18

プログラムでクリックをトリガーするには、次のようなことができます。

$(document).ready(function() {

   $("a[href^=http]").each(function(){

      // NEW - excluded domains list
      var excludes = [
         'excludeddomain1.com',
         'excludeddomain2.com',
         'excluded.subdomain.com'
      ];
      for(i=0; i<excludes.length; i++) {
         if(this.href.indexOf(excludes[i]) != -1) {
            return true; // continue each() with next link
         }
      }

      if(this.href.indexOf(location.hostname) == -1) {

           // attach a do-nothing event handler to ensure we can 'trigger' a click on this link
           $(this).click(function() { return true; }); 

           $(this).attr({
               target: "_blank",
               title: "Opens in a new window"
           });

           $(this).click(); // trigger it
      }
   })
});
于 2012-08-22T10:44:05.927 に答える
4

ドメイン名に一致しないすべてのリンクが必要な場合:

var all_links = document.querySelectorAll('a');
for (var i = 0; i < all_links.length; i++){
       var a = all_links[i];
       if(a.hostname != location.hostname) {
               a.rel = 'noopener';
               a.target = '_blank';
       }
}
于 2019-05-13T19:23:01.830 に答える
1

おそらくクリックイベントのためのより良いフックを得るために HTML を編集できますか? 内部または外部の間で特定のリンクを分離する必要がある場合は、HTML 要素に rel 値を適用します。

    <a href="URL" rel="external">Link</a>

次に、あなたのJavaScriptで

    $('a[rel="external"]').click( function(event) {
     event.stopPropagation();
     window.open( $(this).attr('href') );
     return false;
    });

編集：すでにたくさんのリンクがあるので、これはどうですか..

    var a = new RegExp('http:\/\/store.blah.com');

    $('a').each(function() {

      if(a.test(this.href)) {
        $(this).click(function(event) {
         event.preventDefault();
         event.stopPropagation();
         window.open(this.href, '_blank');
        });
      }

    });
于 2012-08-22T10:44:53.650 に答える
0

techfoobar の回答と同じ行に沿って、同じウィンドウで開いておく必要があるドメインのリストを作成できます。正規表現を使用すると、より堅牢な方法で実行できます。単純に indexOf() チェックを実行すると、サブドメインが一致するがドメインが一致しないリンクはスキップされますが、href 文字列内の任意の場所で名前を一致させたい場合は「$」を省略できます。

この実装は、あなたが望むことを行う必要があり、必要なコードへの変更は最小限です。

$(document).ready(function() {
    //populate this list with whatever domain names you want, the 
    //$ sign matches the end of the string, only top level domains are affected
    var whiteList = [/google.com\/$/, /stackoverflow.com\/$/];

   $("a[href^=http]").each(function(){
      if(this.href.indexOf(location.hostname) == -1) {

        //check if the href of the current link matches any of our patterns
        var href = this.href;
        if(whiteList.filter(function(x){return x.test(href)}).length == 0) {

         $(this).attr({
            target: "_blank",
            title: "Opens in a new window"
         });
        }
      }
   })
});

この例では、google.com と stackoverflow.com へのすべてのリンクは、既存のページでも開くように残されます。

于 2012-08-22T11:43:42.940 に答える
0

これにより、PHP を使用するすべての外部ドメインに対してトリックが実行されます。

$(document).ready(function() {
   $("a[href^=http]").each(function(){

      // NEW - excluded domains list
      var excludes = [
         '<?php echo $_SERVER['HTTP_HOST']; ?>'
      ];
      for(i=0; i<excludes.length; i++) {
         if(this.href.indexOf(excludes[i]) != -1) {
            return true; // continue each() with next link
         }
      }

      if(this.href.indexOf(location.hostname) == -1) {

           // attach a do-nothing event handler to ensure we can 'trigger' a click on this link
           $(this).click(function() { return true; }); 

           $(this).attr({
               target: "_blank",
               title: "Opens in a new window"
           });

           $(this).click(); // trigger it
      }
   })
});
于 2014-04-04T14:20:37.520 に答える
0

生のJSでのCollinの回答に基づいています。これは、Jqueryを必要としないため非常に優れています（OPの質問にもかかわらず）。ただし、現在のホスト名以外のドメインを除外できるように修正します。

    var all_links = document.querySelectorAll('a');
    var excludes = ['domain1.com','www.domain1.com','domain2.com'];
    for (var i = 0; i < all_links.length; i++){
        var a = all_links[i];
        var found = false; 
        for(j=0; j<excludes.length; j++) {
                if(a.href.includes(excludes[j])) {
                    found = true;
                    break;  
                }
        }    
        if (!found) {
            a.rel = 'noopener'; a.target = 'external';
        }
    }
于 2019-07-31T05:21:21.747 に答える
0

私は次のようにすると思います：

    $(document).ready(function() {
      $("a[href^=http]").each(function(){
         if(this.href.indexOf(location.hostname) == -1 && this.href.indexOf("store.domain.com") == -1 && this.href.indexOf("other.domain.rule") == -1) {
            $(this).attr({
               target: "_blank",
               title: "Opens in a new window"
           });
         }
       })
    });

ちょっと手動ですが、文字列と配列の分割に対処したくない場合は、これが解決策です。これが役立つと確信しています。

編集：これに加えて、リンククリックをトリガーするためにtechfoobarのソリューションを使用できます。それはあなたのウェブサイトのパフォーマンスに役立ちます.

于 2012-08-22T10:46:47.073 に答える