web-dev-qa-db-ja.com

JQueryを使ってページを更新する方法

JQueryを使ってページを更新する方法

javascriptjqueryrefreshreload
2244
luca

location.reload() ：を使用してください。

$('#something').click(function() {
    location.reload();
});

reload()関数は、キャッシュではなくサーバーから強制的に再ロードするためにtrueに設定できるオプションのパラメータを取ります。パラメータはデフォルトでfalseに設定されているので、デフォルトではページはブラウザのキャッシュから再ロードされます。

3519
Roy

これはjQueryがなくてもすべてのブラウザで動作するはずです。

location.reload();
429
Thorben

がある 複数 JavaScriptでページを更新する無制限の方法：

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)

  6. location.reload(false) 

    Webサーバーから再度文書を取得する必要がある場合（文書の内容が動的に変わる場所など）、引数をtrueとして渡します。

あなたはリストが創造的であり続けることができます：

  • window.location = window.location
  • window.self.window.self.window.window.location = window.location
  • ...その他534の方法

var methods = [
  "location.reload()",
  "history.go(0)",
  "location.href = location.href",
  "location.href = location.pathname",
  "location.replace(location.pathname)",
  "location.reload(false)"
];

var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
  (function(cMethod) {
    $body.append($("<button>", {
      text: cMethod
    }).on("click", function() {
      eval(cMethod); // don't blame me for using eval
    }));
  })(methods[i]);
}
button {
  background: #2ecc71;
  border: 0;
  color: white;
  font-weight: bold;
  font-family: "Monaco", monospace;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.5s ease;
  margin: 2px;
}
button:hover {
  background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

390
Ionică Bizău

たくさんの方法がうまくいくでしょう、私は思います：

  • window.location.reload();
  • history.go(0);
  • window.location.href=window.location.href;
188
David

JQueryを使ってページをリロードするには、次のようにします。

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

ここで私が使用したアプローチはAjax jQueryでした。私はそれを Chrome 13でテストしました。それから私はリロードを引き起こすであろうハンドラにコードを入れました。 _ url _ は""です。つまり、このページを意味します。

117
Peter

現在のページがPOSTリクエストによってロードされた場合は、次のようにします。

window.location = window.location.pathname;

の代わりに

window.location.reload();

なぜならwindow.location.reload()はPOSTリクエストによってロードされたページで呼ばれた場合、確認を促すからです。

100
SumairIrshad

質問は

JavaScriptでページを更新する方法

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

あなたは選択のために甘やかされています。

59
JohnP

あなたが使いたいかもしれません

location.reload(forceGet)

forceGetはブール値でオプションです。

デフォルトはfalseで、キャッシュからページをリロードします。

ブラウザがサーバーからページを取得してキャッシュも削除するようにする場合は、このパラメータをtrueに設定します。

あるいは単に

location.reload()

あなたが早くて簡単なキャッシングを望むならば。

51
Pinch

キャッシュ関連の動作が異なる3つのアプローチ：

  • location.reload(true)

    location.reload()のforcedReloadname__パラメーターを実装するブラウザーでは、ページとそのすべてのリソース（スクリプト、スタイルシート、画像など）の新しいコピーを取得することで再読み込みします。キャッシュから any リソースを提供しません-リクエストでif-modified-sinceまたはif-none-matchヘッダーを送信せずにサーバーから新しいコピーを取得します。

    ユーザーがブラウザで「ハードリロード」を行うのと同じことです。

    truename__をlocation.reload()に渡すことは、Firefox（ MDN を参照）およびInternet Explorer（ MSDN を参照）でサポートされていますが、普遍的にサポートされておらず、 W3 HTML 5仕様 、または W3ドラフトHTML 5.1仕様 、または WHATWG HTML Living Standard .

    Google Chromeなどのサポートされていないブラウザーでは、location.reload(true)はlocation.reload()と同じように動作します。

  • location.reload()またはlocation.reload(false)

    ページをリロードし、ページのHTML自体の新しいキャッシュされていないコピーを取得し、ブラウザがキャッシュしたリソース（スクリプトなど）に対して RFC 7234 再検証リクエストを実行します、freshである場合でも、RFC 7234はブラウザが再検証なしでそれらを提供することを許可します。

    location.reload()呼び出しを実行するときにブラウザーがキャッシュをどのように使用するかは、私が知る限り、指定も文書化もされていません。上記の動作は実験により決定しました。

    これは、ユーザーがブラウザの「更新」ボタンを押すだけと同じです。

  • location = location（または、locationname__またはそのプロパティへの割り当てを伴う無限に多くの可能なテクニック）

    ページのURLにfragid/hashbangが含まれていない場合にのみ機能します！

    any fresh リソースをキャッシュから再取得または再検証せずにページをリロードします。ページのHTML自体が新しい場合、HTTPリクエストをまったく実行せずにページをリロードします。

    これは（キャッシュの観点から）ユーザーが新しいタブでページを開くのと同じです。

    ただし、ページのURLにハッシュが含まれている場合、これは効果がありません。

    繰り返しになりますが、ここでのキャッシュの動作は、私が知る限り指定されていません。私はテストによってそれを決定しました。

だから、要約すると、あなたは使用したい：

  • キャッシュを最大限に使用するためのlocation = location。 /ページのURLにハッシュがない限り、この場合は機能しません
  • 再検証を行わずにすべてのリソースの新しいコピーを取得するlocation.reload(true)（普遍的にサポートされておらず、Chromeなどの一部のブラウザーではlocation.reload()と同じように動作しますが）
  • location.reload()は、「更新」ボタンをクリックしたユーザーの効果を忠実に再現します。
35
Mark Amery

window.location.reload()はサーバーからリロードし、あなたのすべてのデータ、スクリプト、画像などを再びロードします。

そのため、HTMLを更新したいだけであれば、window.location = document.URLははるかに早く、少ないトラフィックで返されます。ただし、URLにハッシュ（＃）が含まれていると、ページはリロードされません。

23
user762330

JQueryのLoad関数もページの更新を実行できます。

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});
15
Suleman Mirza

これはjQueryを使って非同期的にページをリロードするソリューションです。 window.location = window.locationによるちらつきを防ぎます。この例は、ダッシュボードのように、継続的にリロードされるページを示しています。これは、バトルテスト済みで、タイムズスクエアの情報ディスプレイテレビで実行されています。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <meta http-equiv="refresh" content="300">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
    <script>
    function refresh() {
      $.ajax({
        url: "",
        dataType: "text",
        success: function(html) {
          $('#fu').replaceWith($.parseHTML(html));
          setTimeout(refresh,2000);
        }
      });
    }
    refresh();
    </script>
  </head>
  <body>
    <div id="fu">
      ...
    </div>
  </body>
</html>

ノート：

13
William Entriken

一般的な質問なので、答えに対する可能な解決策をまとめてみましょう。

単純な単純なJavaScriptソリューション ：

最も簡単な方法は、適切な方法で配置された1行のソリューションです。

location.reload();

多くの人がここで見逃しているのは、reload（）関数自体がパラメータとしてブール値を提供することです（詳細： https://developer.mozilla.org/en-US/docs）。/Web/API/Location/reload ）.

Location.reload（）メソッドは現在の URLからリソースをリロードします。そのオプションのuniqueパラメータはブール値です。これが trueの場合、ページは常にサーバーから再ロードされます。それが falseであるか指定されていない場合、ブラウザはそのキャッシュからページをリロードするかもしれません。

これは2つの方法があることを意味します。

解決策1： 現在のページをサーバーから強制的に再ロードする 

location.reload(true);

解決策2： キャッシュまたはサーバーからの再読み込み（ブラウザと設定に基づく） 

location.reload(false);
location.reload();

もしそれをjQueryと組み合わせてイベントを聴きたいのなら、 "。click"や他のイベントラッパーの代わりに ".on（）"メソッドを使うことをお勧めします。より適切な解決策は次のようになります。

$('#reloadIt').on('eventXyZ', function() {
    location.reload(true);
});
12
Fer To

私は見つけた

window.location.href = "";

または

window.location.href = null;

また、ページを更新します。

これにより、ハッシュを削除してページをリロードすることが非常に簡単になります。 iOSシミュレータでAngularJSを使用している場合、これは非常に便利なので、アプリを再実行する必要はありません。

11
Mujah Maskey

JavaScript location.reload()メソッドを使用することができますこのメソッドはブール値のパラメータを受け取ります。 trueまたはfalse。パラメータがtrueの場合ページは常にサーバーからリロードされます。 falseの場合これはデフォルトであるか、または空のパラメータブラウザでキャッシュからページをリロードします。

trueパラメータを使う

<button type="button" onclick="location.reload(true);">Reload page</button>

default/falseパラメータを使う

 <button type="button" onclick="location.reload();">Reload page</button>

Jqueryを使う

<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
    $('#Reloadpage').click(function() {
        location.reload();
    }); 
</script>
5
Poorna Senani Gamage

jQueryから を必要としない、 pure JavaScript を使用してページをリロードするには、次のようにlocationプロパティでreload関数を使用します。

window.location.reload();

デフォルトでは、これはブラウザキャッシュを使ってページをリロードします（もしあれば）...

ページを強制的にリロードしたい場合は、以下のようにリロードメソッドに true 値を渡してください。

window.location.reload(true);

また、すでに window scope にいる場合は、windowを取り除いて次のようにします。

location.reload();
5
Alireza

ここの答えはすべていいです。質問はjqueryでページをリロードすることを指定しているので、私はちょうど将来の読者のためにもっと何かを追加することを考えました。

jQueryはクロスプラットフォームです JavaScriptライブラリ HTMLのクライアントサイドスクリプティングを単純化するように設計されています。

〜 ウィキペディア 〜

したがって、 jquery 、または jquery の基礎は javascript に基づいていることがわかります。単純なものになると、純粋な javascript を使用する方がはるかに優れています。

しかし、 jquery の解決策が必要な場合は、これが1つです。

$(location).attr('href', '');
2
Roshana Pitigala

JQueryを使用していてリフレッシュしたい場合は、javascript関数にjQueryを追加してみてください。

h3をクリックしたときにページからiframeを隠したいのですが、うまくいきましたが、手動でブラウザを更新しない限りiframeを表示するための項目をクリックすることができませんでした。 。

私は以下を試しました：

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

あなたのjQueryに普通のJane javascriptを混ぜるのはうまくいくはずです。

// code where hide (where location.reload was used)function was integrated, below    
    iFrameInsert = () => {
        var file = `Fe1FVoW0Nt4`;
        $("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
        $("h3").enter code hereclick(hide);
}

// View Player 
$("#id-to-be-clicked").click(iFrameInsert);
2
J. Moreno

シンプルなJavaScriptソリューション： 

 location = location; 


<button onClick="location = location;">Reload</button>

1
hev1

Buttonタグ内でonclick="return location.reload();"を使用してください。

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>
1
Frank

つかいます 

location.reload();

または

window.location.reload();
1
H.Ostwal

ページ{using jQueryをリロードするために使用できるコード行をいくつか示します。

これはjQueryラッパーを使用し、ネイティブのdom要素を抽出します。 

コードにjQuery feelingが欲しいだけで、コードのスピード/パフォーマンスを気にしないのであればこれを使用してください。

あなたのニーズに合った1から10を選ぶか、これより前のパターンと答えに基づいてさらに追加してください。

<script>
  $(location)[0].reload(); //1
  $(location).get(0).reload(); //2
  $(window)[0].location.reload(); //3
  $(window).get(0).location.reload(); //4
  $(window)[0].$(location)[0].reload(); //5
  $(window).get(0).$(location)[0].reload(); //6
  $(window)[0].$(location).get(0).reload(); //7
  $(window).get(0).$(location).get(0).reload(); //8
  $(location)[0].href = ''; //9
  $(location).get(0).href = ''; //10
  //... and many other more just follow the pattern.
</script>
0
David Angulo

JavaScriptでは最短です。

location = '';
0
Na Nonthasen

これは私のために働く：

document.location.reload();
0
GameMaster