2009-10-21 3 views
46

J'ai un problème pour appeler une fonction JavaScript dans un iframe à partir de la page parent. Voici mes deux pages:Appel de la fonction javascript dans iframe

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 devrait être considérée avec IE en interne et je ne pense pas que ce soit le problème)

Quand J'appuie sur le bouton Reset, j'ai "resultFrame found" et "resultFrame.Reset NOT found". Il semble avoir une référence à la trame mais ne peut pas appeler la fonction sur le cadre, pourquoi est-ce?

+1

duplicate de http://stackoverflow.com/questions/251420/invoking-javascript-in-iframe-from-parent-page –

+0

Possible duplication de [Invocation de code JavaScript dans un iframe de la page parent] (http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page) – luk3yx

Répondre

86

Utilisation:

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

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

document.getElementById("resultFrame") obtiendra le iframe dans votre code, et contentWindow obtiendra l'objet de la fenêtre dans le iframe. Une fois que vous avez la fenêtre enfant, vous pouvez vous référer à javascript dans ce contexte. Voir aussi HERE en particulier la réponse de bobince.

+3

Bonjour Jonathan, le .contentWindow fonctionne-t-il toujours? Je fais 'console.log (document.getElementById ('iframeID'). ContentWindow)' et dans Firebug il affiche correctement ma fonction 'test()' dans mon iframe, mais quand j'appelle la fonction, il dit que ce n'est pas une fonction , mais il est! Test en FF4. –

2

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

3

Appel

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

Lorsque vous accédez à resultFrame par document.all ce qu'il tire seulement comme un élément HTML, et non un cadre de fenêtre. Vous obtenez le même problème si vous avez un cadre déclencher un événement en utilisant une référence automatique "this".

Remplacer:

document.all.resultFrame.Reset(); 

Avec:

window.frames.resultFrame.Reset(); 

Ou:

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

Au lieu d'obtenir le cadre du document, essayez d'obtenir le cadre de l'objet de la fenêtre.

dans l'exemple ci-dessus changer 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 la iframe ne soit pas exposé à travers l'élément DOM pour l'iframe. Seuls les objets window contiennent les informations de portée javascript pour les images.

4

Pour robustesse encore plus:

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'); 

getIframeWindow(el).reset(); 
... 
2

La première et principale condition qui doit respecter est que le parent et iframe doivent appartenir à la même origine. Une fois cela fait l'enfant peut invoquer le parent en utilisant la méthode window.opener et le parent peut faire la même chose pour l'enfant comme mentionné ci-dessus

0

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