Javascript - window.open - yeni pencere açma - PcTekno.NET | PTN

Konumunuz: Anasayfa

Javascript

Javascript - window.open - yeni pencere açma

Çarşamba, 04 Temmuz 2007

window.open

window.open() metodu yeni pencere açmak için kullanacağımız metoddur. Bu metodun bir çok parametresi var. Önce bir pencerenin nasıl açıldığını görelim ve sonrada bu parametreleri tanıyalım.
window.open("yenipencere.html"); yeni bir pencere açar ve içinde yenipencere.html adlı web sayfasını görüntüler. Bunu bir fonksiyon olarak tanımlayabilir ve fonksiyonu çağırtarak yeni pencere açtırabiliriz. Yada bir buton tanımlar ve buton üzerinden direkt olarakta pencereyi açtırabiliriz.

<form>
<input type="button" value="yeni pencere aç"
          onClick="window.open('yenipencere.html')">
</form>

Burada şu şekilde düşünebilirsiniz; zatan ben html tagları ile yeni bir pencere açabiliyorum Bu şekilde bir kullanıma ne gerek var? Evet bir bakıma doğru fakat javaScript ile yeni açılacak pencerenin bütün özellikleri üzerinde oynayabilir ve yeni açılan pencereye direkt olarak ana penceremizden komutlar gönderebiliriz.
Yeni pencere açarken kullanacağımız parametreleri görelim. Bunlar window nesnesinin kullanılabilen özellikleridir.

Parametre	Açıklama	Değer
width	Pencerenin genişliği	Pixel olarak
height	Pencerenin yüksekliği	Pixel olarak
toolbar	Toolbar çubuğunun gösterilmesi	yes/no
menubar	Menü çubuğunun gösterilmesi	yes/no
scrollbars	Kaydırma çubuklarının gösterilmesi	yes/no
location	Url çubuğunun gösterilmesi	yes/no
status	Sttus çubuğunun gösterilmesi	yes/no
directories	İkinci araç çubuğunun gösterilmesi	yes/no
resizable	Pencerenin büyütülüp küçültülmesi	yes/no
top	Üst kenara uzaklık	pixel olarak
left	Sol kenara uzaklık	pixel olarak

JavaScriptin 1.2 versiyonu ile daha yeni parametreler de eklendi. Bu paramereleri(alwaysLowered, screenX, screenY, outerWidth gibi) şu anda incelemeyeceğiz.
Öğrendiğimiz parametreleri uygulayarak bir pencere açmayı görelim.

 
<html>
<head>
<title>JavaScript nesneleri</title>
<script language="JavaScript">
<!-- gizle
function pencereAc()
        {
        window.open("deneme.html","yenisayfa",
"width=200, top=0, left=500, height=300,
status=yes, menubar=yes, resizable=yes");
        }
// gizleme sonu -->
</script>
</head>
<body>
<form>
<input type="button" value="pencere ac"
onClick="pencereAc()">
</form>
</body>
</html>

Açacağımız pencere için şu özellikleri belirledik, deneme.html yi gösterecek, yenisayfa adında, 200 pixel genişliğinde, 300 pixel yüksekliğinde, üstarafa yapışık, sol kenara 500 pixel uzaklıkta, menubar açık, status açık ve pencere büyütülüp küçültülebilir.

Ayrıca şunu belirteyim yes/no şeklinde belirlenen parametreler 1=açık, 0=kapalı şeklinde de gösterilebirler.
Pencerelere komut yollamak Açtığımız pencereye komutlar yollayabiliriz. Bu javaScriptin etkileşimliğinden ileri gelir. Bunun için öncelikle pencereyi bir nesne olarak tanımlayıp ona bir ad vereceğiz.

yeniPencere=window.open("","yeni","width=300, height=500");

Sonra pencereye bir html belgesi gireceğiz. Yani document. Bunu bir sayfa adresi vererek değil bunun yerine ana sayfamızdan gönderme yaparak yapacağız.

Bunun için önce yeni bir document nesnesi yeniPencere nesnesine açtıralım. open() metodunu kullanacağız.

yeniPencere.document.open();

yeniPencere ye bir html belgesi başlangıcı olduğunu belirtikten sonra bu sayfayı girelim.

 
yeniPencere.document.write("<html>");
yeniPencere.document.write("<head>");
yeniPencere.document.write("<title>yeni pencere</title>");
yeniPencere.document.write("</head>");
yeniPencere.document.write("<body>");
yeniPencere.document.write("<font size=4 color=green>");
yeniPencere.document.write("Pencereye yeni bir
sayfa açtırdık.");
yeniPencere.document.write("</font>");
yeniPencere.document.write("</body>");
document.write("</html>");