Appel de la fonction javascript dans iframe

StackOverflow https://stackoverflow.com/questions/1600488

  •  05-07-2019
  •  | 
  •  

Question

Je n'arrive pas à appeler une fonction JavaScript dans un iframe à partir de la page parente. Voici mes deux pages:

mainPage.html 

<html>
<head>
    <title>MainPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            if (document.all.resultFrame)
                alert("resultFrame found");
            else
                alert("resultFrame NOT found");

            if (typeof (document.all.resultFrame.Reset) == "function")
                document.all.resultFrame.Reset();
            else
                alert("resultFrame.Reset NOT found");
        }
    </script>
</head>
<body>
    MainPage<br>
    <input type="button" onclick="Reset()" value="Reset"><br><br>
    <iframe height="100" id="resultFrame" src="resultFrame.html"></iframe>
</body>
</html>

resultFrame.html 

<html>
<head>
    <title>ResultPage</title>
    <script type="text/javascript">
        function Reset() 
        {
            alert("reset (in resultframe)");
        }
    </script>
</head>
<body>
    ResultPage
</body>
</html>

(Je sais que document.all n'est pas recommandé, mais cette page ne doit être affichée qu'avec Internet Explorer et je ne pense pas que ce soit le problème.

Lorsque j'appuie sur le bouton de réinitialisation, j'obtiens "resultFrame found". et "resultFrame.Reset NOT Found". Il semble y avoir une référence au cadre mais ne peut pas appeler la fonction sur le cadre, pourquoi est-ce?

Était-ce utile?

La solution

Utiliser: 

document.getElementById("resultFrame").contentWindow.Reset();

pour accéder à la fonction de réinitialisation dans l'iframe

document.getElementById ("resultFrame") récupérera l'iframe dans votre code et contentWindow obtiendra l'objet window dans l'iframe. Une fois que vous avez la fenêtre enfant, vous pouvez faire référence à javascript dans ce contexte.

Voir aussi ICI notamment la réponse de bobince.

Autres conseils

Au lieu de récupérer le cadre du document, essayez de le récupérer à partir de l'objet window.

dans l'exemple ci-dessus, changez ceci: 

if (typeof (document.all.resultFrame.Reset) == "function")
    document.all.resultFrame.Reset();
else
    alert("resultFrame.Reset NOT found");

à 

if (typeof (window.frames[0].Reset) == "function")
    window.frames[0].Reset();
else
    alert("resultFrame.Reset NOT found");

le problème est que la portée du javascript dans l'iframe n'est pas exposée via l'élément DOM pour l'iframe. seuls les objets window contiennent les informations de portée javascript pour les cadres.

Pour encore plus de robustesse: 

function getIframeWindow(iframe_object) {
  var doc;

  if (iframe_object.contentWindow) {
    return iframe_object.contentWindow;
  }

  if (iframe_object.window) {
    return iframe_object.window;
  } 

  if (!doc && iframe_object.contentDocument) {
    doc = iframe_object.contentDocument;
  } 

  if (!doc && iframe_object.document) {
    doc = iframe_object.document;
  }

  if (doc && doc.defaultView) {
   return doc.defaultView;
  }

  if (doc && doc.parentWindow) {
    return doc.parentWindow;
  }

  return undefined;
}

et 

...
var el = document.getElementById('targetFrame');

var frame_win = getIframeWindow(el);

if (frame_win) {
  frame_win.reset();
  ...
}
...

Appeler 

window.frames['resultFrame'].Reset();

objectframe.contentWindow.Reset () vous devez d'abord faire référence à l'élément de niveau supérieur dans le cadre.

La première et principale condition à remplir est que le parent et l'iframe appartiennent à la même origine. Une fois que cela est fait, l’enfant peut invoquer le parent à l’aide de la méthode window.opener et le parent peut faire de même pour l’enfant, comme indiqué ci-dessus

Lorsque vous accédez à resultFrame par le biais de document.all, il le extrait uniquement sous forme d'élément HTML, pas de cadre de fenêtre. Vous rencontrez le même problème si vous faites déclencher un événement par un frame en utilisant un " this " auto-référence.

Remplacer: 

document.all.resultFrame.Reset();

Avec: 

window.frames.resultFrame.Reset();

Ou: 

document.all.resultFrame.contentWindow.Reset();

Si vous ne pouvez pas l'utiliser directement et si vous rencontrez cette erreur: Bloqué un cadre d'origine d'accéder à un cadre d'origine croisée. Vous pouvez utiliser postMessage () au lieu d'utiliser fonctionner directement.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top