web-dev-qa-db-fra.com

Appel de la fonction javascript dans iframe

Je n'arrive pas à appeler une fonction JavaScript dans une variable 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 IE en interne 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?

javascriptiframe
50
salle55

Utilisation:

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

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

document.getElementById("resultFrame") aura l'iframe dans votre code et contentWindow aura 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 en particulier la réponse de bobince.

95
Jonathan Fingland

Au lieu d'obtenir 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 javascript pour les cadres.

5
barkmadley

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();
  ...
}
...
5
Dominique Fortin

Appel

window.frames['resultFrame'].Reset();
4
Arsen Mkrtchyan

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

3
Alex H

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.

2
Ravi Bhagavatula

Lorsque vous accédez à resultFrame via document.all, il le extrait uniquement en tant qu'élément HTML, pas de cadre de fenêtre. Vous obtenez le même problème si vous avez un cadre déclenche un événement en utilisant une référence "this".

Remplacer:

document.all.resultFrame.Reset();

Avec:

window.frames.resultFrame.Reset();

Ou:

document.all.resultFrame.contentWindow.Reset();
1
Coding With Style

Si vous ne pouvez pas l'utiliser directement et si vous rencontrez l'erreur suivante: Blocage d'un cadre avec Origin " http: // www .. com" pour accéder à un cadre d'origine croisée ..__ postMessage () au lieu d'utiliser directement la fonction.

0
user9384187