Vai alla barra degli strumenti

Come risolvere “Google Drive folder iframe” e “X-Frame-Options SAMEORIGIN”

Qualche giorno fa ho pubblicato questa nuova sezione nel sito: Hacker Journal

Come si potrà notare, è fatta con GoogleDrive. Quando provai a farla, però, ebbi molti problemi (e da ricerche fatte si direbbe che il problema è decisamente esteso…) a causa di restrizioni imposte da google sugli iframe e le loro pagine. Restrizioni che, tramite htaccess, da tempo ho applicato anch’io su questa community:

 Header append X-FRAME-OPTIONS "SAMEORIGIN"

A causa di questa restrizione, non riuscivo a trovare un modo per mettere dentro un iframe questo url: ./folderview?id=…&usp=sharing

 <iframesrc="https://drive.google.com/folderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk&usp=sharing"frameborder="0"></iframe>

Dopo tante ricerche stavo quasi per rinunciare quando, finalmente, ho trovato la soluzione: embeddedfolderview

In pratica, molto semplicemente, bisogna cambiare “folderview” in “embeddedfolderview” e indicare alla fine se vogliamo una vista a “griglia” o “lista” semplice

Griglia: #grid

 <iframesrc="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#grid"frameborder="0"></iframe>

Lista: #list

 <iframesrc="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#list"frameborder="0"></iframe>

Ovviamente, ricordatevi di cambiare l’id con quello della vostra cartella preferita 😉

Così facendo, avremo la nostra cartella Google Drive integrata nel nostro sito web!

Facile, non trovate? 😀

Non soddisfatto da scegliere se “#list o #grid”, mi son fatto uno scriptino in jquery che passa da una vista all’altra con un semplice click!

Vi avviso che non sono un grande esperto di jquery, quindi non è il massimo, sicuramente migliorabile, ma funziona:

 <pclass=""style="float: right; margin-top:-15px">   <aid="listlink"title="List View"href="#"onclick="listview();returnfalse;"style="display:inline">List View</a>   <aid="gridlink"title="Grid View"href="#"onclick="gridview();returnfalse;"style="display: none">Grid View</a></p><scripttype='text/javascript'>varGDriveLink="https://drive.google.com/embeddedfolderview?id=0BwEXJh1LGDgxV1RBb0REMm4ydEk#";function listview(){   $("#listlink").hide();   $("#gridlink").show();   $("#googledriveiframe").attr("src",""+GDriveLink+"list");}function gridview(){   $("#gridlink").hide();   $("#listlink").show();   $("#googledriveiframe").attr("src",""+GDriveLink+"grid");} document.write('<iframe id="googledriveiframe" src="'+GDriveLink+'grid" style="width:100%; height:470px;" frameborder="0"></iframe>');</script>

Ovviamente richiede la libreria jquery!

Il risultato potete vederlo qui: Hacker Journal

Pubblicare sul drive fa indubbiamente comodo (quella directory, ad esempio, peserebbe alcuni gigabyte)… Poter integrare il risultato nel sito, però, è essenziale e adesso sapete come fare 🙂

Immagino quei siti che non hanno molto spazio, o non dispongono di uno script per un’area download… Bene, basterà creare una directory su gdrive e integratela nel sito tramite iframe! Facile, zero spese, sempre online e veloce!




Un commento su “Come risolvere “Google Drive folder iframe” e “X-Frame-Options SAMEORIGIN””

Lascia un commento

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.