iframe ne s'actualise pas en javascript

王林
Libérer: 2023-05-26 16:50:08
original
2391 Les gens l'ont consulté

Avec l'application généralisée de JavaScript, nous utilisons souvent des iframes (frames en ligne) dans les pages Web pour charger d'autres pages Web. Dans certains cas, nous pouvons avoir besoin de charger une nouvelle page Web dans une iframe, mais constater que la page ne s'actualise pas. Dans cet article, nous explorerons les causes de ce problème et proposerons quelques solutions.

1. Le principe de fonctionnement d'iframe

Avant de discuter formellement du problème, nous devons d'abord comprendre le principe de fonctionnement d'iframe. Une iframe intègre en fait une page Web dans une autre page Web, c'est-à-dire qu'il s'agit d'une sous-page d'une page Web. Une iframe est généralement définie par :

<iframe src="url"></iframe>
Copier après la connexion

où l'attribut src spécifie l'URL de la page Web à intégrer. Lorsque la page se charge, le navigateur charge l'URL spécifiée et la place dans une iframe. Nous pouvons contrôler la taille et la position de l'iframe via le code JavaScript, et pouvons également effectuer d'autres opérations dans l'iframe.

2. La raison pour laquelle l'iframe ne s'actualise pas

Revenons maintenant au sujet de cet article : Pourquoi la page ne s'actualise-t-elle pas après le chargement d'une nouvelle page Web dans l'iframe ? La raison en est que lorsque nous chargeons une nouvelle page Web dans l'iframe, nous remplaçons simplement l'URL dans l'iframe et n'actualisons pas la page Web. Cela signifie que si nous apportons des modifications à la nouvelle page Web, ces modifications n'apparaîtront pas dans l'iframe à moins que nous actualisions l'iframe manuellement.

3. Solutions

Maintenant que nous avons compris les raisons pour lesquelles l'iframe ne s'actualise pas, nous présenterons quelques solutions ci-dessous :

1 Utilisez JavaScript pour actualiser l'iframe

Nous pouvons utiliser du code JavaScript pour actualiser l'iframe. Le code est le suivant :

document.getElementById("myFrame").contentWindow.location.reload();
Copier après la connexion

myFrame voici l'ID de l'iframe. Ce code recharge l'URL dans l'iframe et force un rafraîchissement de la page.

2. Utilisez la balise méta pour actualiser l'iframe

Une autre méthode consiste à utiliser la balise méta pour actualiser automatiquement l'iframe. On peut ajouter la balise suivante à la page web à rafraîchir :

<meta http-equiv="refresh" content="1">
Copier après la connexion

Parmi elles, l'attribut content précise le temps de rafraîchissement de la page web, en secondes. Dans cet exemple, la page Web sera automatiquement actualisée toutes les secondes. Cette méthode facilite l'actualisation automatique des pages Web dans les iframes.

3. Utilisez l'attribut SRC de l'iframe

Nous pouvons également actualiser la page en modifiant directement l'attribut SRC de l'iframe. Le code est le suivant :

document.getElementById("myFrame").src = document.getElementById("myFrame").src;
Copier après la connexion

Ce code se réattribuera l'attribut SRC de l'iframe actuelle, actualisant ainsi l'intégralité de l'iframe.

4. Résumé

Dans cet article, nous avons exploré en profondeur les raisons pour lesquelles l'iframe ne s'actualise pas en JavaScript et avons proposé trois solutions. Quelle que soit l'approche que nous adoptons, nous pouvons facilement charger une nouvelle page Web dans une iframe et mettre à jour les modifications immédiatement. J'espère que cet article pourra vous aider à résoudre ce problème, et j'espère également que vous pourrez mieux utiliser JavaScript et les iframes dans vos futurs travaux.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal