Partage de la variable javascript globale d'une page avec une iframe dans cette page

Question

J'ai un scénario dans lequel j'ai une page, qui a <script> et quelques variables javascript globales à l'intérieur de celle-ci. J'ai également une iframe dans cette page et je veux avoir accès aux variables javascript globales de la page dans l'iframe.

Est-ce possible ? Si oui, comment puis-je le faire ?

Answer 1

Facilement en appelant parent.votre_var_name dans le script de votre iframe.

Une condition : les deux pages (principale et iframe) doivent être sur le même domaine.

page principale :

<script>
 var my_var = 'hello world!';
</script>

iframe

<script>
  function some_fn(){
    alert(parent.my_var); //helo world!
  }
</script>

Answer 2

Pas possible si l'iframe et le document principal ne sont pas dans le même domaine (en raison de la politique de sécurité inter-domaines).

Pour contourner cette limitation, vous pouvez utiliser la messagerie interdomaine.

Possible si Si l'iframe et le document principal sont dans le même domaine, vous pouvez accéder à leurs variables globales. Il y a des objets qui appartiennent à l'objet fenêtre de l'iframe ou de la page principale.

Voici le code pour accéder à la variable iframe myvar à partir du document principal (ou d'un iframe) dans un même domaine :

document.getElementById('iframeid').contentWindow['myvar'];

Answer 3

Excellentes réponses ci-dessus. J'ajouterai simplement qu'il faut se méfier de cette situation dans ES6 :

 <script>
 const my_var2 = 'hello world!';
 let   my_var3 = 'hello world!';
 </script>

Si vous utilisez ce qui précède dans la page principale, vous ne pouvez pas faire référence à ma_var2 ou ma_var3 dans les iframe(s). Vous devez utiliser 'var' pour y parvenir.

En effet, "const, let et class ne créent pas de propriétés sur l'objet global".

VOIR : Comment écrire un const global en javascript es6 ?