Üye Kayıt Üye Giriş

KATEGORİLER

JavaScript ile Popup Pencereleri


JavaScript ile Popup Pencereleri

 

Popup pencereleri bir sayfa içinde ek bir pencere açma işlemidir. Popup pencereler JavaScript kullanarak açılırlar.

Popup pencereler yaygın olarak reklam göstermek amacıyla kullanılır. Diğer bir kullanım amacı ise yardım sayfaları tasarlamak içindir. İhtiyacınız doğrultusunda farklı amaçlar için kullanılabilirler.

Popup pencereler; Sayfa yüklenmesinde,Sayfadan çıkıldığında,Kullanıcı bir linki tıkladığında açılabilir.

Sayfa yüklenirken veya kapatılırken bir popup açmak için body etiketi içine aşağıdaki kodu yazmanız yeterlidir.

Sayfa yüklenirken

?
1
<body onload="javascript: alert(Load işlemi!')">

Sayfa Kapatılırken

?
1
<body onunload="javascript: alert('UnLoad işlemi!')"

Link tıklandığında

?
1
<a href="javascript: alert('link Tıklandı!')">Popup Aç!</a>

Popup olarak yeni bir pencere açmak istiyorsak window.open() metodunu kullanırız. Window.open metodunu URL parametresine bir sayfanın adresini yazdığımızda bu sayfa popup içerisinde açılır, URL nesnesini boş bıraktığımızda ise boş bir popup pencere açılır.

window.open Metodunun Kullanımı

?
1
window.open(URL,Pencere_Adı [, Pencere_Özellikleri])

     -  URL : Yeni pencerede açılacak olan sayfanın URL bilgisi. Bu parametre boş olabilir.

     -  Pencere_Adi : Açılacak olan pencereye verilecek olan isim, bu isim açılan pencereye referans olarak kullanılabilir.

     -  Pencere_Özellikleri : Açılacak olan pencerenin özelliklerini belirleyeceğimiz string ifade. Bu parametre ile açılacak olan pencerenin durum çubuğu,adres çubuğu gibi özelliklerini ayarlayabiliriz.

Aşağıdaki kod standart özelliklere sahip bir popup penceresi açar

?
1
window.open("http://www.yazilimmutfagi.com", "yenipencere");

Remarkwindow.open() kullanarak açacağımız bir pencere popup engelleyicilere takılabilir.

Popup Pencerenin Özelliklerini Değiştirmek:

Window.open() metodunun son parametresini kullanarak açmak istediğiniz popup’ın özelliklerini değiştirebilirsiniz. Aşağıdaki kod durum çubuğu olan ve diğer özellikleri taşımayan bir popup açar.

?
1
2
window.open("http://www.yazilimmutfagi.com", "yenipencere", "status=1");

Popup pencerenin özelliklerini aşağıdaki listede bulunan parametreleri kullanarak değiştirebilirsiniz.

Parametre
Açıklama
status
Pencerenin altında bulunan durum çubuğu
toolbar
Browserın standart araç çubuğu. Örneğin ileri geri butonu.
location
Adres Çubuğu.
menubar
Pencerenin Menüsü
directories
Browserin standart klasör butonları.
resizable
Kullanıcı açılan popup boyutunu değiştirebilirmi.
scrollbars
Eğer açılan sayfa popup içine sığmazsa scroll bar çıkacakmı?
height
Pencerenin pixel cinsinden yüksekliği (Örneğin:height='350')
width Pencerenin pixel cinsinden genişliği (Örneğin:width='350')

Örnekler:

1 - Aşağıdaki kod menü barı olan bir pencere açar. Açılan pencere boyutu değiştirilebilir ve 350 pixel genişliğinde, 250 pixel yüksekliğindedir.

?
1
2
window.open("http://www.yazilimmutfagi.com",
"yenipencere","menubar=1,resizable=1,width=350,height=250");

2- Adres Çubuğu, durum çubuğu ve scroll bari olan 100x100 boyutunda bir popup açar.

?
1
2
3
window.open ("http://www.yazilimmutfagi.com","yenipencere",
"location=1,status=1,scrollbars=1, width=100,height=100");
     

Bir Popup pencereyi sayfanın istediğimiz pozisyonun da nasıl gösteririz?

Popup pencereyi ekranda istediğimiz bir yere taşımak için moveTo metodunu kullanırız.

?
1
2
3
4
5
function popuac() {
    yenipencere = window.open("http://www.yazilimmutfagi.com",
    "yenipencere","location=1,status=1,scrollbars=1,
    width=100,height=100"); yenipencere.moveTo(0,0);
}       

 

Yukarıdaki kod örneği sol üst köşede 100x100 boyutunda bir popup açar.

Yukarıda anlattığımız bilgileri kullanarak sayfa yüklendiğinde otomatik olarak açılan bir popup yapalım.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  <html>
    <head>
    <title>Popup Örnek</title>
    <script type="text/javascript">
     
        functionpoponload() {
            yenipencere = window.open("http://www.yazilimmutfagi.com",
            "yazilimmutfagi",
    "location=1,status=1,scrollbars=1,width=600,height=400");
            yenipencere.moveTo(0, 0);
        }
    </script>
    </head>
     
    <body onload="javascript: poponload()">
     
        
     
    </body>
</html>
 
  

 

Aşağıdaki kod bloğu sayfa kapandığı zaman bir popup açar ve popup içine document.write metodu ile sayfa kapanmıştır yazar.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
 
    <head>
     
        <title>Popup Örnek</title>
        <script type="text/javascript">
         
            functionpoponunload() {           
            yenipencere = window.open("", "yazilimmutfagi",          
            "location=1,status=1,scrollbars=1,width=400,height=300");           
            yenipencere.moveTo(0, 0);           
            yenipencere.document.write('<H1>Sayfadan Çıktınız!</H1>');            
            }       
        </script>   
     
    </head>
 
    <body onunload="javascript: poponunload()">
     
    </body>
</html>

 

Bilgisayar Dershanesi Ders Sahibi;
Bilgisayar Dershanesi

Yorumlar

Yorum Yapabilmek İçin Üye Girişi Yapmanız Gerekmektedir.

ETİKETLER

javascript ile popup pencereleri