JAVSCRIPTが実現するWEBページのジャンプとページ間の転送方法

9155 ワード

WEBページでは、私たちがページジャンプを実現する方法は、通常はLINK、BUTON LINK、IMG LINKなどを使って、ユーザーがどこかをクリックして、直接ブラウザでジャンプしてくれます.
しかし、あるイベントがトリガされた時に、まずいくつかの操作をしてからジャンプする必要があります.この時はJAVSCRIPTを使ってこのジャンプ機能を実現します. 具体的なやり方は以下の通りです. 一:新しいページにジャンプし、新しいウィンドウで開く場合:

 
  
 function gogogo()  
  
 {  
  
 //do someghing here...  
  
 window.open("test2.html");  
  
 }

windowはjavascriptの対象で、そのオプンの方法を使ってもいいです.注意したいのは、このページが相対的なパスでない場合、http:/を追加します.

 
  
 function gogogo()  
  
 {  
  
 window.open( "http://www.google.com");  
  
 }

二:このページのウィンドウでジャンプします.

 
  
 function totest2()  
  
 {  
  
 window.location.assign( "test2.html");  
  
 }

location.assinを直接使ってもいいですが、window.location.assignはもっと合理的なようです.現在のウィンドウのlocationオブジェクトのassign()方法.
また、locationオブジェクトにはもう一つの方法があります.ページをジャンプしてもいいです.これはassignとの違いです.
replace()メソッドは、Historyオブジェクトに新しいレコードを生成しません.この方法を使用すると、新しいURLがHistoryオブジェクト中の現在のレコードをカバーします.
次はどのようにしてページをジャンプする時に値の伝達を行いますか?Windows.open()を使って新しいページを開くと、ブラウザはこの二つのウィンドウの間に開けと開けられた関係があると考えています.だから開けられた新しいウィンドウの中に現在のウィンドウのwindowオブジェクトの中にwindow.opener属性があります.したがって、この値が得られ、さらに前のページのオブジェクトの値を参照すると、次のようになります.

 
  
 <html>  
  
 <head>  
  
 <title>test1</title>  
  
 <script type="text/javascript">  
  
 function totest2()  
  
 {  
  
 window.open("test2.html");  
  
 }  
  
 </script>  
  
 </head>  
  
 <body>  
  
 <label id="label1" >page test1</label>  
  
 <br><br>  
  
 <input type="text" id="tx1">  
  
 <input type="button" id="bt2" value="to test2" onclick="totest2()">  
  
 </body>  
  
 </html>

 
  
 <html>  
  
 <head>  
  
 <title>test2</title>  
  
 <script type="text/javascript">  
  
 function getvalue()  
  
 {  
  
 var pare=window.opener;  
  
 if(pare!=null)  
  
 {  
  
 var what=pare.document.getElementById("tx1");  
  
 if(what!=null)  
  
 {  
  
 alert(what.value);  
  
 }  
  
 }  
  
 }  
  
 </script>  
  
 </head>  
  
 <body>  
  
 <label id="label1" >page test2</label>  
  
 <br><br>  
  
 <input type="button" onclick="getvalue()" value="get test1 page value">  
  
 </body>  
  
 </html>

この二つのページは、次のページから前のページの値を得ることができますが、実用的ではないような気がします....
利点:便利な値を取ることができます.window.openerが父の窓口を指す限り、すべてのオブジェクトにアクセスできます.
値にアクセスできるだけでなく、親ウィンドウにアクセスする方法もあります.
短所:二つの窓口は関係があります.window.openを利用して開けたウィンドウです.ドメインを越えてはいけません.
もう一つの方法を見てみます.URL付加フィールドを使ってページジャンプ間の値を転送します.前にXMLHttpRequestを使った場合、このような方式が使われたことがあります.単純オリジナルの例は以下の通りです.

 
  
 <html>  
  
 <head>  
  
 <title>test3</title>  
  
 <script type="text/javascript">  
  
 function totest2()  
  
 {  
  
 var parm1=document.getElementById("tx1").value;  
  
 var parm2=document.getElementById("tx2").value;  
  
 var myurl="test4.html"+"?"+"parm1="+parm1+"&parm2="+parm2;  
  
 window.location.assign(myurl);  
  
 }  
  
 </script>  
  
 </head>  
  
 <body>  
  
 <label id="label1" >page test3</label>  
  
 <br><br>  
  
 <input type="text" id="tx1">  
  
 <input type="text" id="tx2">  
  
 <input type="button" id="bt2" value="to test2" onclick="totest2()">  
  
 </body>  
  
 </html>

 
  
 <html>  
  
 <head>  
  
 <title>test1</title>  
  
 <script type="text/javascript">  
  
 function getparm1()  
  
 {  
  
 var url=location.href;  
  
 var tmp1=url.split("?")[1];  
  
 var tmp2=tmp1.split("&")[0];  
  
 var tmp3=tmp2.split("=")[1];  
  
 var parm1=tmp3;  
  
 alert(parm1);  
  
 }  
  
 function getparm2()  
  
 {  
  
 var url=location.href;  
  
 var tmp1=url.split("?")[1];  
  
 var tmp2=tmp1.split("&")[1];  
  
 var tmp3=tmp2.split("=")[1];  
  
 var parm2=tmp3;  
  
 alert(parm2);  
  
 }  
  
 </script>  
  
 </head>  
  
 <body>  
  
 <label id="label1" >page test4</label>  
  
 <br><br>  
  
 <input type="button" id="bt1" value="get parm1" onclick="getparm1()">  
  
 <br><br>  
  
 <input type="button" id="bt2" value="get parm1" onclick="getparm2()">  
  
 </body>  
  
 </html>

前にXMLHttpRequestを見ていたとき、QueryStringオブジェクトがURLのパラメータから直接値を取ることができました.ここは直接使えますか?試してみたらだめみたいです.
最後のページ間の転送値の方法はCOOKIE共有です.これは分かりやすいです.一つのページでクライアントマシンにCOOKIEファイルを置いて、次のページにアクセスする時、直接にこの中の値を読み込めばいいです.

Djangoユーザー登録アクセス制限@login_required