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

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」で非表示。
いらない要素は消しちゃった方が良いかもしれません。

SNSフォローボタン
エンデ・バタローをフォローする
HTMLサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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