HTML iframe Tag - Tutorial HTML

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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe src="//example.com/">
  Maaf browser kamu tidak support element iframe
</iframe>

</body>
</html>

Attribute HTML `<iframe>`

align

Menentukan keselarasan posisi

Catatan : Attribute ini sudah tidak berlaku untuk HTML5
Tips : Gunakan CSS sebagai Gantinya.

Contoh :

<iframe align="right" src="//example.com/"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe align="right" src="//example.com/"></iframe>

</body>
</html>

Nilai atau value attribute ini adalah left, right, top, middle, bottom.

frameborder

Digunakan untuk menampilkan atau tidak garis tepi pada element <iframe>

Catatan : Attribute ini sudah tidak berlaku untuk HTML5
Tips : Gunakan CSS sebagai Gantinya.

Contoh :

<iframe frameborder="1" src="//example.com/"></iframe>
<br/>
<iframe frameborder="0" src="//example.com/"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe frameborder="1" src="//example.com/"></iframe>
<br/>
<iframe frameborder="0" src="//example.com/"></iframe>

</body>
</html>

Nilai atau value attribute ini adalah 0 dan 1

height

Digunkan untuk menentukan tinggi dari element <iframe>

Contoh :

<iframe src="//example.com/" width="300" height="300"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe src="//example.com/" width="300" height="300"></iframe>

</body>
</html>

Nilai atau value attribute ini adalah Angka pixels

longdesc

Attribute longdesc digunakan untuk Penambahan deskripsi panjang mengenai element iframe tersebut

Catatan : Attribute ini sudah tidak berlaku untuk HTML5

Contoh :

<iframe 
  src="https://triksonic.blogspot.co.id/" 
  longdesc="https://triksonic.blogspot.com/p/tentang.html">
</iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe 
  src="https://triksonic.blogspot.co.id/" 
  longdesc="https://triksonic.blogspot.com/p/tentang.html">
</iframe>

</body>
</html>

Nilai atau value attribute ini adalah Url/Link deskripsi panjang.

marginheight

Menentukan 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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe id="iframe1"></iframe>
  <br>
<iframe id="iframe2" marginheight="50"></iframe>

<p>
  Perhatikan Perbedaan margin pada masing-masing iframe,
  dengan melihat garis merah dan biru sebagai patokan.
</p>

<script>
var iframe1 = document.getElementById('iframe1');
var iframe2 = document.getElementById('iframe2');

iframe1.contentDocument.write("<style>body{border:1px solid red;}<\/style>\n<h1>trikSonic Blog<\/h1>");
iframe2.contentDocument.write("<style>body{border:1px solid blue;}<\/style>\n<h1>trikSonic Blog<\/h1>");
</script>

</body>
</html>

Nilai atau value attribute ini adalah Angka pixels

marginwidth

Menentukan 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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe id="iframe1"></iframe>
<br/>
<iframe id="iframe2" marginwidth="50"></iframe>

<p>
  Perhatikan Perbedaan margin pada masing-masing iframe,
  dengan melihat garis merah dan biru sebagai patokan.
</p>

<script>
var iframe1 = document.getElementById('iframe1');
var iframe2 = document.getElementById('iframe2');

iframe1.contentDocument.write("<style>body{border:1px solid red;}<\/style>\n<h1>trikSonic Blog<\/h1>");
iframe2.contentDocument.write("<style>body{border:1px solid blue;}<\/style>\n<h1>trikSonic Blog<\/h1>");
</script>

</body>
</html>

Nilai atau value attribute ini adalah Angka pixels

name

Attribute ini digunakan untuk memberikan nama tertentu untuk element <iframe>

Contoh :

<iframe src="//example.com" name="demo123"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe src="//example.com" name="demo123"></iframe>

<p>
 Klik link berikut 
 <a href="//triksonic.blogspot.com" target="demo123">
   TrikSonic Blog
 </a> 
  untuk melihat fungsi attribute name pada iframe,
  dan silahkan tunggu
</p>

</body>
</html>

Nilai atau value attribute ini adalah Teks

sandbox

Attribute ini digunkan untuk menentukan perintah, ijin atau batasan yang digunakan pada element iframe

Nilai atau value attribute ini adalah allow-forms, allow-pointer-lock, allow-popups, allow-same-origin, allow-scripts, allow-top-navigation.

scrolling

Attribute 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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<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>

</body>
</html>

Nilai atau value attribute ini adalah yes, no, auto.

src

Attribute src digunakan untuk menentukan alamat berupa url yang akan diload oleh iframe

Contoh :

<iframe src="//example.com"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe src="//example.com"></iframe>

</body>
</html>

Nilai atau value attribute ini adalah url

srcdoc

Attribute 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>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe 
  id="iframe" 
  srcdoc="<h1>tRikSonic Blog</h1><p>Tutorial Blog</p>">
</iframe>

</body>
</html>

Contoh 2:

<iframe id="iframe"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
<style>
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
body {
   font-family : san-serif;
}
iframe {
    display: block;
    width: 100%;
    border: 1px solid silver;
}
textarea {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border-color: #7aa9f7;
    background: #cafaff;
    margin-top: 15px;
    resize: none;
}
</style>
</head>
<body>

<iframe id="iframe"></iframe>

<textarea id="textarea">
&lt;style&gt;
h1 {
  color : red
}
&lt;/style&gt;

&lt;h1&gt;tRikSonic Blog&lt;/h1&gt;

&lt;p&gt;Tutorial Blog&lt;/p&gt;

&lt;div id=&quot;demodiv&quot;&gt;&lt;/div&gt;

&lt;button onclick=&quot;tes();&quot;&gt;Klik aku&lt;/button&gt;

&lt;script&gt;
function tes(){
  var el = document.getElementById(&quot;demodiv&quot;);
  el.innerHTML=&quot;&lt;h2&gt;hai... hello hello hai&lt;/h2&gt;&quot;;
}
&lt;/script&gt;
</textarea>

<p>
  Klik tombol berikut 
  <button onclick="demo();">
    Set Attribute srcdoc untuk iframe
  </button>
</p>

<script>
function demo (){
   var a, b; 
   a = document.getElementById("iframe"),
   b = document.getElementById("textarea").value;
   a.setAttribute("srcdoc", b);
}
</script>

</body>
</html>

Nilai atau value attribute ini adalah HTML_code

width

Digunkan untuk menentukan lebar dari element <iframe>

Contoh :

<iframe src="//example.com/" width="300" height="300"></iframe>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Demo Triksonic</title>
</head>
<body>

<iframe src="//example.com/" width="300" height="300"></iframe>

</body>
</html>

Nilai atau value attribute ini adalah Angka pixels

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;
}

Judul	`HTML iframe Tag - Tutorial HTML`
Label	`HTML`
Diposting pada	`29 November 2016 - 13:44`
Diperbaharui pada	`24 Mei 2018 - 17:10`

HTML iframe Tag - Tutorial HTML

Tutorial HTML `<iframe>`

Contoh HTML `<iframe>`

Attribute HTML `<iframe>`

Global Attributes:

Event Attributes:

Browser Support :

`Desktop`

`Mobile`

Default CSS :

Post Info

HTML ELEMENT

Populer Post

Arsip Blog

Label

HTML iframe Tag - Tutorial HTML

Tutorial HTML <iframe>

Contoh HTML <iframe>

Attribute HTML <iframe>

Global Attributes:

Event Attributes:

Browser Support :

Desktop

Mobile

Default CSS :

Post Info

Populer Post

Arsip Blog

Label

Tutorial HTML `<iframe>`

Contoh HTML `<iframe>`

Attribute HTML `<iframe>`

`Desktop`

`Mobile`