HTMLでリンク先を別タブ・別ウィンドウで表示する方法

HTMLでリンク先を別タブ・別ウィンドウで表示する方法
この記事は約2分で読めます。
広告
リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。

まずは別タブでの表示方法から。
aタグに「target=”_blank”」を書くことで別タブで表示可能です。

別タブでリンクを開く方法

<a href="https://hajimete.org" target="_blank">初めてのブログ</a>

DEMO

初めてのブログ

別ウィンドウでリンクを開く方法

最近、あまり見なくなってきた別ウィンドウで開く方法。

別ウィンドウはiPhoneXSと同じウィンドウサイズにしてみました!

jQuery

// 別ウィンドウの指定
$(".demo2").on("click", function() {
  window.open(this.href, 'hajimete', 'width=375, height=812, scrollbars=yes, resizable=yes, menubar=no, toolbar=no, location=no, directories=no, status=no');
	return false;
});

DEMO

ひつつずつ解説します。

「window.open()」は、別ウィンドウで表示する意味。
「this.href」は、クリックしたaタグの「href」を取得。ここに直接URLを書いても別ウィンドウで表示できる。
「’hajimete’」は、好きな名前を書いてください。新しく開くウィンドウ名になります。
「’width=375, height=812’」は、新しく開くウィンドウの幅と高さを決めます。
「’scrollbars=yes, resizable=yes, menubar=no, toolbar=no, location=no, directories=no, status=no’」は、特に何が変わるのかわからず。
昔は、これの指定でウィンドウサイズを固定出来たり、「overflow:hidden」しなくてもスクロールさせなく出来たり、メニューバー?ツールバー?う~ん。。。

今は使わない技術だと思います。
「〇〇〇=yes」または「〇〇〇=1」で表示、「〇〇〇=no」または「〇〇〇=0」で非表示。
いらない要素は消しちゃった方が良いかもしれません。

コメント

タイトルとURLをコピーしました