Sign in Subscribe
Javascript

Menampilkan Website Lain di Halamanmu Menggunakan Iframe Window

Menampilkan Website Lain di Halamanmu Menggunakan Iframe Window
Photo by Sigmund / Unsplash

Saat membangun sebuah website, terkadang kita ingin menampilkan konten dari website lain tanpa mengarahkan pengguna keluar dari halaman kita. Salah satu cara paling mudah untuk melakukannya adalah dengan menggunakan iframe.

<iframe> adalah elemen HTML yang memungkinkan kita untuk menyematkan halaman web lain di dalam halaman kita sendiri. Elemen ini sering digunakan untuk menampilkan video YouTube, Google Maps, dokumen PDF, atau halaman eksternal lainnya.

Artikel ini akan membahas cara menggunakan iframe window, kelebihan dan kekurangannya, serta contoh implementasi dalam berbagai kasus penggunaan.

Apa Itu Iframe?

Iframe (Inline Frame) adalah elemen HTML yang digunakan untuk menyematkan halaman web lain di dalam halaman saat ini.

Contoh dasar penggunaan iframe:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Kode di atas akan menampilkan website example.com di dalam halaman kita dengan lebar 600px dan tinggi 400px.

Cara Menggunakan Iframe untuk Menampilkan Website Lain

1. Menampilkan Halaman Eksternal dalam Iframe

Untuk menyematkan website lain dalam halaman kita, cukup gunakan tag <iframe> dengan atribut src:

<iframe src="https://www.wikipedia.org" width="800" height="500"></iframe>

Hasilnya, halaman Wikipedia akan muncul di dalam website kita.

2. Menampilkan Video YouTube dalam Iframe

Jika ingin menyematkan video YouTube, gunakan kode yang disediakan oleh YouTube:

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

Ini akan menampilkan video dalam player YouTube yang bisa dikontrol langsung dari iframe.

3. Menampilkan Google Maps dalam Iframe

Kita juga bisa menyematkan Google Maps ke dalam halaman web kita:

<iframe
    width="600"
    height="450"
    style="border:0;"
    loading="lazy"
    allowfullscreen
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509667!2d144.96305791531664!3d-37.81627917975198!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce6e0!2sMelbourne%2C+Victoria%2C+Australia!5e0!3m2!1sen!2sid!4v1633071805453!5m2!1sen!2sid">
</iframe>

Dengan kode ini, Google Maps akan muncul di dalam halaman kita tanpa perlu navigasi tambahan.

Menyesuaikan Tampilan Iframe dengan CSS

Agar iframe lebih responsif dan sesuai dengan desain website, kita bisa menggunakan CSS.

iframe {
    width: 100%; /* Mengisi seluruh lebar kontainer */
    height: 500px; /* Menentukan tinggi tetap */
    border: none; /* Menghilangkan border */
}

Kode ini memastikan iframe akan menyesuaikan ukuran layar dan tidak memiliki batasan visual.

Membatasi Interaksi dalam Iframe dengan Sandbox

Jika kita ingin membatasi apa yang bisa dilakukan iframe dalam halaman kita, gunakan atribut sandbox.

<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>

Beberapa opsi sandbox yang bisa digunakan:

  • allow-scripts → Mengizinkan eksekusi JavaScript.
  • allow-same-origin → Mengizinkan akses ke data dari domain yang sama.
  • allow-popups → Mengizinkan pop-up dalam iframe.
  • allow-forms → Mengizinkan input form dalam iframe.

Jika iframe digunakan untuk menyematkan konten yang tidak sepenuhnya terpercaya, gunakan sandbox untuk keamanan.

Mengatasi Masalah Website Tidak Bisa Ditampilkan dalam Iframe

Tidak semua website bisa disematkan dalam iframe karena Content Security Policy (CSP) yang melarangnya. Jika iframe tidak berfungsi dan muncul pesan error seperti:

Refused to display 'https://www.example.com' in a frame because it set 'X-Frame-Options' to 'DENY'.

Itu berarti website tersebut menolak untuk ditampilkan dalam iframe.

Solusi:

  1. Gunakan API atau alternatif lainnya seperti fetch() untuk mengambil data jika iframe tidak diizinkan.
  2. Gunakan proxy server untuk mengambil data dari website yang dibatasi dan menampilkannya di halaman kita sendiri.

Kapan Harus Menggunakan Iframe?

✅ Jika ingin menampilkan konten eksternal seperti YouTube, Google Maps, atau dokumen PDF.
✅ Jika ingin membuat embed tampilan website lain dalam halaman tanpa navigasi tambahan.
✅ Jika ingin menampilkan dasbor atau laporan dari sumber lain dalam sistem internal.
❌ Jangan gunakan jika website yang ingin disematkan memblokir iframe dengan CSP atau X-Frame-Options.

Kesimpulan

  • Iframe memungkinkan kita menampilkan website lain dalam halaman kita dengan mudah.
  • Bisa digunakan untuk menyematkan video, peta, laporan, atau halaman eksternal lainnya.
  • Gunakan sandbox untuk keamanan tambahan jika iframe memuat konten yang tidak terpercaya.
  • Beberapa website mungkin memblokir iframe menggunakan CSP atau X-Frame-Options.

Dengan memahami cara kerja iframe window, kita bisa menggunakannya secara efektif untuk meningkatkan pengalaman pengguna dalam website!

Read next