Mengontrol halaman dari dalam iframe menggunakan jquery

Dalam mengembangkan sebuah aplikasi berbasis web atau membangun CMS sekalipun, terkadang kita bertemu suatu kasus dimana kita perlu menggunakan iframe didalamanya. Tapi dalam penggunaannya kita perlu mengontrol halaman utama-nya, nah bagaimana caranya? Mari kita bahas sedikit tentang fungsionalitas tersebut disini.
1. Langkah pertama silahkan download jquery versi terakhir. Disini penulis menggunakan versi 1.6.2
2. Buatlah sebuah halaman HTML dan berinama index.html, dan silahkan isikan tag berikut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="kotakorange" />
 
    <title>Mengontrol halaman dari iframe</title>
</head>
 
<body>
<iframe frameborder="1" height="1" width="1" scrolling="no" src="child.html"><p>Your browser does not support iframes.</p></iframe>
<h1>Halaman Utama</h1>
 
<div id="rubah"></div>
 
</body>
</html>

2. Kita siapkan halaman pengontrol dan berinama child.html. Masukkan tag berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="kotakorange" />
 
    <title>Child Frame</title>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#rubah', window.parent.document).html('blok ini telah di-edit dari halaman iframe');
            $('#rubah', window.parent.document).css('border', 'solid #FF0101 1px');
            $('#rubah', window.parent.document).css('padding', '5px');
        });
    </script>
</head>
 
<body>
 
</body>
</html>

3. Silahkan coba, penulis telah lakukan testing di Firefox 5.0, Chrome 12.0.742.122 dan IE 8. Dan hasilnya seperti berikut:

IFRAME Controll
IFRAME Controll

Demikian tutorial singkat menggunakan iframe dan mengontrol halaman utama dari iframe. Jika ada pertanyaan, kritik atau saran silahkan tinggalkan pesan anda pada komentar dibawah. Terimakasih.