Javascript Responsive Embed Preview Office File Google Drive

Meneruskan postingan sebelumnya wacana cara menciptakan preview office file dari Google Drive, sekarang aku akan membagikan cara gampang menampilkan embed preview office file dari Google Drive di postingan blog dengan javascript.

Sebetulnya kemarin aku sudah menyertakan javascript untuk embed preview office file, namun bila ternyata postingan yang menampilkan embed preview cukup banyak maka arahan harus ditulis di setiap postingannya dengan arahan javascript-nya menyerupai di bawah ini. Kode ini sama dengan arahan javascript responsive embed video Youtube.

 <script type="text/javascript">
 //<![CDATA[
 document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe src="https://drive.google.com/file/d/ID UNIK GOOGLE DRIVE/preview" style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" allowfullscreen></iframe></div></div>');
 //]]>
 </script>

Nah untuk memudahkan menampilkan embed preview office file di postingan blog, silahkan gunakan arahan di bawah ini.

Silahkan simpan arahan di bawah ini di atas arahan </head>

 <script type="text/javascript">
 //<![CDATA[
 function embedOffice(t) {
    document.write('<div style="text-align:center;margin:0 auto;width:100%;"><div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0;"><iframe style="border:0;position:absolute;top:0;left:0;width:100%;height:100%;" data-src="https://drive.google.com/file/d/');
    document.write(t);
    document.write('/preview" allowfullscreen></iframe></div></div>');
 }
 function init() {
 var vidDefer = document.getElementsByTagName('iframe');
 for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } }
 window.onload = init;
 //]]>
 </script>

Kode di atas sudah aku sertakan arahan untuk defer iframe biar tidak mengganggu loading blog. Namn bila blog Anda sudah mempunyai javascript defer iframe, silahkan hapus arahan berikut.

 function init() {
 var vidDefer = document.getElementsByTagName('iframe');
 for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } }
 window.onload = init;

Kemudian untuk menampilkan bejana preview office file di postingan, cukup menulisnya dengan arahan berikut pada mode HTML:

 <script type="text/javascript">embedOffice("ID UNIK GOOGLE DRIVE");</script>

Untuk mendapat ID arahan unik Google Drive silahkan simak postingan sebelumnya.
Sumber https://www.kompiajaib.com/

Share this post