JavaScript: Popup Pencere

Popup Pencele kullanıcıya ek bir belgeyi göstermek için kullanılan en eski yöntemlerden biridir.

En basit kullanım şekli:


window.open('https://www.yazilimbilisim.net')

window.open('https://www.yazilimbilisim.net')

Sayfa yeni bir pencerede açılacaktır. Ancak modern tarayıcılarda yeni pencerede açmak yerine yeni sekmede açılması daha hoş olacaktır.

Popuplar AJAX yöntemi yokken çok kullanışlı bir araçtı. Artık verileri arkaplanda istediğimiz tüm etiketlere yüklemek mümkün olmaktadır.

Popuplar ile ilgili en sinir bozucu kısımda bazen bir siteye girdiğinizde otomatik yeni reklam pencereleri açmasıdır. Bu tip kötü kullanımlar için artık tarayıcılar genellikle açılmak istenen popup penceresinin gizlendiği uyarısını vermektedir.

Ancak bu probleme rağmen bir popup penceresi yine de bir sitede işlevsel bir şekilde kullanılabilir.

Online hizmet veren bir sitede danışmandan canlı destek almak için kullanılabilir. Bu şekilde sitenin genel işleyişine ve görünüşüne karışmadan sohbet çalıştırılmış olur. Bu şekilde sitelere eklemek hem daha kolay olacaktır.

Yazım Kural:

window.open(adres,isim,parametreler)

isim:açılacak olan yeni pencere için bir isim. pencere tekrar kullanılacaksa isim vermek önemli
adres:açılmak istenen yeni pencere
parametreler:yeni pencerenin ayarları girilir. virgüllerle ayrılır (boşluk yok). Pencere ile ilgili tüm ayarlar aşağıdadır.
- left: (Sayı) soldan ne kadar boşlukta açılacağı
- top: (Sayi) üstten ne kadar boşlukta açılacağı
- width(Sayı):pencere genişliği
- height (Sayı):pencere yüksekliği
- menubar (yes/no):tarayıcı menü çubuğu olacak mı.
- toolbar (yes/no):tarayıcı ileri geri tolbar olacak mı
- location (yes/no):url adresi gizlensin mi(tarayıcılar güvenlik nedeniyle destek vermiyor)
- resizable (yes/no):pencere boyutu değiştirilebilir olsun mu

Daha fazla özellik için:https://developer.mozilla.org/en-US/docs/Web/API/Window/open


var adres="https://www.yazilimbilisim.net";
var ayarlar = 'width=100,height=100,left=250,top=100,scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no'

window.open(adres, 'ornek', ayarlar);

var adres="https://www.yazilimbilisim.net";

var ayarlar = 'width=100,height=100,left=250,top=100,scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no'

window.open(adres, 'ornek', ayarlar);

[divider]

Yeni Pencere Açıp Düzenleme:

Yeni pencere açıp, penceredeki etiketleri ve ayarları düzenleyebiliriz. yeni pencereye verilen isim üzerinden açıp her türlü düzenleme yapmak mümkündür. Aşığıdaki iki örnekte de değişken ismi olarak pencere ismi kullanılmıştır.

test.html :Örnek olarak test.html adında bir sayfayı açmak istiyoruz. test.html sayfasının içeriği aşağıdaki gibi olsun.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

</body>

</html>

JS KODLARI:window.open komutunu çalıştıracağımız sayfadaki javascript kodlarımızda şu şekilde olsun


var pencere = window.open('test.html', 'orneksayfa', 'width=300,height=300')
pencere.focus()
pencere.onload = function() {
var h1 = pencere.document.createElement('h1') 
h1.innerHTML = ' TEST SAYFASINA H1 ETİKETİNİ YAZDIRDIM'
h1.style.color = 'red';
pencere.document.body.insertBefore( h1, pencere.document.body.firstChild ) 
}

var pencere = window.open('test.html', 'orneksayfa', 'width=300,height=300')

pencere.focus()

pencere.onload = function() {

var h1 = pencere.document.createElement('h1')

h1.innerHTML = ' TEST SAYFASINA H1 ETİKETİNİ YAZDIRDIM'

h1.style.color = 'red';

pencere.document.body.insertBefore( h1, pencere.document.body.firstChild )

}

[divider]

Örnek 2: Her tıklamada aynı popup penceresine bir satır ekleyen kod


<html>
<head>
<title>JavaScript Popup ÖRNEK</title>
</head>

<script type="text/javascript">

var sayi=0;

function popupYazdir()
{
sayi++;
pen = window.open("", "pencerem", "status=1,width=350,height=350");
pen.document.write('<h1>'+sayi+'. Satır</h1>');
}
</script>

<body>
<h1>Her tıklamada popup penceresine yeni bir h1 etiketi ekleyecektir.</h1>
<button onclick="popupYazdir()">TIKLA SATIR EKLE</button>
</body>
</html>

<html>

<head>

<title>JavaScript Popup ÖRNEK</title>

</head>

var sayi=0;

function popupYazdir()

{

sayi++;

pen = window.open("", "pencerem", "status=1,width=350,height=350");

pen.document.write('<h1>'+sayi+'. Satır</h1>');

}

</script>

<body>

<h1>Her tıklamada popup penceresine yeni bir h1 etiketi ekleyecektir.</h1>

<button onclick="popupYazdir()">TIKLA SATIR EKLE</button>

</body>

</html>

[divider]

YENİ SEKMEDE AÇMA: JavaScript ile Sayfayı Yeni Sekmede Açma: window.open metoduna ‘_blank’ parametresini geçmek gerekiyor.


<script>

var pencere = window.open('https://www.yazilimbilisim.net','_blank');

</script>

var pencere = window.open('https://www.yazilimbilisim.net','_blank');

</script>

Faydalanılan Kaynaklar:

http://stackoverflow.com/questions/19851782/how-to-open-a-url-in-a-new-tab-using-javascript-or-jquery

http://javascript.info/tutorial/popup-windows#the-syntax-of-window-open

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml

Yazım Kural:

Bunu paylaş:

İlgili

İlginizi Çekebilir

Yorum Yap X