Printable View
Buongiorno a tutti, è da un po' che sto cercando in rete una soluzione al mio problema ma senza risultati.
È possibile tramite js fare in modo che un iframe con designmode = on adatti la sua altezza in base al testo che gli viene inserito. Per dirla più semplice, che faccia crescere l'altezza ad ogni nuova riga di testo?
Qui trovate il codice del mio iframe: http://jsfiddle.net/mark116/cXrEK/2/
Un iframe contiene un'altra pagina web, ma la sua dimensione è determinata dalla pagina contenitore. L'unico modo di far funzionare le cose è l'utilizzo di Javascript da entrambe le parti.
Ok, in questo caso l'altra pagine dov'è? Sapresti aiutarmi con il codice?Citazione:
Originalmente inviato da saitfainder
Ma sei sicuro che sia necessario l'iframe? A che ti serve?
Si sono sicuro, ho realizzando un WYSWYG e l'alternativa, un div con contenteditable, non si prestavaCitazione:
Originalmente inviato da karl94
Puoi darmi altre informazioni?Citazione:
Originalmente inviato da saitfainder
Beh, se i documenti caricati da ambedue le parti provengono dallo stesso dominio, possono comunicare direttamente accedendo l'uno agli oggetti dell'altro, principalmente mediante la proprietà contentWindow dell'oggetto DOM rappresentante l'iframe o la proprietà top. Se i domini non corrispondono, ti devi affidare ad API più moderne. Dai un'occhiata a questo articolo, è abbastanza completo: http://softwareas.com/cross-domain-c...n-with-iframes.
Ok, grazie alle vostre dritte sono riuscito a scrivere del codice più o meno funzionante:
Adesso ad ogni tasto premuto l'altezza del mio iframe si espande per adattarsi al testo che deve contenere.Codice:function iframeAutoHeight()
{
/*Attivo l'iframe*/
var ifrm = document.getElementById('editArea');
ifrm = ifrm.contentWindow ? ifrm.contentWindow.document : ifrm.contentDocument ? ifrm.contentDocument : ifrm.document;
/*Leggo l'altezza*/
height = ifrm.body.offsetHeight;
alert(height);
if(height<=600)
{document.getElementById('editArea').style.height = "600px";}
else
{document.getElementById('editArea').style.height = height+"px";}
}
Il problema è che se l'utente toglie delle righe di testo l'altezza non viene cambiata perché la "pagina di destinazione" non si ritira automaticamente. È una cosa risolvibile?
In base a cosa viene richiamata la funzione iframeAutoHeight? Comunque io sposterei le prime due istruzioni di assegnazione fuori dalla funzione, in quanto si suppone che l'elemento sta sempre lo stesso tra le varie chiamate alla funzione. Al più puoi anche passarlo come parametro.
Ad ogni pressione di un tasto, evento onkeypress. Cmq viene richiamata, e legge correttamente l'altezza. Il problema è che una volta impostato il valore 650, non c'è verso di tornare a 600. lo script legge sempre 650, anche se ho cancellato delle righe :(
Puoi indicare l'indirizzo della pagina in questione?
Il della pagina purtroppo no, ma ho scritto il codice qui: http://jsfiddle.net/mark116/cXrEK/3/Citazione:
Originalmente inviato da karl94
Nell'esempio puoi vedere il codice e il problema
Non riesco a riprodurre il problema né con Firefox né con Chromium, cancellando il contenuto inserito riesco sempre a ritornare all'altezza di 600px. Puoi indicare il browser problematico e la relativa versione?