「jquery」タグアーカイブ

[JavaScript] ブラウザの戻るボタンを無効化する

2019年6月23日

ブラウザの戻るボタンを無効化する方法を調査したので、そのときのメモ。

クライアントサーバシステムだった社内システムをWEBシステムにリプレースする案件でこういった要件を見かける。顧客は、クラサバのときの使い心地をそのままにWEBシステムにしようとするので、こんな要件がでてしまう。

少し前まで完璧にはできなかったようだが、最近になってHTML5+jQueryの組みあわせでできるようになったみたい。

〇サンプルソースはこちら

https://jsfiddle.net/saimjcf/5atzrp26/

「RUN」を押下すると、JavaScriptがロードされるので、ブラウザの戻るボタンを押してみてください。無効になっていて、画面遷移が発生しないはず。

この中でブラウザの戻るボタンを無効化しているのは以下の部分です。

// 戻るボタンを制御
history.pushState(null, null, null);
$(window).on("popstate", function (event) {
    if (!event.originalEvent.state) {
        history.pushState(null, null, null);
        return;
    }
});

1

2

3

4

5

6

7

8

// 戻るボタンを制御

history.pushState(null, null, null);

$(window).on("popstate", function (event) {

if (!event.originalEvent.state) {

history.pushState(null, null, null);

return;

}

});

〇仕組みの話

まず、上記サンプルソースが画面上にロードされると、history.pushState(null, null, null)メソッドでブラウザの履歴の先頭に新しい履歴を一つ追加します。このとき第3引数がnullなので、追加された履歴は自分自身を指していることになります。

そして、戻るボタンが押下されたら”popstate”イベントが発生しますので、その”popstate”イベントが発生したときの処理として、再度history.pushState(null, null, null)を実行して、ブラウザの履歴の先頭に新しい履歴を一つ追加します。要は、ブラウザの履歴を操作しています。

hisotry APIの詳細はこちら
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history

※サンプルソースは、Firefox、Google Chrome、IEのみで動作確認しました。

Eclipse EGit でGitHubにSSH接続する

2018年7月5日

これまでSVN一筋の開発現場で働いてきたが、ついにGitを覚えなくてはならなくなってしまった（やっとかよ。。。）

GitHub EnterpriseとEclipseでJavaの開発をすることになったが、作業現場の都合上、HTTPS接続ができないため、SSH接続でcloneした。その時の手順メモ。

GitHubのアカウントはあらかじめ作成しておきましょう。
https://github.com/

Step1. EclipseにSSHの設定を行う

Eclipseのウィンドウメニュー > 設定を開きます。
一般 > ネットワーク接続 > SSH2を開く。

以下のような画面が表示されるので、「RSA鍵の生成」を押下します。表示された「ssh-ras・・・・」という文字列は公開鍵です。後で利用します。

「秘密鍵の保存」を押下します。以下のようなダイアログが表示されます。秘密鍵と公開鍵の保存先が表示されています。

次に「キー交換方法」のタブを表示して、下図赤枠のチェックを外して、保存します。（GitHub側がこのキー交換方法をサポートしなくなったらしい）

Step2. GitHubに公開鍵を登録する

Githubにログインします。（https://github.com/）

アイコンからSettingsを選択する。

Personal settings > SSH and GPG keysの画面で下図赤枠の「New SSH key」を選択する。

Keyのところに「ssh-ras・・」で始まる公開鍵の文字列を貼り付けて、「Add SSH key」を押下する。（Titleは特に何も入れなくてよい）

GitHubのパスワードを問われるので、入力します。

Step3. Eclipse EGitでリポジトリをcloneする

例として、jqueryのリポジトリをクローンします。こちらのURLにアクセスします。
https://github.com/jquery/jquery

緑色の「Clone or download」を押下すると、CloneするためのURLが表示されます。今回は、SSHで接続するので、「Use SSH」を選択します。

下図のようにSSH用のURLが表示されるので、コピーします。

Eclipseに戻って、パースペクティブをGitに切り替えます。

赤枠の「Gitリポジトリーのクローン」を選択します。

GitHubでコピーしたURLをURIの箇所に貼り付けます。すると、ホストとリポジトリー・パスは自動で反映されます。プロトコルは「ssh」。ユーザは「git」を入力します。パスワードを未入力のままでOKです。

ブランチの一覧が表示されるので、cloneしたいブランチにチェックを入れて、次へを押下。

完了を押下して、完了！！！

jqueryは結構大きいので、cloneするのも結構時間かかります。

終わると↓こんな感じ！

…((((*・o・)ノ Go Go♪.

日々のSE業務で得たノウハウと趣味