質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

6回答

4798閲覧

JSで特定のページに(一瞬たりとも)戻れなくする方法

cnx

総合スコア19

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2017/01/26 06:42

編集2017/01/31 13:12

JS(JavaScript)であるページへの「戻る」動作を抑制したいのですが、シンプルで簡潔に実装する方法はあるでしょうか。
対象ブラウザはAndroidのWebViewです(AndroidアプリにWebViewが埋め込まれておりJSをユーザーがOFFにしたり、Blank指定で新しいページを表示することは出来ません)。
また、WebViewのイベント経由で遷移URLをログとして収集しているため、innerHTMLなどをAjaxで取得した内容で置き換えるといったWebViewのloadedイベントなど発生しない方法は検討の対象外となります。

独自に調査したところではHTML5のhistory.stateなどを使ったものがあるようですが「あるページにおいて、おしなべてどのページにも戻れなくする方法」にしかならないようです。
また、現在は仕方なくwebstorageにフラグを立てて戻ってきたらフラグ判定して条件に合う場合にのみ強制的にhistory.forwardなどを掛けているのですが、一瞬戻っていることに変わりは無いため前出のWebViewイベントが反応してしまいログに複数の履歴が残り困っています(ログを残したくない)。

やりたいこと
ページAにおいて、
ページA → ページB(直前のページがB) は戻れても良いが
ページA → ページZ(長髯のページがZ。Zは特別戻らせたくないページ)のようにZにだけは戻れないようにする。

という動作です。
WebStorageなどでフラグを立てて判定する他ないのでしょうか。
それとも、完結に特定のページに対する戻り動作だけを寸前で抑止する方法はありますでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

要件は、「ページZ→ページAと遷移した状態で、ページZに戻れないようにする方法」ということで間違いないでしょうか(それ以外のパターンがあるなら補足をお願いします)。

このような場合、ページZの側で、ページAへのリンクを押した時に、

  • ブラウザによる遷移をキャンセル
  • ページAの内容をAjaxで取得して差し替え
  • history.replaceStateで履歴をページAに差し替え

とすれば、ページZは履歴にも残りませんので、戻ることもできなくなります。

投稿2017/01/26 07:03

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cnx

2017/01/26 15:21

ZからAに遷移する際に遷移をキャンセルしてしまうと、ページAへの遷移が出来なくなってしまう印象ですが如何でしょうか。 ajaxについては、クライアント(WebView)に履歴が残らない気がします。 前提に書かず申し訳ないのですが、クライアントで遷移ログを収集しているのでページAに遷移した履歴をイベント取得したい事情がございます。 history.replacestateについて、もう少し勉強してみます!
guest

0

なんともいえませんがブランクで開いけば戻れないですよね?
<a href="hoge.htm" target="_blank">hoge</a>
ただしこれは新しいタブで開くので元ページをうまく閉じないといけません。
セキュリティが許せばwindow.close()などで閉じられるかも

投稿2017/01/26 06:57

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cnx

2017/01/26 07:06

早速のアイデアありがとうございます。 WebViewではタブブラウザのように複数ページが開くことがなく、target="_blank"とするとページ自体が表示されないようです。 うまく動けば元ページを閉じる必要も無く解決策になりそうだったのですが、target="_blank"で現在開いているウィンドウにコンテンツを表示するには、Androidアプリ側の実装が必要になってしまうようです。 既に配布済みのアプリ(=WebView実装)でも動作する必要があるため本案は難しそうです。
guest

0

ブラウザのポリシーとして、ユーザの意思で戻りたいページに戻る事をさせない、ということは出来ないのではないでしょうか。
JSでどう制御しようとしても、JSをブラウザで切られていたら意味ありませんし。

ページAにおいて、
ページA → ページB は戻れても良いが
ページA → ページZ(Zは特別戻らせたくないページ)のようにZにだけは戻れないようにする。

ページ経路がB→Aなのか、Z→Aなのか、私の理解が悪いのか、よくイメージが掴めないので的はずれであればすみません。

前述したとおりJS制御には限界があります。
phpとかサーバ側で、ページZをユニークなURLにするのがいいのではないでしょうか。
正しい経路でページZを閲覧する場合のみトークンを発行し、そのトークンをサーバ側で受け取れた場合のみページを表示させるという仕組みを作るイメージです。
ページAからはトークンを発行させなければ当然見ることは出来ませんし、戻るボタンを使われてもそのURL自体がユニークであれば表示しません。

追記:php側でキャッシュを無効にする必要もあります。

投稿2017/01/26 07:11

編集2017/01/26 07:22
takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/26 07:17

これ面白いですね。
cnx

2017/01/26 13:27

アイデアありがとうございます。 ページAには、ページBからも、ページZからも遷移するリンクがある状況で、ページZから遷移してきた場合には戻るボタンなどの遷移を抑止したいという要件です。 残念ながら静的なhtmlに対応できる方法が必要となります。
takepieee

2017/01/27 01:10

ページ自体は静的HTMLで作ればよろしいかと思います。閲覧許可をどうするかという部分をphpで処理するだけの問題なので。 作成ポリシーとしてサーバスクリプト禁止という場合がたまにありますので、その場合は仕方ないですね。
cnx

2017/01/27 11:03

コンテンツはクライアント製造者とは異なるユーザーサイドが作るので、phpの場合もあれば静的なファイルそのものの場合もありまちまちです。 残念ながらphpなどプラットフォームを強要することができない環境です。 jsはWebViewはめ込み型のアプリなので切られる心配はありません。
guest

0

質問文を読み違えてしまい、的外れな回答をしてしまいました。
失礼しました。


とりあえず、1つの方法としてこんなものも良いのではないかと思います。
A.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>A</title> 6</head> 7<body> 8<a href="B.html" class="migr">Bへ移動</a> 9<a href="C.html" class="migr">Cへ移動</a> 10<script> 11 for (let i = 0; i < document.getElementsByClassName("migr").length; i++) { 12 document.getElementsByClassName("migr")[i].addEventListener('click', function (e) { 13 if (document.getElementsByClassName("migr")[i].getAttribute("href") === "C.html") { 14 return true; 15 } else { 16 alert("C.html以外へのアクセスは禁止しています。"); 17 e.preventDefault(); 18 } 19 }, false); 20 } 21</script> 22</body> 23</html>

B.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>B</title> 6</head> 7<body> 8B 9</body> 10</html>

C.html

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>C</title> 6</head> 7<body> 8C 9</body> 10</html>

投稿2017/01/26 07:05

編集2017/01/26 07:12
s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cnx

2017/01/26 13:28

アイデアありがとうございます。 リンク経由での判定が必要な場合もあるかと思いますので参考になります。
guest

0

自己解決

Androidアプリに貼り付けられた(全面に)WebViewという所を糸口にして解決出来ました。
この場合、通常のブラウザと違ってホームボタンや戻るボタン(◁)がOSから提供(表示)されていますが、進むボタンが存在しないため、Z→Aとページ遷移する際にZにてAへのリンクをタップするのですが、location.href="AのURL"とするのではなくて、history.go(-1)やhistory.go(-2)とすることで過去のZに戻すことにより、戻るボタンを押してもZに戻れないようになりました。
A→Z→Aのように、ページAからZを経由してページAに至った場合にZへ戻れないようにしたい。という事情があったため、この詳細な前提条件の説明をしていれば、他の方から同様の発想を指摘されていたかも知れません。

因みに、history.push(null,null,null)を使った方法は試験的に実装してみたのですが、複数回戻るボタンをタップされるといつか戻れてしまうため、100回pushするなど非現実的(時間も掛かるし完璧な方法ではない)と思われました。

皆さま、アイデア頂きありがとうございました。

投稿2017/02/11 12:45

cnx

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

WebStorageでフラグを立てて判定しておられるとのことですが、
・ページZからAに遷移する時にフラグを立てる
・ページAで、フラグ有の時のみ、History.jsを使って履歴を書き換えて戻れなくする
というのはいかがでしょうか。

投稿2017/01/31 09:23

CODEISLE

総合スコア251

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

cnx

2017/01/31 13:15

そうですね。Aから他ページに遷移する直前にフラグをクリアし、ZからAに遷移するときだけフラグを立てるなどすれば出来ると思うのですが、スマートな方法があればと思い投稿させて頂いた次第です。 ネット検索でも他の方の回答でも既に確立されている方法はないようですので、この方法しかないという気がしてきました……。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問