iframe con altezza dinamica

**DUMAX** · 14-06-2019, 12:22

Buongiorno,
inserisco il post in questa sezione perchè penso che con jquery qualcosa si possa fare.

Ecco il mio problema, ho acquistato uno script che per funzionare in front end ha bisogno di creare una semplice pagina html con codice simile a questo:

codice:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titolo</title>
</head>
<body>
 <script type="text/javascript" src="https://www.nomedominio.com/nome-dello-script.php?param1=1&param2=22"></script>
 </body>
</html>

Fin qui tutto funziona.
Poi carico lo script nel mio sito attraverso un iframe.
Nel sito ho installato un plugin che modifica l'altezza dell'iframe in base all'altezza del contenuto della pagina caricata.
Questo mi permette di evitare la visualizzazione della scrollbar laterale.

Il problema è che con questo script non funziona, l'altezza dell'iframe non si adatta al contenuto della pagina caricata.
L'idea che mi sono fatto è che, siccome il codice html viene caricato attraverso il javascript, esso non fa realmente parte del DOM, pertanto il plugin dell'iframe non riesce a rilevare l'altezza del contenuto per adattare a sua volta l'altezza dell'iframe… ma posso sbagliarmi.

Si può risolvere in qualche modo?
Ringrazio anticipatamente ogni possibile aiuto.

**DUMAX** · 15-06-2019, 13:51

Al seguente link potrete vedere i test:
http://test.eyenet.it/

**KillerWorm** · 15-06-2019, 17:20

Ciao, per il momento non so risponderti sulla questione in oggetto ma ho diverse perplessità che mi portano a farti delle domande:

- Hai realmente bisogno di utilizzare degli iframe?

- Che significa "lo script ha bisogno di creare una semplice pagina html"? (non mi è chiara la logica di funzionamento)

- L'iframe lo crei tu o viene creato dallo script? (nella pagina dei test non riesco a capire cosa avviene e come)

- Dove risiedono le risorse che devi inserire/caricare nella tua pagina?

- Se la risorsa sta nel tuo dominio o se lo script crea semplicemente del codice HTML, non puoi semplicemente inserire quello script nella tua pagina, magari dentro un contenitore (ad esempio un div) che non sia necessariamente un iframe? Cosa ti salta fuori?

- In alternativa, sai se al posto dell'iframe puoi risolvere caricando la risorsa attraverso AJAX?

**KillerWorm** · 15-06-2019, 17:34

In parte mi rispondo io.
Ho dato uno sguardo alla console log di quella pagina e vedo che viene segnalato questo errore:

JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
Advanced iframe configuration error: You have enabled the resize of the iframe for pages on the same domain. But you use an iframe page on a different domain. You need to use the external workaround like described in the settings. Also check the next log. There the browser message for this error is displayed. ai.js:80:7
DOMException: "Permission denied to get property "href" on cross-origin object"

Ciò significa che la risorsa sta in altro dominio, quindi lo script non può interagire per ridimensionare l'iframe. Qui però viene indicato "You need to use the external workaround like described in the settings" per cui bisognerebbe capire qual è il workaround descritto nelle impostazioni. Hai controllato?

EDIT:
potrei aver preso un abbaglio. La tua pagina di test potrebbe comunque dare dei falsi risultati se il suo dominio non è quello finale, in cui dovrà girare il tutto. In tal caso è chiaro che si ha un problema di cross-origin.

La domanda iniziale resta quindi valida: la risorsa sta sullo stesso dominio della pagina da cui è richiamata?

Ho verificato cosa c'è nella pagina della risorsa che viene caricata, effettivamente il contenuto viene generato tutto attraverso lo script, per cui questo può influire sul risultato di quel plugin che ridimensiona l'iframe.

Il primo passo da fare è comunque quello di capire se non ci sono problemi di cross-origin.

**DUMAX** · 17-06-2019, 09:32

Buongiorno,
l'iframe gira nel dominio principale, mentre lo script è installato in un suo sottodominio.
Riguardo il perchè l'utilizzo dell'iframe è l'unico modo che ho trovato per far visualizzare correttamente lo script.
Ho provato con php, ma la pagina caricata viene vuota.
Con Ajax non ho ancora provato.

Riguardo il "

cross-origin", è la prima volta che ne sento parlare, quindi dovrei prima cercare di documentarmi.

Grazie.

**KillerWorm** · 17-06-2019, 11:13

Bene, il problema del cross-origin lo hai nella tua pagina di test perché sostanzialmente caricando la risorsa da un dominio differente non puoi accedere direttamente ai contenuti per motivi di sicurezza impostati dal browser, per cui è valido ciò che ho supposto nel mio edit.

Nella situazione reale non esiste questo problema in quanto si tratta comunque dello stesso dominio. In questo caso il problema del resize mancato è dovuto semplicemente al fatto che quella pagina viene creata dinamicamente via script, per cui presumo che il plugin riceva dei valori iniziali quando il contenuto non è ancora stato creato; eventualmente è da verificare se si può, e come, forzare il resize una volta creato/caricato il contenuto.

Altrimenti bisogna capire se si può, e come, inserire lo script (che crea i contenuti) direttamente sulla tua pagina senza uso di iframe (che a mio parere sarebbe la scelta più appropriata se non ci sono altre particolari controindicazioni).

Bisognerebbe fare delle prove nel dettaglio ma non puoi farlo con la pagina di test, come hai fatto, a meno ché la risorsa stessa non sia resa disponibile sullo stesso dominio di tale pagina.

Intanto posso fare qualche prova per capire meglio come potresti muoverti.

**DUMAX** · 19-06-2019, 12:53

Ciao KillerWorm,
penso che installarò lo script nello stesso dominio in cui sto facendo i test e ti faccio sapere come va.
Per il momento ti ringrazione dell'aiuto.

**KillerWorm** · 19-06-2019, 14:37

Ciao, sì, sicuramente lo script e l'intera risorsa che deve essere mostrata nell'iframe deve risiedere sullo stesso dominio della pagina che la richiama, altrimenti vai incontro alle restrizioni di sicurezza (il già citato cross-origin).

Io ho dato uno sguardo allo script per capire se sia possibile eseguirlo senza usare un iframe ma non ho avuto buoni risultati. Da quel che ho capito, il sistema si aspetta dei parametri che vai a passare come querystring nell'url della pagina che stai caricando nell'iframe (cioè la pagina in cui c'è lo script che carica/crea dinamicamente i contenuti), per cui non sono riuscito a capire come sfruttare lo script da solo (perché non mi è chiaro se sia possibile passargli quei parametri in qualche modo).

Forse si potrebbe usare AJAX in modo da richiamare, sì, quella pagina passando i parametri, ma estrapolare poi il solo contenuto da inserire direttamente nella pagina del sito, quindi senza usare l'iframe. In tal modo potrai manipolare quei contenuti senza alcuna restrizione, perché staranno in un semplice contenitore, ad esempio un div.

Bisogna verificare però che sia possibile (e come) recuperare quei contenuti, perché sono appunto creati via script su quella stessa pagina esterna.

Ho fatto qualche prova ma non ho approfondito.

Eventualmente fai sapere quando sposti l'intera risorsa sulla pagina di test, magari posso poi provare qualcosa anche io.

**DUMAX** · 22-06-2019, 17:44

Ciao KillerWarm,
ho installato lo script in un sottodominio dello stesso dominio in cui lavora il sito WordPress.
Purtroppo il risultato non è cambiato.
grazie per il tuo aiuto.

**KillerWorm** · 23-06-2019, 16:57

Prova a controllare se ti saltano fuori errori nella console (F12).

Nella pagina di test (che hai linkato su) vedo comunque degli errori dovuti sia al problema del cross-origin sia all'esecuzione di funzioni non definite.

Così, a spanne, a parte questi errori, il problema principale mi pare sia appunto legato al fatto che il contenuto è generato via script e quindi posso pensare che la funzione usata per effettuare il resize sia eseguita prima che il contenuto stesso venga inserito nella pagina dell'iframe... ma sono cose di cui abbiamo già discusso. Purtroppo la situazione è particolare per cui è difficile darti aiuto senza poter mettere mano direttamente alla pagina in cui è presente l'iframe, allo script che genera il contenuto, e a quello che effettua i resize dell'iframe.

Discussione: iframe con altezza dinamica

Strumenti discussione

Ricerca discussione

Visualizza

iframe con altezza dinamica

Permessi di invio