MaxiASP Kategori  [Java Script]

  Konu Başlığı | JavaScript ile pencere açmak |
  Gönderen     | budra | Mail  bugra299@gmail.com
  Bu yazıyı toplam 18489 kişi okudu.  
  her ne kadar bilinen bir şey de olsa benim ilk başlarken oldukça ihtiyaç duyduğum ve sağdan soldan c/p yaptığım bir olaydır :) hazır boş vaktim varken buraya da bir popup kodu yazayım dedim.

öncelikle, pop up açmanın temelinde window.open komutu yatar. bu komutu kullanırken 3 tane parametre gireriz. bunlardan biri gösterilecek sayfayının URLsini, birisi sayfanın nerede açılacağını, sonuncusu da diğer özellikleri girdiğimiz parametredir. örnek göstermek gerekirse :

<!-- kod başlangıcı -->

<script language="javascript" type="text/javascript">
window.open('http://www.maxiasp.com/', '_self', 'scrollbars=0, top=10, left=50, width=500, height=500, buttons=no, location=no, menubar=no, resizable=no, status=no, directories=no, toolbar=no')
</script>

<!-- kod sonu -->

buradaki kodlardan biraz bahsedelim. görüldüğü gibi, ilk parametreye açılacak sayfayı yazdık. (bu, images/urunler/0225603.jpg gibisinden bir şey de olabilirdi.) daha sonra sayfanın nerede gözükeceğini yazdık. burada yazılana göre, açılacak yeni pencerenin içinde görüntülenecek. (_parent yazdığımızda ise popup açılmıyor, popupu açacak sayfada görüntüleniyor. burası boş bırakılsa da _self yazmak ile aynı işi görüyor.) ve sonra da, en uzun parametre. buraya göre, scrollbars 0,1,auto değerlerini alabilir. 0 olursa scrollbar olmaz falan filan bunlardan fazla söz etmeye gerek olduğunu sanmıyorum aynı şekilde buttons, location, menubar, resizable gibi şeylerle de oynayabilirsiniz. burada değinmek istediğim şey ise; top, pencerenin ekranın üstünden kaç px aşağıda olacağını, left ise pencerenin ekranın solundan kaç px içeride olacağını ayarlar. aynı şekilde sayfanın yükseklik ve genişliğini de buradaki width ve height değerlerini değiştirerek ayarlayabilirsiniz.

window.open komutunu bir değişkene atıp yerini ayarlayabilir ya da üzerinde daha farklı işlemler yapabilirsiniz.

örnek:

<!-- kod başlangıcı -->

<script language="javascript" type="text/javascript">
var benimPencerem = window.open('', '', 'scrollbars=0, top=10, left=50, width=500, height=500, buttons=no, location=no, menubar=no, resizable=no, status=no, directories=no, toolbar=no');
benimPencerem.location.href = 'http://forum.maxiasp.com/';
</script>

<!-- kod sonu -->

üzerinde farklı işlemler yapmak için:

<!-- kod başlangıcı-->

<script language="javascript" type="text/javascript">
var benimPencerem = window.open('', '', 'scrollbars=0, top=10, left=50, width=500, height=500, buttons=no, location=no, menubar=no, resizable=no, status=no, directories=no, toolbar=no');

function pencereyeYazdir(yazi)
{
benimPencerem.document.write(yazi);
}

function pencereyiKapat()
{
benimPencerem.close();
}
</script>

<input type="textbox" value="Yazı girin" name="kutu">
<input type="button" value="Yazdır" onclick="pencereyeYazdir(kutu.value)">
<br>
<input type="button" value="Pencereyi kapat" onclick="pencereyiKapat()">

<!-- kod sonu -->

Görüldüğü gibi window.open ile açılan pencere ile çeşitli işlemler de yapılabiliyor. ben birkaç örnek yazdım. örnekler arttırılabilir.

Umarım bu konuda faydalı bir yazı olmuştur. Herkese iyi çalışmalar dilerim.

Not: <!-- kod başlangıcı --> ile <!-- kod sonu --> arasındaki kodları bir html dosyasına kopyalayıp test edebilirsiniz.


  Bu yazıya puan                                                                    kapat