Manipulasi Iframe, Post URL dan Hide Iframe

27/01/2020    Maykhel David    739     Website

Manipulasi Iframe, Post URL dan Hide Iframe - Hallo semuanya, pada kesempatan kali ini kita akan membuat beberapa eksperimen menggunakan iframe, seperti yang kalian tahu iframe adalah sebuah tag html yang memungkinkan kita untuk menampilkan file eksternal baik itu video ataupun halaman lain tanpa harus berpindah halaman, tahukah kalian bahwa sebagai tag html, tentu iframe memiliki karakteristik tertentu. untuk lebih lengkapnya kita simak penjelasan berikut.

 

Post Data ke Iframe

Tahukah kalian bahwa iframe juga memiliki ikatan dengan tag input? ya kali ini kita akan coba untuk membuat atau menghubungkan tag input ke sebuah halaman menggunakan iframe, sehingga kita bisa mengirim data ke halaman kedua, dan langsung melakukan reload iframe bahkan tanpa bantuan javascript sedikitpun kurang lebih akan terlihat seberti menggunakan ajax.

<form action="halamanOutput.php" target="my-iframe" method="post">
      
  <label for="text">Some text:</label>
  <input type="text" name="text" id="text">
      
  <input type="submit" value="post">
      
</form>
    
<iframe name="my-iframe" src="halamanOutput.php"></iframe>

 

Pada kode diatas kita membuat sebuah form dengan action ke file halamanOutput.php untuk menjalankan proses post, tetapu kita juga memberikan atribut target pada form yang menuju ke id #my-iframe  yang pada tag iframe. atribut target tersebut membuat iframe melakukan reload saat kita melakukan eksekusi atau submit pada form tersebut. Sehingga data yang tampil akan melakukan refresh tanpa kita melakukan reload secara full satu halaman.

 

Hide Iframe Ketika Isi Iframe Belum diload Sepenuhnya

Pada bagian ini tentu sadar atau tidak, kalian pasti pernah melihat sebuah iframe yang ketika file atau halaman belum di load sepenuhnya pasti akan menampilkan sebuah kotak dengan isi konten putih kosong, Ya! Sebenarnya hal tersebut bisa kita manipulasi menggunakan sedikit kode javascript untuk menyembunyikan iframe sampai halaman benar - benar diload sepenuhnya. bagaimana caranya? berikut kode yang kita butuhkan.

<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples/inlineframes1.html" > </iframe>

Pada iframe diatas kita memberikan style visibility:hidden untuk menyembunyikan iframe, dan kita juga memberikan event onload dengan value visibility visible untuk menampilkan iframe kembali. Demikian artikel kali ini yang membahas tentang manipulasi iframe, semoga bermanfaat

 

PHP, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More