Pourquoi la page de chargement d'iFrame s'actualise-t-elle ?

Dans le développement Web, iFrame est une balise très couramment utilisée. Elle peut intégrer le contenu d'autres pages et fonctionner via JavaScript. Cependant, de nombreux développeurs rencontrent souvent un problème lorsqu'ils utilisent iFrame pour charger des pages : la page s'actualise lors du chargement. Il existe de nombreuses façons de résoudre ce problème, et cet article présentera l'une des solutions les plus courantes.

Tout d'abord, nous devons comprendre pourquoi la page de chargement d'iFrame s'actualise. Normalement, lorsque nous utilisons iFrame pour charger une nouvelle page, si la page contient du code JavaScript, ces codes seront exécutés lors du chargement de la page, et l'exécution de ces codes peut entraîner le rechargement de la page. En effet, ces codes peuvent modifier la structure DOM de la page ou envoyer des requêtes au serveur, etc. Ces opérations peuvent provoquer un rafraîchissement de la page.

Pour résoudre ce problème, nous pouvons utiliser deux méthodes. L'une consiste à utiliser JavaScript dans un iFrame et l'autre consiste à utiliser JavaScript dans la page intégrée. Ci-dessous, nous présenterons respectivement la mise en œuvre de ces deux méthodes.

1. Utilisation de JavaScript dans iFrame

Pour utiliser JavaScript dans iFrame, nous devons ajouter l'événement onload à l'iFrame et exécuter la page qui doit être chargée dans l'événement onload. Par exemple, le code suivant :

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

Dans le code ci-dessus, nous avons ajouté l'événement onload à l'iFrame et exécuté la fonction loadPage() dans l'événement. Cette fonction obtiendra l'objet window dans l'iFrame actuel via la propriété contentWindow de l'iFrame, puis chargera la page via la méthode location.reload(). Étant donné que le paramètre true est transmis lors de l'appel de la méthode location.reload(), cela signifie que la page est forcée d'être actualisée, donc la page ne sera pas chargée à plusieurs reprises.

2. Utiliser JavaScript dans les pages intégrées

Pour utiliser JavaScript dans les pages intégrées, nous devons utiliser l'objet window de la page parent pour faire fonctionner l'iFrame. Par exemple, le code suivant :

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

Dans le code ci-dessus, nous obtenons l'objet window de la page parent via window.parent, et obtenons l'objet DOM de l'iFrame dans cet objet. Ensuite, nous utilisons la méthode location.replace() pour charger la nouvelle page. Cette méthode est similaire à la méthode location.reload() dans le sens où elle peut recharger la page, mais elle ne laissera pas d'enregistrement dans l'historique du navigateur.

Résumé :

Voici deux méthodes ci-dessus pour résoudre le problème de l'actualisation de la page de chargement d'iFrame. Vous pouvez choisir l'une d'entre elles à mettre en œuvre en fonction de votre situation réelle. Quelle que soit la méthode utilisée, la clé réside dans l’écriture du code, qui doit faire un usage raisonnable des caractéristiques de JavaScript pour éviter des chargements répétés.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!