javascript - 要素 - js ページの更新

jQueryでページを更新するにはどうすればよいですか? (15)

JavaScriptを使用してページを更新するには、さまざまな方法があります。

location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
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>

jQueryでページを更新するにはどうすればよいですか？

jQuery Load関数は、ページのリフレッシュも実行できます。

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

jQueryでページをリロードするには、次のようにします。

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

ここで私が使ったアプローチはAjax jQueryでした。私はChrome 13でそれをテストしました。次に、リロードをトリガーするハンドラにコードを挿入しました。 URLは"" です。これはこのページを意味します 。

jQueryを使用していて、更新したい場合は、javascript関数でjQueryを追加してみてください：

私はh3クリックしたときにページからiframeを隠そうとしていましたが、それは機能していましたが、手動でブラウザをリフレッシュしない限りiframeを表示するためのアイテムをクリックできませんでした。。

私は以下を試みた：

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

プレーンなJaneのjavascriptとjQueryを混在させると効果があります。

// 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);

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

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

window.location.reload()はサーバーからリロードし、すべてのデータ、スクリプト、イメージなどを再度読み込みます。

したがって、HTMLをリフレッシュするだけの場合、 window.location = document.URLは、より迅速かつ少ないトラフィックで返されます。しかし、URLにハッシュ（＃）がある場合、ページをリロードしません。

jQueryを使用してページをリロードするために使用できるいくつかのコード行があります。

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

コードにjQueryを使用したいだけで、コードの速度やパフォーマンスに気にしない場合に使用します。

あなたのニーズに合った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>

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

 location = location;

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

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

jQueryは、HTMLのクライアントサイドスクリプトを簡素化するために設計されたクロスプラットフォームのJavaScriptライブラリです。
^{〜 Wikipedia 〜}

したがって、 jqueryの基礎、つまりjqueryはjavascript基づいていることがわかります。純粋なjavascriptことは、単純なことになると良い方法です。

しかし、 jqueryソリューションが必要な場合は、こちらをご覧ください。

$(location).attr('href', '');

これはJavaScriptで最短です。

location = '';

以下は、jQueryを使用して非同期的にページをリロードするソリューションです。 window.location = window.locationによって引き起こされるちらつきを回避します。この例では、ダッシュボードのように、連続してリロードされるページを示しています。戦闘テスト済みでタイムズスクエアの情報ディスプレイTVで動いています。

<!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>

ノート：

$.get('',function(data){$(document.body).html(data)})ような$.ajax直接使用すると、 cache: trueを使用していてもcss / jsファイルがキャッシュ破棄され cache: true 。そのため、 parseHTMLを使用していparseHTML
parseHTMLはbodyタグを見つけられないので、 body全体が余分なdivに入る必要があります。このナゲットの知識があなたをいつか助けてくれることを願っています。
http-equiv="refresh"使用するとjavascript / server hiccupに何か問題が生じた場合に備えて、電話をかけなくてもページが再読み込みされます
このアプローチはおそらく何らかの形でメモリをリークし、 http-equiv refreshはそれを修正します

問題は、

JavaScriptページを更新する方法

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

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

現在のページがPOST要求によって読み込まれた場合は、

window.location = window.location.pathname;

の代わりに

window.location.reload();

なぜなら、 window.location.reload()は、POSTリクエストによってロードされたページで呼び出された場合、確認のプロンプトを表示するからです。

異なるキャッシュ関連の振る舞いを持つ3つのアプローチ：

location.reload(true)

location.reload() forcedReloadパラメータを実装しているブラウザでは、ページとそのすべてのリソース（スクリプト、スタイルシート、イメージなど）の新しいコピーを取得してリロードします。キャッシュからのリソースを一切提供しません。要求に変更後のヘッダーまたはif-none-matchヘッダーを送信せずに、サーバーから新しいコピーを取得します。
それが可能なブラウザでは、ユーザーが「ハードリロード」を行うのと同じです。
Firefox（ location.reload()参照）とInternet Explorer（ MSDN参照）では、 trueをlocation.reload()渡すtrueはサポートされていますが、普遍的にはサポートされておらず、W3 HTML 5仕様、 W3ドラフトHTML 5.1仕様、 WHATWG HTMLリビングスタンダード。
Google Chromeのようなサポートされていないブラウザでは、 location.reload(true)はlocation.reload()と同じように動作します。
location.reload()またはlocation.reload(false)
ページをリロードして、HTMLページ自体を新しくキャッシュしていないコピーを取得し、新鮮であってもブラウザがキャッシュしたあらゆるリソース（スクリプトなど）に対してRFC 7234の再検証要求を実行すると、再確認なしに
location.reload()呼び出しを実行するときに、ブラウザがキャッシュをどのように利用するかは、私が知る限りは指定されていません。私は上記の動作を実験で決めました。
これは、ブラウザの「更新」ボタンを押すだけの簡単な操作です。
location = location （またはlocationやプロパティに割り当てることを含む無数の他の可能な手法）
ページのURLにfragid / hashbangが含まれていない場合にのみ機能します。
キャッシュからfreshリソースを再取得または再検証せずにページをリロードします。ページのHTML自体が新鮮な場合は、HTTPリクエストを一切実行せずにページをリロードします。
これは、キャッシングの観点からは、新しいタブでページを開くユーザーと同等です。
ただし、ページのURLにハッシュが含まれている場合は、この効果はありません。
繰り返しますが、ここでのキャッシングの動作は、私が知る限りは不明です。私はテストによってそれを決めました。

つまり、要約すると、次のものを使用します。

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

質問は一般的なので、解答の可能な解を集計してみましょう：

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

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

location.reload();

reload（）関数自体がパラメータとしてブール値を提供しているということです（詳細はlocation.reload() ）。

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

つまり、2つの方法があります。

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

location.reload(true);

解決策2： キャッシュまたはサーバーからリロードする（ブラウザと設定に基づいて）

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

イベントを聴いてjQueryと組み合わせたい場合は、 ".click"や他のイベントラッパーの代わりに ".on（）"メソッドを使うことをお勧めします。

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

javascript - 要素 - js ページの更新

jQueryでページを更新するにはどうすればよいですか? (15)

`location.reload(true)`

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

`location = location` （または`location`やプロパティに割り当てることを含む無数の他の可能な手法）

javascript - 要素 - js ページ の 更新

jQueryでページを更新するにはどうすればよいですか? (15)

location.reload(true)

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

location = location （またはlocationやプロパティに割り当てることを含む無数の他の可能な手法）

javascript - 要素 - js ページの更新

`location.reload(true)`

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

`location = location` （または`location`やプロパティに割り当てることを含む無数の他の可能な手法）