Javascript - Frame nesnesi 2 - PcTekno.NET | PTN

Konumunuz:

Javascript - Frame nesnesi 2

Çarşamba, 27 Haziran 2007

Sample Image İlk önce aşağıdaki sayfayı anasayfa.html olarak kayıt edin.

<html>
<title>Frame kullanımı</title>
<frameset rows=30%,*,*>
<frame src="menu.html" name="menuBolumu">
<frame src="sayfa.html" name="sayfamiz">
<frame src="sayfa1.html" name="sayfamiz1">
</frameset>
</html>

Bu bölümde üç frameli bir sayfa tanımlaması yapıyoruz. Her frameye bir ad veriyoruz. menuBolumu, sayfamiz, sayfamiz1 olarak üç framemiz artık elimizde bulunuyor. Bu frameler javascript için birer nesnedir. İsimleri ile bu framelere ulaşacağız.

Menü bölümü için aşağıdaki kodları menu.html olarak kayıt edin.

<html>
<head>
<title>frame menü bölümü</title>
<script>
<!--
yeniPencere=window.open("yenianasayfa.html","yeniPencereBolumu",
"top=1, left=1, width=200, height=200");
 
function ekle(){
        parent.sayfamiz.document.open();
        parent.sayfamiz.document.bgColor="pink";
        parent.sayfamiz.document.write("<font size=4 color=blue>
Yeni bir belge açtık.</font><br>");
        parent.sayfamiz.document.write("yeni belgeyi bitirdik.");
        parent.sayfamiz.document.close();
        }
//-->
</script>
<title>frame menü bölümü</title>
</head>
<body>
<form>
<center>
<input type=button value="sayfamiz 'ın rengi kırmızı"
onClick="parent.sayfamiz.document.bgColor='red'">
<input type=button value="sayfamiz1 'in rengi mavi"
onClick="parent.sayfamiz1.document.bgColor='blue'">
<input type=button value="yeni kodları sayfamiz 'a ekle"
          onClick="ekle()">
<input type=button value="menu 'ün rengi aqua"
onClick="document.bgColor='aqua'">
<input type=button value="yenisayfamiz 'in rengi sarı"
onClick="yeniPencere.parent.yeniSayfamiz.document.bgColor='yellow'">
<input type=button value="yenisayfamiz1 'in rengi mavi"
onClick="yeniPencere.parent.yeniSayfamiz1.document.bgColor='blue'">
</center>
</body>
</html>

Sayfamızın ilk framesi olan menuBolumu ne bir sayfa yüklememiz gerekiyor. Bu bölüm için hazırladığımız sayfa menu.html. Şimdi bu sayfayı inceleyelim. Menü bölümü ilk olarak bir script ile başlıyor. Scriptin ilk bölümünde yeniPencere adlı bir window nesnesi oluşturuyoruz. Yani yeni bir pencere açıyoruz ve yenianasayfa.html adlı dosyayı bu sayfada açıyoruz. Bu sayfada frameli bir sayfa. Sonra bir fonksiyon tanımladık. ekle() adlı bu fonksiyon yeni bir document açıyor ve yeni bir belge açtık-yeni belgeyi kapattık şeklinde mesajları yazıyor.
Sayfayı incelemeye başlayalım. Sayfamızda bir form bulunuyor. Bu form ile altı adet buton oluşturduk. Butonların görevlerini daha sonra göreceğiz.

Aşağıdaki bölümü sayfa.html olarak kayıt edin.

<html>
<body>
sayfamiz bölümü
</body>
</html>

Aşağıdaki bölümü sayfa1.html olarak kayıt edin.

<html>
<body>
bu bölüm sayfamiz1 bölümü
</body>
</html>

Aşağıdaki bölümü yenianasayfa.html olarak kayıt edin.

<html>
<title>Frame kullanımı</title>
<frameset rows=*,*>
<frame src="yenisayfa.html" name="yeniSayfamiz">
<frame src="yenisayfa1.html" name="yeniSayfamiz1">
</frameset>
</html>

Bu bölümde iki frameli bir sayfa tanımladık. Framelerden birine yeniSayfamiz diğerine ise yeniSayfamiz1 adını verdik.

Aşağıdaki kodları yenisayfa.html olarak kayıt edin.

<html>
<body>
yeniSayfamiz bölümü
</body>
</html>

Aşağıdaki kodları yenisayfa1.html olarak kayıt edin.

<html>
<body>
bu bölüm yeniSayfamiz1 bölümü
</body>
</html>

Öncelikle hazırladığımız bu sayfaların ne işe yaradıklarını görmek için örneğimizi deneyelim.Fakat iyice konuyu anlamaya çalışın. Daha sonra frameler arası nasıl komut yolladığımızı göreceğiz.

Yorumlar (0) Add Comment