JavaScript Popup Pencere Açmak, window.open Metodunun Kullanimi

JavaScript ile Popup Pencereleri

Popup pencereleri bir sayfa içinde ek bir pencere açma islemidir. Popup pencereler JavaScript kullanarak açilirlar.

Popup pencereler yaygin olarak reklam göstermek amaciyla kullanilir. Diger bir kullanim amaci ise yardim sayfalari tasarlamak içindir. Ihtiyaciniz dogrultusunda farkli amaçlar için kullanilabilirler.

Popup pencereler; Sayfa yüklenmesinde,Sayfadan çikildiginda,Kullanici bir linki tikladiginda açilabilir.

Sayfa yüklenirken veya kapatilirken bir popup açmak için body etiketi içine asagidaki kodu yazmaniz yeterlidir.

Sayfa yüklenirken

    <body onload="javascript: alert(Load islemi!')">

Sayfa Kapatilirken

    <body onunload="javascript: alert('UnLoad islemi!')"

Link tiklandiginda

    <a href="javascript: alert('link Tiklandi!')">Popup Aç!</a>

Popup olarak yeni bir pencere açmak istiyorsak window.open() metodunu kullaniriz. Window.open metodunu URL parametresine bir sayfanin adresini yazdigimizda bu sayfa popup içerisinde açilir, URL nesnesini bos biraktigimizda ise bos bir popup pencere açilir.

.

window.open Metodunun Kullanimi

    window.open(URL,Pencere_Adi [, Pencere_Özellikleri])
  • URL : Yeni pencerede açilacak olan sayfanin URL bilgisi. Bu parametre bos olabilir.
  • Pencere_Adi : Açilacak olan pencereye verilecek olan isim, bu isim açilan pencereye referans olarak kullanilabilir.
  • Pencere_Özellikleri : Açilacak olan pencerenin özelliklerini belirleyecegimiz string ifade. Bu parametre ile açilacak olan pencerenin durum çubugu,adres çubugu gibi özelliklerini ayarlayabiliriz.

Asagidaki kod standart özelliklere sahip bir popup penceresi açar

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

Remarkwindow.open() kullanarak açacagimiz bir pencere popup engelleyicilere takilabilir.

Popup Pencerenin Özelliklerini Degistirmek:

Window.open() metodunun son parametresini kullanarak açmak istediginiz popup’in özelliklerini degistirebilirsiniz. Asagidaki kod durum çubugu olan ve diger özellikleri tasimayan bir popup açar.

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

Popup pencerenin özelliklerini asagidaki listede bulunan parametreleri kullanarak degistirebilirsiniz.

Parametre
Açiklama
status
Pencerenin altinda bulunan durum çubugu
toolbar
Browserin standart araç çubugu. Örnegin ileri geri butonu.
location
Adres Çubugu.
menubar
Pencerenin Menüsü
directories
Browserin standart klasör butonlari.
resizable
Kullanici açilan popup boyutunu degistirebilirmi.
scrollbars
Eger açilan sayfa popup içine sigmazsa scroll bar çikacakmi?
height
Pencerenin pixel cinsinden yüksekligi (Örnegin:height='350')
width Pencerenin pixel cinsinden genisligi (Örnegin:width='350')

Örnekler:

1 – Asagidaki kod menü bari olan bir pencere açar. Açilan pencere boyutu degistirilebilir ve 350 pixel genisliginde, 250 pixel yüksekligindedir.

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

2- Adres Çubugu, durum çubugu ve scroll bari olan 100×100 boyutunda bir popup açar.

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

Bir Popup pencereyi sayfanin istedigimiz pozisyonun da nasil gösteririz?

Popup pencereyi ekranda istedigimiz bir yere tasimak için moveTo metodunu kullaniriz.

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

Yukaridaki kod örnegi sol üst kösede 100×100 boyutunda bir popup açar.

Yukarida anlattigimiz bilgileri kullanarak sayfa yüklendiginde otomatik olarak açilan bir popup yapalim.

  <html>
    <head>
    <title>Popup Örnek</title>
    <script type="text/javascript">
    
        function poponload() {
            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>

  
  

Asagidaki kod blogu sayfa kapandigi zaman bir popup açar ve popup içine document.write metodu ile sayfa kapanmistir yazar.

.
   
<html>

    <head>
    
    	<title>Popup Örnek</title>
        <script type="text/javascript">
        
            function poponunload() {            
            yenipencere = window.open("", "yazilimmutfagi",           
            "location=1,status=1,scrollbars=1,width=400,height=300");            
            yenipencere.moveTo(0, 0);            
            yenipencere.document.write('<H1>Sayfadan Çiktiniz!</H1>');             
            }        
        </script>    
    
    </head>

    <body onunload="javascript: poponunload()"> 
    
    </body>
</html>
 

13 thoughts on “JavaScript Popup Pencere Açmak, window.open Metodunun Kullanimi

  1. tabiki yapabilrisiniz.  js ile cozunurlulugu alyr, buna gorede dynamyk bir yer belirlersiniz. Zaman olursa yapar eklerim buraya. Yada yapan varsa ve paylasyrsa sevynyryz.

    gezgin2013-04-19 07:58:06

  2. Selam popup pencerenin nerede açylaca?yny açyklamy?synyz ama her kullanycyya uymasy için çözünürlük olarak de?ilde center koduyla yapabilir miyiz ? Te?ekkürler

  3. Selam.  Ben siteme soundcloud (iframe) icerikli bir popup penceresi eklemek istiyorum. yardim ederseniz sevinirim. tesekkurler.
      Mesela sitenizin yorum preview’u gibi.
    mskunt2013-01-06 03:37:25

  4. ya benim bir radyo sitem var http://www.radyogumbur.blogspot.com   ben buna radyo fenomen deki gibi  Bir resim olsun istiyorum o resime tiklayinca radyom ayri bir pencerede açilsin ( birkaç sey denedim ama onlar yeni sekmede açiyordu ) istiyorum lütfen yardim eder misiniz?…

  5.  linki koydugun sayfada kod eklemeden popup açamazsin, seninki siradan bir link olur. kod koymak istememenin sebebi nedir ? linki koydugun sayfanin kod kismina erisemiyormusun ?

  6. s.a    arkaslar    yeni acilacak olan  sayfanin linkini  anasayfaya  koydum  ve o acilacak sayfayi  kücük  boyutta acmak  istiyorum  ama  yanliz   linki koydugum sayfaya   kod   koymadan    bunu  baska  türlü nasil  hallederim   yeni acilacak  sayfaya  kod   koya bilirim vede  css  den de  bu islemi yapa biliyormuyuz  yardimci  olursaniz sevinirim  iki gündür ugrasiyorum takildim  kaldim 

     

  7. popup acilmasini istedigin sayfada. pageload içinde if(!ispostback) içine dinamik olarak sayfaya popup acilma kodunu eklek. boylece sadece bu sayfada bir kez popu acilmis olur.

  8. Bende her seferinde popup açilmasini istemiyorum sadece bir kere sayfa açildiginda açilsin ama baska sayfalarda dolasirken tekrar tekrar açilmasin umarim yardimci olabilirsiniz tesekkürler..

  9. mrb ben biraz acemiyim , çözüm önerinizi bir türlü yapamadim yardimci olursaniz http://www.ihaleci.org bir sitem var ve bu siteyi blogger üzerinden yaptim benim sikintim su live msn nin sayfa açildiginda bagimsiz açilmasini istiyorum veya sayfada sabit kalmasini çünki sayfa degisimlerinde baglanti kopuyor ve sürekli kullaniciya uyarida bulunuyor yardimci olursaniz saygilar.

    mskunt2013-01-06 03:37:50

  10. bende bi butona basilinca 15 tane benim belirledigim sitelerin tek seferde acilmasini istiyorum

  11. Valla sakama maka bircok  yerde  popup buldum ise yaramadi ama sagol sizinkisi yaradi tesekkür ederiz

    🙂

Guests için bir cevap yazın Cevabı iptal et

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir