IE 9 e IE 10 non possono immettere testo in caselle di testo di input di volta in volta

C’è una pagina web con all’interno un iframe. A volte, i controlli della casella di testo Input, all’interno dell’iframe, sono bloccati / congelati. Gli utenti non possono inserire il testo in essi. Ma la casella di testo può essere focalizzata e non sbiadita. Non esiste un codice per disabilitare i controlli di input e questo non sempre accade. Fino ad ora, questo sta accadendo solo in IE 9 e IE 10. Firefox e Chrome è OK.

Una breve descrizione di come funziona la pagina è:

  • C’è un pulsante nella pagina principale. Cliccando su di esso si costruisce un iframe da zero e lo si mostra. Questo è fatto da Javascript.

  • Ancora una volta, c’è un pulsante sull’iframe per chiuderlo. Cliccandolo
    rimuoverà l’iframe dal DOM della pagina principale.

Per favore fatemi sapere se volete ulteriori informazioni come richiesto. Grazie in anticipo.

Questo bug è molto fastidioso, anche peggio c’erano pochissime informazioni che abbiamo trovato su google.

C’è solo un collegamento da Microsoft a proposito di IE9, ma il problema esiste ancora in IE10 / IE11 e molto più facile da riprodurre.

Ho appena creato un violino per descrivere questo problema

http://jsfiddle.net/WilliamLeung/T3JP9/1/

Perché è così difficile per M $ risolvere questo problema per anni?

ci dovrebbero essere tre soluzioni alternative

  1. Resetta lo stato attivo ogni volta che modifichiamo il DOM con iframe
  2. o pianifica un’attività “non fare nulla” che richiede tempo, il che può rendere magicamente la risposta di IE all’evento del mouse, non potrei dirti perché, forse M $ potrebbe

    I codici di esempio che impostano un’attività che richiede tempo

    setInterval(function () { var loopCount = 10000; var x = 0; for (var i = 0; i < loopCount; i++) { x = (x + Math.random() * 1000) >>> 0; } return x; }, 1000); 
  3. o ripristinare il contenuto DOM prima di rimuoverlo dal documento

     someDivWithIframe.innerHTML = ""; $(someDivWithIframe).remove(); 

    Non sono sicuro che se sia d’aiuto per tutti i casi, dovresti provare

Sono riuscito a correggere questo bug impostando il focus sulla pagina principale. Quello che ho fatto finora è: mettere una casella di testo di input HTML, che è impostata invisibile, nella pagina principale. Quando l’iframe si chiude, ritorna a quella casella di testo.

Si prega di fare riferimento ai seguenti collegamenti per ulteriori informazioni su questo bug di IE.

link1

link2

La soluzione con jQuery ha funzionato su IE11 per me, non sulle altre soluzioni.

$(theIframeElement).empty().remove();

Un’altra soluzione che funziona su IE9 / 10 è stata quella di impostare iframe src su empty prima di cancellarlo

iframe.src=""

Ma questo causa un’eccezione “Accesso negato” su IE11 se stai usando una versione precedente di jQuery <1.11.1

Alcuni link: Per informazioni, jQuery ha risolto anche questo problema per il suo plug-in Dialog.js che visualizzava contenuto in un iframe: http://bugs.jqueryui.com/ticket/9122

jQuery bug fix a IE11 “accesso negato” errore: http://bugs.jquery.com/ticket/14535

Nessuna delle soluzioni ha funzionato per me in IE 11.

Risolto aggiungendo questo codice all’interno di iframe:

$("input").first().focus().blur();

Ovviamente, questo non funzionerà se non hai il controllo sul tuo iframe.

Questo ha funzionato per me su IE11,

  • Causa del problema (a parte il fatto che IE sia stupido):
    • L’elemento di input focalizzato viene rimosso dal display all’interno di un iframe (proprietà di visualizzazione css)
  • Problema:
    • Non è ansible fare clic su un elemento di input del testo, tuttavia è ansible comunque selezionarlo
  • Soluzione:
    • Dobbiamo mettere a fuoco () un elemento visibile noto prima di togliere un campo di input dal display, quindi sulla riga prima di togliere il display da un campo di input abbiamo la riga: document.body.focus();

Originariamente ho scritto il plugin qui sotto per indirizzare le perdite di memoria in IE 8, ma di conseguenza risolve anche questo problema.

https://github.com/steelheaddigital/jquery.purgeFrame

Semplice soluzione con Javascript che funziona per me e non ho visto effetti collaterali in altri browser:

  

Ad ogni modo è abbastanza triste che MS non sia in grado di risolvere questo problema anche nella versione superiore.

Giusto per aggiungere quello che hanno detto gli altri, in realtà è un problema quando alcuni input in un iframe hanno lo stato attivo che viene poi chiuso, facendo perdere la messa a fuoco a tutti gli altri input. E infatti avere uno script per focalizzare l’attenzione su un elemento risolve il problema. Ma per me questo non funzionava perché alcuni dei miei input erano disabilitati. Quindi la soluzione che ha funzionato per me è sotto

 $("input[type=text]:not([disabled])").first().focus(); 

Snippet completo perché stavo usando il modal bootstrap e il modal aveva un iframe. Ho impostato lo stato attivo su un campo modificabile prima di aprire un modello e dopo la chiusura:

 var modalInstance = $uibModal.open({ // modal properties }); modalInstance.closed.then(function () { $("input[type=text]:not([disabled])").first().focus(); }); modalInstance.opened.then(function () { $("input[type=text]:not([disabled])").first().focus(); }); 

Soffrivo anche di questo problema. Come ha sottolineato William Leung, IE ha un bug con rimuovere Iframe Object dal DOM.

Prova quanto segue:

 $(someDivWithIframe).empty().remove(); 

Ho avuto lo stesso problema con IE11, angularjs e l’utilizzo di un IFrame. Il mio modello usa ng-switch per cambiare modalità di visualizzazione. Una delle modalità di visualizzazione contiene un IFrame. Nel momento in cui mi allontano dalla modalità di visualizzazione contenente l’IFrame:

 var iFrame = document.getElementById("myIFrame"); iFrame.focus(); this.mode = ViewModes.ModeWithoutIFrame; 

Risolto il problema per me.

Ecco la soluzione che ha funzionato per me, dopo aver provato tutti gli altri su questa pagina! Richiede jQuery ma sono sicuro che potrebbe essere riscritto in JavaScript nativo, se necessario.

Come con molte altre soluzioni, questo dovrebbe essere aggiunto al sorgente dell’iframe, assumendo che tu abbia accesso per modificarlo:

$("body").focusout( function () { window.focus(); });