Discussion :

[Sylvain255]

Bonjour,
je voudrais connaître le code à insérer dans une iframe pour rafraîchir sa page parente SVP
merci
bien cordialement

[licardentaistor]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

parent.location.reload();

[Sylvain255]

ok merci

et en jQuery comment rafraîchir toutes les iframes d'une certaine classe SVP ?

[SpaceFrog]

Essaye un truc du genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.classdeliframe').each( function(){ $(this).contentDocument.location.reload();})

[Sylvain255]

non ça ne fonctionne pas mais je sais pourquoi, en fait je t'explique le problème car c'est moi qui l'ai mal posé : depuis une iframe je souhaite rafraîchir toutes les autres iframes de la page qui ont la classe "obs", c'est donc depuis une iframe et non depuis la page que je souhaite rafraîchir les iframes

[SpaceFrog]

Du coup il faut tentrer de passer par parent ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

window.parent.$('.classdeliframe').each( function(){ $(this).contentDocument.location.reload();})

[Sylvain255]

non on ne peut pas faire de mélange de pur JS et de jQuery j'ai l'erreur suivante :

Uncaught TypeError: window.parent.$ is not a function

[Sylvain255]

ah si pardon c'est juste que l'iframe appelante, les iframes à rafraîchir ainsi que la page principale doivent avoir jQuery
j'ai maintenant l'erreur suivante :

Uncaught TypeError: $(...).contentDocument is undefined

[Sylvain255]

la dernière erreur était sur firefox sur chrome j'ai :

add_observation.php:8 Uncaught TypeError: Cannot read properties of undefined (reading 'location')

at HTMLIFrameElement.<anonymous> (add_observation.php:8:65)
at Function.each (jquery-1.4.4.min.js:33:46)
at init.each (jquery-1.4.4.min.js:26:388)
at add_observation.php:8:26

[NoSmoking]

Bonjour,

les iframes à rafraîchir ainsi que la page principale doivent avoir jQuery

je n'en vois pas l'intérêt à priori c'est la logique de communication entre ces différents éléments qui est importante à savoir :

• Dans la page parent, on place la fonction devant être appelée par les <iframe> contenues, par exemple :

...on trouve les codes suivant dans la page parentIframe.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
iframe {
  display: block;
  margin: .5em 0;
  border: 2px solid #CCC;
}
iframe.clicked {
  border: 2px solid #F00;
}
</style>
<script>
function fctIframeParent() {
  const elementsIframe = document.querySelectorAll("iframe");
  elementsIframe.forEach((iframe) => {
    iframe.classList.toggle("clicked");
  });
};
</script>

...cette fonction ne fait qu'ajouter/retirer la class clicked à toutes les <iframe> contenues dans la page.

Elle peut être appelée directement dans celle-ci via un fctIframeParent().

• Pour que cette fonction soit appelée par les iframe enfants, il faut que celles-ci disposent d'une fonction appelant la fonction fctIframeParent de la page parentIframe.html.

Exemple de page contenu dans une <iframe> :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<button onclick="toggleBorder()">toggleBorder()</button>
<script>
function toggleBorder () {
  // récup. parent de l'iframe
  const parentIframe = window.parent.frames;
  // si existe et si fonction existe
  if (parentIframe && parentIframe.fctIframeParent) {
    // exécution de la fonction parent
    parentIframe.fctIframeParent();
  }
}
</script>

Maintenant si tu cliques sur le bouton contenu dans l'<iframe> toutes les <iframe> de la page parentIframe.html auront leurs bordures modifiées.

Cette fonction sera à mettre dans toutes les pages insérées via les <iframe> pour pouvoir accéder à la fonction fctIframeParent de la page parentIframe.html

[Sylvain255]

super ! j'ai adapté le code à mon besoin et ça marche ! merci