tRikSonic
Tema
  • Original
  • Translate
/ / HTML iframe Tag - Tutorial HTML

HTML iframe Tag - Tutorial HTML

Terakhir diperbarui : 24 Mei 2018 - 17.10
/ / 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.
background html

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

ChromeYa
SafariYa
FirefoxYa
OperaYa
IEYa
EdgeYa

Mobile

Android WebviewYa
Chrome AndroidYa
Edge MobileYa
Firefox AndroidYa
Opera AndroidYa
iOs SafariYa
Samsung InternetYa

Default CSS :

Browser yang support dengan element <iframe>, mempunyai nilai default :
iframe:focus { 
    outline: none;
}

iframe[seamless] { 
    display: block;
}
Postingan Lebih BaruBerandaPostingan Lama
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.