Tutorial HTML <iframe>
Element
iframe mempunyai definisi sebagai element yang digunakan untuk memasukan atau memanggil dokumen html dari sumber lainnya, contoh memanggil video, menampilkan website lain, script iklan, Aplikasi HTML dan sebagainya.
Contoh HTML <iframe>
<iframe src="//example.com/">
Maaf browser kamu tidak support element iframe
</iframe>
Attribute HTML <iframe>
alignMenentukan keselarasan posisi
Catatan : Attribute ini sudah tidak berlaku untuk HTML5
Tips : Gunakan CSS sebagai Gantinya.
Tips : Gunakan CSS sebagai Gantinya.
Contoh :
<iframe align="right" src="//example.com/"></iframe>
frameborderDigunakan untuk menampilkan atau tidak garis tepi pada element
<iframe>Catatan : Attribute ini sudah tidak berlaku untuk HTML5
Tips : Gunakan CSS sebagai Gantinya.
Tips : Gunakan CSS sebagai Gantinya.
Contoh :
<iframe frameborder="1" src="//example.com/"></iframe>
<br/>
<iframe frameborder="0" src="//example.com/"></iframe>
heightDigunkan untuk menentukan tinggi dari element
<iframe>Contoh :
<iframe src="//example.com/" width="300" height="300"></iframe>
longdesc
Attribute
longdesc digunakan untuk Penambahan deskripsi panjang mengenai element iframe tersebutCatatan : Attribute ini sudah tidak berlaku untuk HTML5
Contoh :
<iframe
src="https://triksonic.blogspot.co.id/"
longdesc="https://triksonic.blogspot.com/p/tentang.html">
</iframe>
marginheightMenentukan Batas atas dan bawah isi kontent element
iframe, attribute ini akan memberi style margin-top dan margin-bottom pada bagian <body>Catatan : Attribute ini sudah tidak berlaku untuk HTML5.
Contoh :
<iframe id="iframe1"></iframe>
<br>
<iframe id="iframe2" marginheight="50"></iframe>
marginwidthMenentukan Batas kanan dan kiri isi kontent element
iframe, attribute ini akan memberi style margin-left dan margin-right pada bagian <body>Catatan : Attribute ini sudah tidak berlaku untuk HTML5.
Contoh :
<iframe id="iframe1"></iframe>
<br/>
<iframe id="iframe2" marginwidth="50"></iframe>
nameAttribute ini digunakan untuk memberikan nama tertentu untuk element
<iframe>Contoh :
<iframe src="//example.com" name="demo123"></iframe>
sandboxAttribute ini digunkan untuk menentukan perintah, ijin atau batasan yang digunakan pada element iframe
scrollingAttribute
scrolling digunakan untuk pengaturan scrollbar element <iframe>Catatan : Attribute ini sudah tidak berlaku untuk HTML5 Tips : Gunakan CSS sebagai gantinya, dengan CSS Property
overflow.Contoh :
<iframe src="https://example.com" scrolling="yes"></iframe>
<hr/>
<iframe src="https://example.com" scrolling="no"></iframe>
<hr/>
<iframe src="https://example.com" scrolling="auto"></iframe>
srcAttribute
src digunakan untuk menentukan alamat berupa url yang akan diload oleh iframeContoh :
<iframe src="//example.com"></iframe>
srcdocAttribute srcdoc digunakan untuk membuat kontent html di dalam element iframe. Catatan : tidak semua browser, support attribute ini.
Contoh 1:
<iframe
id="iframe"
srcdoc="<h1>tRikSonic Blog</h1><p>Tutorial Blog</p>">
</iframe>
Contoh 2:
<iframe id="iframe"></iframe>
widthDigunkan untuk menentukan lebar dari element
<iframe>Contoh :
<iframe src="//example.com/" width="300" height="300"></iframe>
Global Attributes:
Element
<iframe> mencakup Global Attributes HTML.
Event Attributes:
Element
<iframe> mencakup Event Attributes HTML.
Browser Support :
Desktop
| Chrome | Ya |
|---|---|
| Safari | Ya |
| Firefox | Ya |
| Opera | Ya |
| IE | Ya |
| Edge | Ya |
Mobile
| Android Webview | Ya |
|---|---|
| Chrome Android | Ya |
| Edge Mobile | Ya |
| Firefox Android | Ya |
| Opera Android | Ya |
| iOs Safari | Ya |
| Samsung Internet | Ya |
Default CSS :
Browser yang support dengan element
<iframe>, mempunyai nilai default :iframe:focus {
outline: none;
}
iframe[seamless] {
display: block;
}