リンクを押したら別タブ・別ウィンドウで表示する方法のご紹介。
まずは別タブでの表示方法から。
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」で非表示。
いらない要素は消しちゃった方が良いかもしれません。
コメント