2010-04-28 5 views
13

ho una pagina che contiene un iframe che viene caricato utilizzando Javascript:problema JavaScript con iframe che è nascosto prima caricato

index.html

<iframe id="myFrame" width="800" height="600" style="display: none;"></iframe> 
<div id="loader"><!-- some loading indicator --></div> 

<script type="text/javascript"> 
function someFunction() { 
    var myFrame = document.getElementById('myFrame'); 
    var loader = document.getElementById('loader'); 

    loader.style.display = 'block'; 

    myFrame.src = 'myFrame.html'; 
    myFrame.onload = function() { 
    myFrame.style.display = 'block'; 
    loader.style.display = 'none'; 
    }; 
} 
</script> 

La pagina che viene caricata nel iframe contiene qualche logica Javascript che calcola le dimensioni di alcuni elementi ai fini dell'aggiunta di una barra di scorrimento basata su JS (jScrollPane + jQuery Dimensions).

myFrame.html

<div id="scrollingElement" style="overflow: auto;"> 
    <div id="several"></div> 
    <div id="child"></div> 
    <div id="elements"></div> 
</div> 

<script type="text/javascript"> 
$(document).load(function() { 
    $('#scrollingElement').jScrollPane(); 
}); 
</script> 

Questo funziona in Chrome (e probabilmente altri browser Webkit), ma non riesce a Firefox e IE perché al momento jScrollPane viene chiamato, tutti gli elementi sono ancora invisble e jQuery Le dimensioni non sono in grado di determinare le dimensioni di un elemento.

C'è un modo per assicurarsi che il mio iframe è visibile prima$(document).ready(...) viene chiamato? Altro che utilizzare setTimeout per ritardare jScrollPane, che è qualcosa che voglio assolutamente evitare.

+0

perché non utilizzare il javascript dalla pagina direttamente? –

+1

@ChibuezeOpata questo era più di 5 anni fa, quindi non posso davvero ricordare, ma so che c'era una buona ragione per questo :-) – Aistina

risposta

11

Alcuni browser presumono che quando "display: none" viene applicato agli elementi sostituiti (come Flash o iframe) le informazioni visive per quell'elemento non sono più necessarie. Quindi, se l'elemento viene successivamente visualizzato dal CSS, il browser ricrea effettivamente il modulo di dati visivi zero.

Immagino che avere l'impostazione predefinita di iframe su "display: none;" fa in modo che il browser salti il ​​rendering dell'HTML in modo che i tag non abbiano alcuna dimensione. Impostare la visibilità su "nascosto" o posizionarlo fuori dalla pagina anziché utilizzare "display: none;".

Buona fortuna.

5

invece di fare l'iframe invisibile utilizzando display:none, si potrebbe tentare di ...

... impostare visibility:hidden

... impostare position:absolute; top:-600px;

... impostare opacity:0

o qualcos'altro che rende jQuery "vedere" gli oggetti ma non l'utente (e reimposta gli attributi css usati nella tua funzione myFrame.onload).

+0

Inoltre, z-index: -1 – Dan

-2

Gli iframe nascosti rappresentano un enorme problema di sicurezza. Probabilmente è meglio cercare di trovare un altro modo per ottenere ciò che si desidera, se è legittimo, perché speriamo che i futuri browser elimineranno del tutto questa funzionalità. http://blog.opendns.com/2012/07/10/opendns-security-team-blackhole-exploit/

+0

Assolutamente non utile, prima di tutto, come potrebbe "non usare iframe" impedisce ai cattivi di sfruttare comunque i difetti di sicurezza degli iframe (?!?). E chiedergli di aspettare che l'utopia degli sviluppatori del web venga, dove tutti i browser supportano solo le "cose ​​reali" non sta aiutando neanche. Display –

0

visibility:collapse; display:hidden; height:0px;

Lavoreranno per sbarazzarsi di spazi bianchi troppo .. L'iframe sarà anche caricare ..

+0

: nascosto? Conosco la "visibilità: nascosta", non vedo la visualizzazione: nascosta nella documentazione: http://www.w3schools.com/cssref/pr_class_display.asp –