Ho un'applicazione html che utilizza l'evento onfocus. Funziona perfettamente quando si cambiano le schede del browser.Come accedere all'evento onfocus da iframe (cross-origin)?

Ora, quando carico quell'app come iframe in un'altra pagina html, non funziona perché iframe non è attivo quando si passa da una scheda all'altra. Come accedere all'evento onfocus da iframesenza modifica del codice di livello superiore.

Il numero iframe e la pagina che carica gli iframe non provengono dalla stessa origine.

if (!window.parent.frames.length) { 
    window.onfocus = function() { 
     // do smth 
    }; 
} else { 
    // ??? 
}

fonte

2015-12-01 J. Kovacevic

Si prega di inviare un codice minimo per mostrare come è impostato. – LGSon

Vedo che l'iframe e il documento principale hanno origini diverse. Sei tu a controllare il contenuto in entrambi i documenti/origini? – pseudosavant

Bene, questo è il codice minimo. Stavo facendo alcune animazioni basate su eventi (socket). Dovrebbero essere animazioni in tempo reale, quindi avevo bisogno di una coda. Quando si cambiano le schede, la coda dovrebbe essere pulita e funzionava se l'app non era un 'iframe'. Ma quando è un 'iframe', non posso pulire la coda perché l'evento 'onfocus' non si attiva. @Amber de Black la risposta potrebbe essere la soluzione per me. –

È possibile utilizzare l'API di visibilità HTML5. Ti consente di rilevare quando l'utente esce e torna alla scheda.

Al momento in cui sto scrivendo questo post - questa funzionalità supportata dal 90% dei Browser: Codice http://caniuse.com/#feat=pagevisibility

di esempio per la pagina di iframe:

document.addEventListener('visibilitychange', function(){ 
    var time = new Date(); 

    if (document.hidden) { 
      console.log(time + ' the user has left tab'); 
    } else { 
      console.log(time + ' the user has returned to the tab'); 
    } 
})

fonte

2015-12-15 15:53:34 Ujeenator

Se controlli sia il genitore che il Se i contenuti delle pagine iframe sono disponibili, è possibile utilizzare postMessage per passare l'evento onfocus del genitore nell'iframe.

Ecco un esempio:

contenuti:

<!doctype html> 
<html> 
    <head> 
    <script> 
     // Function to call when receiving a `postMessage` 
     function listener(event){ 
      if (event.data === 'focus-event') { 
       document.querySelector("body").innerHTML += '<h2>Parent is in focus</h2>'; 
      } 
     }; 

     // `postMessage` event listener 
     window.addEventListener('message', listener, false); 
    </script> 
    </head> 
    <body> 
     <h1>Child</h1> 
    </body> 
</html>;

contenuto principale:

window.addEventListener('focus', function(event){ 
    iframe.postMessage('focus-event', '*'); 
}, false);

Questo farà in modo che ogni volta che la finestra padre riceve un evento focus lo farà pubblica quel messaggio sull'iframe.

Questo è un JSBin example.

fonte

2015-12-16 17:53:35 pseudosavant

Sì, questa è anche una soluzione. Sto usando 'postMessage' per inviare alcuni eventi da' iframe' (la mia app) al frame principale e quella parte è opzionale, fornisce solo alcuni dati extra al frame principale. Ho usato la soluzione @amber, perché l'app verrà implementata come plug-in e talvolta non sarò in grado di passare l'evento 'onfocus' del genitore all'iframe. –

Come accedere all'evento onfocus da iframe (cross-origin)?

risposta

contenuti:

contenuto principale:

Problemi correlati