一度のクリックで二つのページ変更をするJavaScriptの使い方

この記事では、便利なJavaScriptのテクニックを教えます。

一度のクリックで、新しいタブで別のページを開きつつ、元のページも別のものに切り替える方法です。

動作の説明

動作を確認したら下記Clicl!!をクリックしてください。

Click!!

コピペOKコード

JavaScript

function changePage() {
    window.open('example.com/1.html', '_blank');  // 新しいブラウザで元URLを開く
    window.location.href = 'example.com/2.html';  // 現在のページを別URLに切り替える
}

HTML

<a href="#" onclick="changePage()">Click!!</a>

このコードでは、<a>タグのonclick属性にJavaScript関数changePageを設定してある。ユーザーがリンクをクリックすると、この関数が実行され、新しいタブで’example.com/1.html’を開き、現在のページを’example.com/2.html’に切り替える。

コード使用の注意点

ブラウザのポップアップブロック設定

window.open関数は新しいタブやウィンドウでページを開くが、ユーザーのブラウザ設定によってはポップアップブロックが有効になっている場合がある。その場合、新しいタブやウィンドウが開かないことがある。この問題を回避するには、ユーザーにポップアップブロックを無効にするよう指示するか、window.openの使用を避ける別の方法を探す必要がある。

リダイレクトによるSEOへの影響

window.location.hrefを使ってページをリダイレクトすると、検索エンジンのクローラーが元のページの内容をインデックス化できなくなる可能性がある。これはSEO（検索エンジン最適化）に影響を与え、元のページの検索エンジンランキングを下げる可能性がある。

JavaScriptの有効/無効

ユーザーが何らかの理由でJavaScriptを無効にしている場合、このコードは機能しない。JavaScriptが無効な場合でも最低限の機能が利用できるように、ウェブサイトの設計には注意が必要。

クロスブラウザの互換性

異なるブラウザやブラウザのバージョンでは、JavaScriptの動作が異なる場合がある。ですので、主要なブラウザでの動作をテストし、問題がないことを確認することが重要。

ぜひこのコードを活用してください。と、言いたいところだけど、この方法は、UXが悪くユーザーに嫌われるので、基本使わない方がいいです。

UXに悪影響

予測困難

ユーザーがリンクをクリックしたときに何が起こるかを予測するのが難しくなる。一般的には、リンクをクリックするとそのリンクの目的地に移動するというのが一般的な予想になる。しかし、この設計では、現在のページも別のものに切り替わるため、ユーザーは混乱する可能性が高い。

コントロールの喪失

ユーザーが一つのアクション（クリック）で二つの結果（二つのページ遷移）を引き起こすと、ユーザーがコントロールを失った感覚を抱くことがある。ユーザーは自分のアクションがどのような結果を引き起こすのかを理解し、それによってコントロールを感じることが重要。

戻りづらさ

ユーザーが戻りたいと思ったときに、戻るのが難しくなる可能性が高い。新しいタブを開いたときに元のページが変わってしまうと、ユーザーはブラウザの「戻る」ボタンを使って元のページに戻ることができない。

この手法を使ってるのは、アダルトサイトでしか見たことありません。