Çerçevelerin, navigator açısından nasıl bir hiyerarşi işlediğini nesneler dersinde vermiştik. Javascript açısından her bir çerçeve bir pencere sayılır.Bunlara atıfta bulunurken şu adlandırma uygulanır:

top
En üst pencere. yani Browser’ın kendisi.
parent
Herhangi bir frame i oluşturan Frameset.Çerçeve çerçeve içinde ise, bir çerçevenin içinde bulunduğu çerçeve parent sayılır. Sayfada bir Frameset varsa, bütün çerçeveler için "top" aynı zamanda "parent" sayılır.
self
Çerçevenin kendisi.

Javascript, bir parent Frameset’in yavru çerçevelerini 0’dan itibaren numaralar.Yani, sayfanızda iki çerçeveniz varsa, birincisi "parent.frames[0]" ikincisi ise "parent.frames[1]" adıyla bilinir.

Şimdi adım adım bir örnek yapalım.

İki çerçeveli bir frameset için aşağıdaki kodlar anacerceve.asp ismi ile kaydedildi.

<html>
<head>
<title>Dinamik Cerceve</title>
</head>
<frameset cols="*,*">
<frame src="jsd17nin/ic1.asp" name="cerceve1">
<frame src="jsd17nin/ic2.asp" name="cerceve2">
</frameset>
<noframes>
<body>
</body>
</noframes>
</html>

Şimdi ise çecevelerde yer alacak sayfaları hazırlayalım.
ic1.asp sayfasının içeriği:

<html>
<head>
<title>ic1</title>
<script LANGUAGE="JavaScript1.2">
function renklen()
{
parent.frames[1].document.clear();
parent.frames[1].document.write("<html><head>" +
"<title>Dinamik Güncelleme Örnegi</title>");
parent.frames[1].document.write(" </head><body bgcolor=\"" +
document.form1.input1.value + "\">");
parent.frames[1].document.write("<h2>Renklendirilmiş sayfa</h2>");
parent.frames[1].document.write("</body></html>");
parent.frames[1].document.close();
}
</script>
</head>
<body>
<form NAME="form1">
Metin kutusuna ingilizcebir renk ismi veya renk kodu giriniz.<br><br>
<input type="text" name="input1" size="20"><br>
<input type="button" value="Yandaki çerçeveye renk verelim" onClick="renklen()">
</form>
</body>
</html>

ic2.asp sayfasının içeriği:

<html>
<head>
<title>ic2</title>
</head>
<body>
<h3>Bu sayfa renklendirilecek</h3>
</body>
</html>

 

(( anacerceve.asp dosyasını görüntülemek için tıklayınız! ))

Örneğimizde, document.write() metoduyla, hedef çerçevemiz olan iki numaralı çerçevenin (parent.frames[1]) birinci çerçevedeki formdan aldığımız unsurları kullanarak, zemin rengini ve içeriğini değiştirdik.Sizde bu örnekten yola çıkarak, bir çerçevede meydana gelen değişikliklerden yola çıkarak, diğer çerçevelerde değişimler meydana getirebilirsiniz.

<< Mesaj Kutular | Çerçeve Nesneler | Belge(Döküman) Nesneleri >>
Başa Dön
AnaSayfa | Html Dersleri | CSS Dersleri | İçerik
Dizayn & Tasarım : Mehmet KAYA