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.
perché non utilizzare il javascript dalla pagina direttamente? –
@ChibuezeOpata questo era più di 5 anni fa, quindi non posso davvero ricordare, ma so che c'era una buona ragione per questo :-) – Aistina