Cercasi codice iframe responsive 
Autore: Giancarlo B.
Visite 1107,
Followers 5,
Condiviso 0
Come da titolo, cercavo un codice iframe che si adattasse in base al contenuto resposive ed alle risoluzioni dei vari device.
Grazie giancarlo.
Postato il
ne ho provati un sacco anche io, ma senza trovare mai un risultato soddisfacente...
Autore
Mirko che brutta notizia che mi dai!!!
Nell'oggetto HTML devi spuntare la larghezza 100%, non spuntare l'altezza e impostare nell'iframe la larghezza al 100% e l'altezza quella giusta perchè si adatterà nei vari breakpoint in proporzione con l'altezza che gli hai impostato, questo un'esempio:
<iframe src="https://www.sito.com/pagina.html" width="100%" height="500"></iframe>
In grassetto da personalizzare
.
Autore
Grazie Patrizia è impostato così...
Autore
link test
https://www.tripodinavigazione.it/iframe-test-.html
Bene, ora inserisci quello che devi come ti ho scritto sopra o posta qui l'iframe.
Autore
Patrizia premetto che dal link postato in larghezza di adatta ... ma è in altezza che non di adatta...
Non ho capito se devi inserire nell'iframe questo link/pagina o è li l'iframe che non vedo.
... no! ... NON può funzionare il codice per IFRAME elastico con quel LINK dinamico esterno al tuo server/sito...
... devi usare il codice normale, valutando le altezze opportune per ogni breakpoint...
... in questo caso forse sarebbe meglio in PopUp tradizionale...
ciao
.
Non capisco perchè non possa funzionare, qui è inserito tutto il link che ha postato Giancarlo B. con il codice che ho postato:
http://bystratostyle.altervista.org/PROVE2/pagina-43.html
Autore
valutando altezze oppurtune per ogni breackpoint...
... tipo?
Autore
Patrizia questo è il link corretto che deve adattarsi... all'iframe
https://tripodinavigazione.web.sl3.eu/destination/1-tripodi-navigazione-srls/
... hai usato il codice NORMALE che ho menzionato prima, e non quello condizionato per IFRAME elastico(!) che mi pare chiedesse Giancarlo, ...infatti è presente lo scroll iframe, ...ma se ci si accontenta potrebbe anche andar bene, un normale IFRAME...
... trattandosi di un servizio, credo proprio che il PopUp sarebbe da preferire, ed anche perchè gestisce contenuti dinamici...
... vale anche per Giancarlo...
ciao
.
Autore
la classica presente in website?
... penso di si quella, non showbox...
... prova, si deve aprire in una sua finestra...
Autore
Grazie Kol.. ho aggiunto il pulsante alla stessa pagina test
https://www.tripodinavigazione.it/iframe-test-.html
Autore
naturalmente se era fattibile mi piaceva più l'iframe elastico....
ma diversamente proviamo se va bene con questa soluzione
<iframe src="https://tripodinavigazione.web.sl3.eu/destination/1-tripodi-navigazione-srls/" width="100%" height="800"></iframe>
http://bystratostyle.altervista.org/PROVE2/pagina-43.html
Testato e funzionante si adatta in altezza e in larghezza a tutte le risoluzioni.
Autore
Grazie gentilissima Patrizia della prova, il problema è quando clicchi sui pulsanti e la pagina si allunga, da cel risulta difficile poi la doppia barra di scorrimento, dovrebbe essere dinamico ed adattarsi al contenuto che cambia..
Ora ho capito i problema.
... no! ...non va bene, se non solo per le funzioni "normali" come già detto prima; ...per IFRAME elastico/responsive, diciamo quelli detti da Mirko e intesi da Giancarlo, si intende un IFRAME che assume automaticamente e dinamicamente la sua altezza relativamente alla pagina esterna contenuta, senza barre di scroll, confondendosi così con la pagina ospite, come se il contenuto appartenesse a questa stessa...
...
... poi, anche se in versione "normale" come quello che hai riportato, se lo vuoi anche elastico in ALTEZZA, allora devi assegnargli anche lo STYLE HEIGHT 100% (che in HTML non prenderebbe valore)(!)...
.
... direi un ottimo risultato e rispettoso della fonte...
...
(... se usi misure maggiorate, il PopUp dovrebbe assumere automaticamente quelle massime dello schermo...)
...
ciao
.
Autore
altra soluzione che mi è venuta in mente, è inserire un numero di iframe (oggetti html) in base al numero breackpoint ed impostarli in altezza in relazione al contenuto massimo per quella risoluzione, e con delle querry attivarli e disattivarli in base alla risoluzione.
Autore
messo online pagina test ma naturalmente non è molto elegante....
avevo anche trovato un codice molto interessante che si adatta al contenuto (link sotto), ma in preview funziona mente online no, peccato.
https://www.selectallfromdual.com/blog/38/adattare-un-iframe-allaltezza-del-suo-contenuto
... simile al concetto che ti avevo espresso in precedenza, ma un po contorto...
... ti basta un solo IFRAME e come avevo detto gestirlo per i breakpoint di riferimento, più o meno come hai fatto tu...
... in pratica qualcosa di molto semplice di questo genere che puoi provare con due copia/incolla, personalizzando le altezze con valori opportuni allo svliuppo verticale del contenuto, e semplice da gestire (ID="tripodinav"):
-------------------------------
<style>
@media (min-width: 1340px) {#tripodinav {height:1100px}}
@media (max-width: 1339px) {#tripodinav {height:1700px}}
@media (max-width: 719px) {#tripodinav {height:1800px}}
@media (max-width: 479px) {#tripodinav {height:1900px}}
</style>
---------------------------------
<iframe id="tripodinav" src="https://tripodinavigazione.web.sl3.eu/destination/1-tripodi-navigazione-srls/" width="100%" height="100"></iframe>
---------------------------------------
...!... invece per quanto riguarda il LINK del tutorial che hai postato per ultimo, per come ti avevo già detto, non può funzionare per i motivi anticipati...!...
.
Autore
Mi sembra un buon compromesso, grazie Kol sei sempre un riferimento.
...
...