iFrame の読み込みページが更新されるのはなぜですか?

Web 開発では、iFrame は非常によく使用されるタグで、他のページのコンテンツを埋め込んだり、JavaScript を通じて操作したりできます。ただし、多くの開発者は、iFrame を使用してページを読み込むときに、読み込み時にページが更新されるという問題に遭遇することがよくあります。この問題を解決するには多くの方法がありますが、この記事では、より一般的な解決策の 1 つを紹介します。

まず、iFrame の読み込みページが更新される理由を理解する必要があります。通常、iFrame を使用して新しいページを読み込むとき、ページに JavaScript コードが含まれている場合、ページの読み込み時にこれらのコードが実行され、これらのコードを実行するとページが再読み込みされる可能性があります。これは、これらのコードがページの DOM 構造を変更したり、サーバーにリクエストを送信したりして、ページが更新される可能性があるためです。

この問題を解決するには、2 つの方法を使用できます。 1 つは iFrame で JavaScript を使用する方法、もう 1 つは埋め込みページで JavaScript を使用する方法です。以下では、これら 2 つのメソッドの実装をそれぞれ紹介します。

1. iFrame での JavaScript の使用

iFrame で JavaScript を使用するには、onload イベントを iFrame に追加し、onload イベントでロードする必要があるページを実行する必要があります。たとえば、次のコード:

<iframe src="loading.html" onload="loadPage()"></iframe>
<script>
function loadPage() {
  document.getElementById('iframe').contentWindow.location.reload(true);
}
</script>

上記のコードでは、onload イベントを iFrame に追加し、イベント内でloadPage() 関数を実行しました。この関数は、iFrame の contentWindow プロパティを通じて現在の iFrame 内のウィンドウ オブジェクトを取得し、location.reload() メソッドを通じてページを読み込みます。 location.reload() メソッドを呼び出すときに true パラメータが渡されるため、ページが強制的に更新され、ページが繰り返し読み込まれることがなくなります。

2. 埋め込みページで JavaScript を使用する

埋め込みページで JavaScript を使用するには、親ページの window オブジェクトを使用して iFrame を操作する必要があります。たとえば、次のコード:

<script>
function loadPage() {
  var iframe = window.parent.document.getElementById('iframe');
  iframe.contentWindow.location.replace('loading.html');
}
</script>

上記のコードでは、window.parent を通じて親ページの window オブジェクトを取得し、このオブジェクト内の iFrame の DOM オブジェクトを取得します。次に、 location.replace() メソッドを使用して新しいページを読み込みます。このメソッドは、ページを再読み込みできるという点で location.reload() メソッドに似ていますが、ブラウザ履歴に記録は残りません。

概要:

上記は、iFrame の読み込みページ更新の問題を解決する 2 つの方法であり、実際の状況に応じていずれかを選択できます。どの方法を使用する場合でも、鍵となるのはコードの記述であり、繰り返しロードを避けるために JavaScript の特性を合理的に利用する必要があります。

以上がiFrame の読み込みページが更新されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。