Manipulasi Iframe, Post URL dan Hide Iframe

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

 

27 Januari 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat