[JavaScript] ウェブアプリ（スタンドアロンモード）のリンクが別タブで開かれないようにしたい
- スマホやタブレットでウェブサイトを、アプリとしてスタンドアロンモードで使用するとき、ブラウザによってaタグのリンクが別タブで開いてしまう場合があります
- Javascript、jQueryで制御することで、このようなケースの対策が可能です
サンプルコード
Javascript
window.addEventListener('load', function() {
const anchors = document.getElementsByTagName('a');
for(let i = 0; i < anchors.length; i++) {
const anchor = anchors[i];
const url = anchor.getAttribute('href');
anchor.removeAttribute('href');
anchor.addEventListener('click', function(event) {
window.location.href = url;
}, false);
}
}, false);
- ページ内のaタグをすべて参照し、href属性の内容を保持したうえで削除します
- その後、aタグをクリックしたときのイベント処理として、保持したhref属性のリンク先にジャンプするようにしています
jQuery
const anchors = $('a');
anchors.each(function() {
const url = $(this).attr('href');
$(this).removeAttr('href');
$(this).click(function() {
window.location.href = url;
});
});
- jQueryならもう少し短いコードで対応可能です
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。