Javascript Popup Pencere Açmak - Ekrana Ortalama - Veri Çekme

Javascript popup pencere açmak, özelliklerini kullanmak, sayfaya ortalı popup pencere açmak ve popup pencere içerisinden açılan sayfadan veri çekmek gibi konuları göreceğiz. Javascript ile açılır pencere yapımı için JS fonksiyonlarından windows.open kullanımı gereklidir.

Ayrıca konu ile alakalı olarak sayfa içerisinde tasarımını düzenleyebileceğiniz açılır pencere açmak istiyorsanız jquery modal popup yapımı konulu yazmış olduğum içeriğe göz atabilirsiniz.

Aşağıdaki yapı windows.open komutunun en basit halidir ve ilk parametresine girilen bağlantı yolundaki sayfayı yeni pencere halinde açacaktır.

window.open("https://www.muhammedyaman.com");
window.open("sayfa/index2.php");

Popup pencere içerisinde bir sayfa açmak yerine kendi istediğiniz içeriği göstermek isteyebiliriz. İlk parametreyi boş bırakarak içerisinde web sayfası açılmamasını sağlar ve ardından pencerenin içeriğini aşağıdaki örnekte olduğu gibi document.write fonksiyonu ile istediğimiz şekilde oluştururuz.

var pencere = window.open("","Pencere Ismi", "width=400,height=400");
pencere.document.write("Yeni Sayfa. Ismi: "+pencere.name+""); //pencerenin icerigine yaz

İkinci parametrede aşağıdaki komutlar kullanılabilir.

• _blank – Yeni pencere açar, varsayılan değerdir.
• _parent – Ana çerçevede yüklenir
• _self – Açılan sayfanın yerine geçer, içeriğini değiştirir.
• _top – Bütün çerçeveler yerine geçer
• name – Pencere ismidir. Ancak açılan popup pencerenin başlığını değiştirmez

Üçüncü
parametrede genişliği, yüksekliği, kaydırma çubuğu, yeniden
boyutlandırma gibi özellikler belirtilebilir.

• top – Pencerenin yukarıdan aşağı konumu
• left – Pencerenin soldan sağa konumu
• height – Pencere yüksekliği. (Piksel)
• weight – Pencere genişliği. (Piksel)
• menubar – Menü çubuğu aktifliği (yes, no, 1, 0)
• location – Adres alanı aktifliği. Sadece Opera tarayıcısında çalışır. (yes, no, 1, 0)
• resizable – Pencerenin yeniden boyutlandırılabilirliği. Sadece İnternet Explorer tarayıcında çalışır. (yes, no, 1, 0)
• scrollbar – Kaydırma çubuğu aktifliği – Sadece İnternet Explorer, Firefox ve Opera üzerinde çalışır.
• status – Durum çubuğu aktifliği
• titlebar – Başlık çubuğunun aktifliği. Çağrılan dosya html sayfası veya güvenli pencere değil ise çalışmaz.
• Toolbar – Tarayıcı araç çubuğu aktifliği. Sadece İnternet Explorer ve Firefox tarayıcılarında çalışır.

Sayfaya Ortalamalı Popup Pencere Açma

Sayfaya ortalanmış halde istenilen boyutta javascript popup pencere açmak için aşağıdaki fonksiyonu kullanabiliriz.

function PopupCenter(url, title) {
	var w = 1090; //pencere genislik
	var h = 600; //pencere yukseklik
	/*sayfaya ortala*/
	var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
	var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
	var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
	var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
	var left = ((width / 2) - (w / 2)) + dualScreenLeft;
	var top = ((height / 2) - (h / 2)) + dualScreenTop;
	/*--------------*/
	window.open(url, title, 'scrollbars=yes, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left); //pencereyi ac
}

Butona tıklayınca popup açmak için onclick özelliğine aşağıdaki şekilde fonksiyonu yazabiliriz. Böylelikle tıklama ile sayfaya ortalı olacak şekilde pencere açılacak ve muhammedyaman.com sitesi pencere içerisinde açılacak. Sunucu içerisindeki bir sayfayı da aynı yöntemle açabiliyoruz.

PopupCenter('http://www.muhammedyaman.com','Pencere Ismi');
PopupCenter('sayfa/index2.php','Pencere Ismi');

Popup Pencerede Açılan Sayfadan Veri Alma

Sunucu üzerinde, kendi sitemizden popup pencere üzerinde açılan
sayfadan veri çekme ve pencerenin açıldığı sayfa üzerinde
işlem yapmayı göreceğiz.

Pencere içerisinde açılan sayfa içeriği aşağıdaki gibidir.

	
		
	
	
		
Tıkla ve Gonder
	

Butona tıklanıldığında, bu sayfayı popup pencere içerisinde açan sayfada ‘isim’ ve ‘soy_isim’ id li elemanların içeriğini ‘Muhammed’ ve ‘Yaman’ olarak değiştiriyoruz. Bu sayfayı popupta açan sayfaya windows.opener komutuyla ulaşıyoruz. Sayfadaki bir elemanı seçmek için de document.getElementById(‘isim’) fonksiyonunu kullanıyoruz. Örnek olarak aşağıdaki kod ile pencereyi açan sayfayı yenileyebiliyoruz.

window.opener.location.reload();

Ardından pencereyi windows.close() fonksiyonuyla kapatıyoruz.

Not: Popup pencerede açılan sayfadan veri çekme işlemi yaparken Blocked a frame of origin “null” from accessing a cross-origin frame hatası çıkıyor ise bunun sebebi: Bir önceki sayfaya veri gönderimi yapılması için popup pencere isteği gönderen sayfa ile popup pencere üzerinde açılan sayfanın aynı bilgisayarda veya sunucuda olmasının gerekliliğindendir. CORS (Cross-Origin Request Specification) şeklinde adlandırılan güvenlik önleminden dolayı böyle bir hata çıkar. Bu yüzden html uzantılı dosyalar üzerinde bu kodlar deneniyorsa veri alışverişi olmaz. PHP veya ASPNET gibi dosyalarda aynı sunucu üzerinden yapılan isteklerde veri alışverili sorunsuz gerçekleştirilir.