「特定のページからの遷移を全て指定したページにしたい！！」
ということで本日はJavaScriptのonbeforeunloadと location.hrefを使用していきます。
onbeforeunloadとは
ページがアンロードされる直前に発生するイベントです。
情報入力画面で戻るボタンなど押した際によく見るあのダイアログですね。
それではサンプルコードを見ていきましょう。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> window.onbeforeunload = function(){ return "a"; } </script> </head> <body> <button type="button" onclick="location.href='https://www.google.co.jp/'">グーグルに遷移させるためのボタン</button> </body> </html>
上記コードはボタンを押下し画面遷移する際（ページがアンロードする際）、onbeforeunloadイベントが起動し上記のようなダイアログがポップアップします。
下記からがやりたい事です！
ここからは「onbeforeunload + location.href = “URL”;」 について書いていきます。
location.href とは
=以下の指定したURLへ遷移する際に使用するイベントです。
今回やりたいこととしては
「ページ遷移する前にキャッチし、任意のURLへ飛ばすこと」です。
onbeforeunloadは遷移する前にダイアログを出すイベント
location.hrefは指定URLに遷移させるイベント
この2つを組み合わせた下記サンプルコードを見てください。
<!DOCTYPE html> <html> <head> <script type="text/javascript"> window.onbeforeunload = function(){ location.href = "https://www.yahoo.co.jp/"; } </script> </head> <body> <button type="button" onclick="location.href='https://www.google.co.jp/'">グーグルに遷移させるためのボタン</button> </body> </html>
上記のコードはonbeforeunloadでページ遷移を検知後、
location.hrefで指定したhttps://www.yahoo.co.jp/へ遷移するコードの予定でした…
しかし
何故使用出来ないか調べてみるとブラウザの仕様上、多くの規制があり出来ないみたいです。（参考にしたサイト: https://teratail.com/questions/228725）
「ページロードする際に毎回指定したウェブページに遷移させる」のは確かに悪用されそうです。
例えばこの記事を見終えて、他のページに遷移しようとページリンクを押下した際、またこの記事に飛ばされるということが出来てしまいます。
上記問題を解決する為、下記にて模索中です。
クライアント側のJavaScriptのポストバックをサーバー側で受け取り、PageLoadでResponse.Redirectで無理やりhttps://www.yahoo.co.jp/を呼び出す方法です。
成功したら下記にこの記事に追加していこうと思います。
12/17 追記
上記方法無理でした。
理由はJavaScriptのポストバックをサーバー側で受け取りが出来ませんでした。(正確に言うとsubmitからポストバックに処理を渡せなかった為)
下記ソース処理が出来ず無駄になったコードをご確認下さい。
※最後まで処理が出来ていないので参考にしないでください！
////window.onload = function () {
////alert("a");
////}
//window.onbeforeunload = function(e) {
// //IEだとメッセージは表示される0
// //e.location.href = "https://www.google.co.jp/";
// e.returnValue = "このページを離れてもよろしいですか？";
//}
$(function () {
$('a').click(function () {
return false;
})
});
window.onbeforeunload = function (e) {
submit();
e.returnValue = "このページを離れてもよろしいですか？";
submit();
}
function Button1_Click() {
window.forms[0].submit();
return false;
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="JavaScript.js"></script> </head> <body> <form id="form1" runat="server"> <div> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="Button1_Click(); return false;" /> <asp:Button ID="Button2" runat="server" Text="Button" /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.yahoo.co.jp">HyperLink</asp:HyperLink> </div> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace WebApplication1 { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { Response.Redirect("https://google.com"); } } protected void Button1_Click(object sender, EventArgs e) { } } }
ボタンを押下するとJavaScrip側のonbeforeunloadで処理を受け取り、submit()でaspx.csのif(IsPostBack)で受け取り、リダイレクトでhttps://www.yahoo.co.jp/が表示出来ております。
しかしリンクを押下するとJavaScrip側のonbeforeunloadには引っかかるモノのsubmit()でif (IsPostBack)で受けれず、リンクにあらかじめ設定しているURLのhttps://www.google.co.jp/が呼び出されています。
結局onbefereloadを使用してもクライアント側(JaveScript側)で解決出来ない事が分かりました。ちゃんちゃん。
コメント