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></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 サイトの他の関連記事を参照してください。

この記事では、HTML5オーディオフォーマットとクロスブラウザー互換性について説明します。 MP3、WAV、OGG、AAC、およびWebMをカバーし、より広いアクセシビリティのために複数のソースとフォールバックを使用することを提案します。

SVGおよびCanvasは、Webグラフィックス用のHTML5要素です。ベクターベースであるSVGは、スケーラビリティとインタラクティブ性に優れていますが、ピクセルベースのキャンバスはゲームなどのパフォーマンス集約型アプリケーションに適しています。

HTML5は、特定のイベントと属性でドラッグアンドドロップを有効にし、カスタマイズを可能にしますが、古いバージョンやモバイルデバイスでブラウザの互換性の問題に直面します。

この記事では、HTMLの&lt; Meter&gt;の違いについて説明します。 and&lt; Progress&gt;タグ、それぞれスカラー値とタスクの進行状況を表示するために使用されます。

これは、レスポンシブデザインの例と戦略、スタイリングのベストプラクティス、テーブル構造内で使用されるセマンティックHTML5タグを含む、HTML5を使用して表形式に変換されたデータを示します:&lt;!doctype HTML&gt; &lt; html lang =&

この記事では、Webデザインの画像マップ、ナビゲーションの強化やエンゲージメントなどの利点、および作成のためのツールについて説明します。

この記事では、&lt; datalist&gt;の違いについて説明します。 and&lt; select&gt;タグ、機能、ユーザーの相互作用、さまざまなWeb開発シナリオの適合性に焦点を当てています。

この記事では、HTMLの&lt; figure&gt;の違いについて説明します。および&lt; img&gt;タグ、目的、使用、セマンティックの利点に焦点を当てています。主な議論は、&lt; figure&gt;より良い構造とアクセスを提供します


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

SublimeText3 中国語版
中国語版、とても使いやすい

EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

WebStorm Mac版
便利なJavaScript開発ツール

PhpStorm Mac バージョン
最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

ホットトピック









