質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

target_blankが効きません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 276

lily0630

score 19

前提・実現したいこと

リンク先を新しいウィンドウで開きたいのですが、開かない。
(target="_blank"が効かない。)

ここに質問の内容を詳しく書いてください。
html形式でコーディングをしています。

発生している問題・エラーメッセージ

target_blankが昨日しません。
jsで下記を入れているからかな‥?と思うのですが
知識がなく、ご経験のある方にお伺いしたいです。

該当のソースコード

リンクを貼ろうとしているHTMLは下記です。

<div class="flex-child">
  <figure class="snip1273">
    <img src="img/doukoku12.png" alt="sample86"/>
    <figcaption>
      <h3>◯◯◯◯◯◯◯◯</h3>
      <p>◯◯◯◯◯◯◯</p>
    </figcaption>
    <a href="link/bunsyou21.html" target="_blank"></a>
  </figure>
</div><!--div flex-child-->

ホバーエフェクト

   $(".hover").mouseleave(
     function () {
       $(this).removeClass("hover");
     }
   );

   $(window).on('load', function(){
     $('body').removeClass('fadeout');
   });

コード

モーダルウィンドウ↓

     // ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
     $('a:not([href^="#"]):not([target]):not([data-lity])').on('click', function(e){
       e.preventDefault(); // ナビゲートをキャンセル
       url = $(this).attr('href'); // 遷移先のURLを取得
       if (url !== '') {
         $('body').addClass('fadeout');  // bodyに class="fadeout"を挿入
         setTimeout(function(){
           window.location = url;  // 0.8秒後に取得したURLに遷移
         }, 800);
       }
       return false;ß
     });
   });

試したこと

jsで新しタブで開く指定をしても、ダメでした。。
入れたのは下記です。

function externalLinks(){
    if(!document.getElementsByTagName){
        return;
    }
    var _1=document.getElementsByTagName("a");
    for(var i=0;i<_1.length;i++){
        var _3=_1[i];
        if(_3.getAttribute("href")&&_3.getAttribute("rel")==="external"){
            _3.target="_blank";
        }
    }
}
window.onload=externalLinks;

みなさま御多用のところ申し訳ありませんが
どなたか、解決のヒントをくださると幸いです。
宜しくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2019/05/28 17:14

    <a href="..." target="_blank">のように書いているということですか?
    それとも JavaScript によって target 属性をつけているのでしょうか?

    キャンセル

  • lily0630

    2019/05/28 17:28

    tatsunosuke様の記載のコードについて、何もわからずコピペしていました‥。申し訳ありません。
    解決しました。ありがとうございます。ベストアンサーにさせていただきたいので、ご回答に何か入れていただけますと幸いです。

    キャンセル

  • Lhankor_Mhy

    2019/05/28 17:29

    モーダルウィンドウのコードはかっこの対応が合っていないようです。
    そちらを修正して、当方で試したところ、別タブで開きましたので、問題が再現しませんでした。

    環境の問題か、ご提示いただいていない部分のコードに問題があるかと思います。

    キャンセル

回答 2

checkベストアンサー

+1

e.preventDefault(); // ナビゲートをキャンセル

のあとに適切な処理が入っていないことが問題・・・で解決した・・・ようなので、
それを修正したコードを最終版として書いてもらえるのが一番かなと思いました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 18:37

    tetsunosuke様 ありがとうございます。私の希望としては、ある部分ではリンクでdate-lityのJSが作動すること、別の部分ではリンクを新しいウィンドウで開くこと、です。なので、JSでウィンドウを開きたいというのはどちらもでよいので、現状、e.preventDefault() を削除してもdate-lityが作動しているのでそちらを削除で対応しようかと思っています。分かりづらい書き方で申し訳ありません。。

    キャンセル

  • 2019/05/28 20:53

    not([data-lity]) というのはそのへんの意味があるのですね。

    さて、となると、 [target]が意図どおりに動いていないのでは?という気にもなってきました。

    「新しいウィンドウを開く箇所」ではtarget指定がされており、そこでは
    $('body').addClass('fadeout');
    の処理は動いてほしくないのでは?と思ったのです。

    現時点で解決しているようであれば良いですが、本当に思ったとおりには動いていないかも?
    と思ったまでです。

    やはりおかしいようであれば色々調べたりした上で再質問してみてください!

    キャンセル

  • 2019/05/29 10:44

    https://gist.githack.com/tetsunosuke/0eab7c293f18d3b3a443165d26f54720/raw/6b7f4601c760dcb8629f19bc62c0c1616e2fc7ea/gistfile1.html?cache=false#

    もしかしてこういうことだったのでは・・・と思ったのでチョット書いてみました。

    キャンセル

0

提示されたスクリプトが意図通りに動くかは実行タイミングによりますが、.on() で selector を指定することでタイミングを気にしないように書くこともできます。

     //$('a:not([href^="#"]):not([target]):not([data-lity])').on('click', function(e){
     $(document).on('click', 'a:not([href^="#"]):not([target]):not([data-lity])', function(e){


https://api.jquery.com/on/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 17:35

    こちらのコードも丁寧にありがとうございます。非常に参考になりました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る