2009-10-21 25 views
46

Ho problemi a chiamare una funzione JavaScript in un iframe dalla pagina padre. Ecco i miei due pagine:Chiamata funzione javascript in 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> 

(so che document.all non è raccomandato, ma questa pagina devono essere utilizzate solo con IE internamente e non penso che sia il problema)

Quando Premendo il tasto Reset, ricevo "resultFrame found" e "resultFrame.Reset NON trovato". Sembra avere un riferimento al frame ma non può chiamare la funzione sul frame, perché è così?

+1

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

+0

Possibile duplicato di [Invocazione di codice JavaScript in un iframe dalla pagina padre] (http://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page) – luk3yx

risposta

86

Usa:

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

per entrare nella funzione di reset nel iframe

document.getElementById("resultFrame") otterrà l'iframe nel codice, e contentWindow otterrà l'oggetto finestra nel iframe. Una volta aperta la finestra secondaria, puoi fare riferimento a javascript in quel contesto.

Vedere anche HERE in particolare la risposta di bobince.

+3

Ciao Jonathan, il .contentWindow funziona ancora? Io faccio 'console.log (document.getElementById ('iframeID'). ContentWindow)' e in Firebug mostra correttamente la mia funzione 'test()' nel mio iframe, ma quando vado a chiamare la funzione dice che non è una funzione , ma è! Provalo in FF4. –

2

objectframe.contentWindow.Reset() è necessario prima fare riferimento all'elemento di livello superiore nel frame.

3

chiamata

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

Quando si accede attraverso resultFrame document.all si tira solo come un elemento HTML, non un serramento. Hai lo stesso problema se hai un frame che attiva un evento usando una "questa" auto-referenza.

Sostituire:

document.all.resultFrame.Reset(); 

Con:

window.frames.resultFrame.Reset(); 

Oppure:

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

Invece di ottenere il telaio dal documento, provare a ottenere la cornice dall'oggetto finestra.

nell'esempio sopra cambiare questo:

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

a

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

il problema è che la portata del JavaScript all'interno dell'iframe non è esposta attraverso l'elemento DOM per l'iframe. solo gli oggetti finestra contengono le informazioni di ambito javascript per i frame.

4

Per una maggiore robustezza:

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; 
} 

e

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

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

La prima e più importante condizione che deve essere soddisfatta è che sia il genitore e iframe dovrebbero appartenere alla stessa origine. Una volta fatto, il bambino può invocare il genitore usando il metodo window.opener e il genitore può fare lo stesso per il bambino come menzionato sopra

0

Se non è possibile utilizzarlo direttamente e se si verifica questo errore: Blocco di un frame con origine "http://www ..com" dall'accesso a una cornice di origine incrociata. È possibile utilizzare postMessage() anziché utilizzare direttamente la funzione.