Javascript çerçeve nesnesi

Bir Navigator penceresinde birden fazla HTML belgesi görüntüleme imkanı veren çerçeve (Frame) tekniği, tasarım açısından kolaylık sağlar. Bununla birlikte halâ bazı Web ziyaretçilerinin çerçeveden hoşlanmadıkları da gerçektir.

Çerçevelerin, Navigator açısından nasıl bir hiyerarşı işlediğini daha önce gördük. 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.

Daha önce de belirttiğimiz gibi, Javascript, bir parent (ebeveyn) 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. Herhangi bir çerçevenin içeriğini dinamik biçimde belirlemenin bir örneğini yukarıda gördük. Burada write() metodunu kullanarak, aynı işi nasıl yapabileceğimizi ele alalım. Şimdi, iki çerçeveli bir Frameset için şu HTML kodunu “anacerceve.htm” adıyla kaydedin:

<html>
<head>
<title>Dinamik Cerceve</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<frameset cols="40%,*">
<frame SRC="doc1.htm" NAME="cerceve1">
<frame SRC="doc2.htm" NAME="cerceve2">
</frameset>
<noframes>
<body>
</body>
</noframes>
</frameset>
</html>

Sonra, bu Frameset?in çağrıda bulunduğu “doc1.htm” olarak, şu kodu kaydedin:

<html>
<head>
<title>Cerceve 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
<script LANGUAGE="JavaScript1.2">
<!-- Javascript kodunu eski sürüm Browserlardan saklayalim
//fonksiyonumuzu tanimlayalim
function belgeYazdir()
	{
	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.bginput.value + "\">");
	parent.frames[1].document.write("<H1>Güncellenmiş sayfa</H1>");
	parent.frames[1].document.write("Bu sayfayı güncelleştiren unsur:" +
	                                 document.form1.input1.value);
	parent.frames[1].document.write("</BODY></HTML>");
	parent.frames[1].document.close();
	}
// -->
</script>
</head>
<body>
<form NAME="form1">
<input type="hidden" name="bginput" value="white">
<p><input TYPE="text" NAME="input1" size="20"></p>
<p>Bir zemin rengi seçiniz:<br>
<input TYPE="radio" NAME="radio1" VALUE="white" CHECKED
onClick="document.form1.bginput.value="white"">Beyaz<br>
<input TYPE="radio" NAME="radio1" VALUE="red"
onClick="document.form1.bginput.value="red"">Kırmızı<br>
<input TYPE="radio" NAME="radio1" VALUE="blue"
onClick="document.form1.bginput.value="blue"">Mavi<br>
<input TYPE="radio" NAME="radio1" VALUE="green"
onClick="document.form1.bginput.value="green"">Yeşil<br>
<br>
<input TYPE="button" VALUE="Çerçeve 2'yi güncelle" onClick="belgeYazdir()"> </p>
</form>
</body>
</html>
"doc2.htm" ise oldukça basit:
<html>
<head>
<title>Çerçeve 2</title>
</head>
<body>
<p>Bu sayfa güncellenecek</p>
</body>
</html>

Burada, 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ştiriyoruz. Buradaki örnekten hareketle, çerçevelerinizin içeriğini, bir diğer çerçevede yapılan tercihlere, yapılan arama sonuçlarına veya veri-yönlendirmeli sonuçlara ayırabilir ve dinamik olarak değiştirebilirsiniz.

Hakkı Öcal Javascript dersleri

Dersler