window.location = self.locationが機能しない場合にAJAXを介してページをリロードする
-
05-07-2019 - |
質問
ホームページで次のようにしました:
<ul id="login">
<li> <a id="loginswitch" href="./login-page">log-in</a> | </li>
<li> <a id="signupswitch" href="./signup-page">sign-up</a> </li>
</ul>
MooToolsを介して、これらのアンカー要素をidで取得します。クリックすると、ログインフォームまたはサインアップフォームを含む派手なdivがポップアップします(もちろん、イベントの伝播を停止するメソッドを使用) そして、フィールドがいっぱいになると、AJAX呼び出しが開始されます。これにより、セッションが作成され、ページがリロードされて、ユーザーが現在ログインし、ユーザーレベルのコントロールが表示されるなどの視覚効果が得られます。
ajax呼び出しはMooTools AJAXクラスによって開始され、 evalScripts
オプションはtrueに設定されます。 AJAXページはスクリプトコードを返します:
<script type="text/javascript">window.location = self.location;</script>
このシステムは完全に動作します-アンカーの href
の値を href =&quot;#&quot;
に変更すると、スクリプトが動作しなくなるのはなぜかと思いますもう
ウィンドウと関係がありますか?
リンクをクリックしたとき、またはイベントの伝播が停止したときでも、プロパティを変更しましたか?
解決
window.location = self.location;
このJavaScriptは実行中です。
実行すると、ブラウザはwindow.locationの値を新しい値に置き換えるように指示されます。 すべてのブラウザがここで同じように反応するわけではありません。おそらく期待どおりに動作するものもあれば、賢くなり、2つの値を比較するものもあります。 ブラウザは、それがどのページにあるかを知っており、同じページに移動するように要求していることを知っています。
ブラウザキャッシュ
ブラウザには、現在のページのコピーがキャッシュにあります。サーバーと通信し、キャッシュにあるページがまだ有効かどうかを尋ねることができます。キャッシュが有効な場合、ページのリロードを強制しないことを決定する場合があります。舞台裏では、これはHTTPヘッダーで発生します。ブラウザとサーバーは、さまざまな方法でHTTP経由で通信できます。この場合、ブラウザはサーバーに次のようなクイックリクエストを送信します。
GET /stackoverflow.com/posts/196643/index.html
HTTP/1.1
Host: www.stackoverflow.com
User-Agent: Mozilla/5.0
If-Modified-Since: Sun, 12 Oct 2008 20:41:31 GMT
これは、条件付きGETリクエストと呼ばれます。 If-Modified-Since と言うことで、ブラウザは「そのファイルをください。ただし、前回見たときから変更されている場合のみ」と言います。
長い話を短くすると、ブラウザにページをリロードするように明示的に指示していない。
方法は次のとおりです。
location.reload( true );
&quot; true&quot; リロードを強制するのためのオプションのパラメータです。ブラウザはキャッシュを見ることさえしません。あなたの言うとおりになります。
他のヒント
ページのアンカーに移動する-これは#
が意味するものであり、リロードを必要としません。
もし彼らが仕事でこの特定のタスクを私に手渡したなら、私はそれをデザインに戻したいと思います。セキュリティで保護されたページまたはOpenIDログインについて説明している場合を除き、ログインフォームまたはサインインフォームをポップアップ表示しないでください。ユーザーはページの上部でhttpsを探すことを学ぶ必要があります。表示されない場合はサインインしないでください。