Menü ve Reklam Alanı
Sayfayı Paylaş

THB - Ücretsiz Hizmetler

cerceve nesnesi

Ç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=&quot;white&quot;">Beyaz<br>

<input TYPE="radio" NAME="radio1" VALUE="red"

onClick="document.form1.bginput.value=&quot;red&quot;">Kırmızı<br>

<input TYPE="radio" NAME="radio1" VALUE="blue"

onClick="document.form1.bginput.value=&quot;blue&quot;">Mavi<br>

<input TYPE="radio" NAME="radio1" VALUE="green"

onClick="document.form1.bginput.value=&quot;green&quot;">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.
Bugün 2 ziyaretçi (10 klik) sitemizi ziyaret etti.

Copyright 2012. THB. Tüm hakları saklıdır. Tasarımlayan: Oğuzhan Acımaz.
Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol