JavaScript Pencere Nesnesi (Window Object)

window, tarayıcı sekmesinin/pencerenin en üst (global) nesnesidir. Sayfa yüklenmesi, URL yönlendirme, açılır pencere yönetimi, zamanlayıcılar, ekran ölçüleri ve bazı tarayıcı API’lerine erişim gibi işlemler bu nesne üzerinden yapılır.

1) Window ile en sık kullanılan alanlar

2) window.open() ile yeni pencere/sekme açma

window.open(url, target, features) ile yeni bir pencere/sekme açılır. Modern tarayıcılar pop-up engelleyici nedeniyle bu işlemi genellikle sadece kullanıcı etkileşimi (tıklama gibi) sırasında izin verir.

// Güvenli kullanım örneği:
const win = window.open(
  "https://example.com",
  "_blank",
  "noopener,noreferrer,width=900,height=650,left=80,top=60"
);

// Bazı tarayıcılarda pop-up engellenirse win null dönebilir:
if (!win) {
  alert("Pop-up engellendi. Lütfen tarayıcı ayarlarından izin verin.");
}

3) Açılan pencereyi yönetme (yazdırma / kapatma)

Açılan pencereyi kontrol etmek için window.open’dan dönen referans kullanılır. Ancak güvenlik nedeniyle her siteye içerik yazdırmak mümkün olmayabilir (cross-origin).

let popup;

function pencereAc() {
  popup = window.open("", "BenimPencerem", "width=420,height=240,noopener");
  if (!popup) return alert("Pop-up engellendi!");

  // Aynı origin ise yazdırabilirsiniz (boş pencere açtığımız için genelde mümkün)
  popup.document.write("<h3>Merhaba!</h3>");
  popup.document.write("<p>Bu içerik yeni pencerede yazdırıldı.</p>");
}

function pencereKapat() {
  if (popup && !popup.closed) popup.close();
}

4) Tarayıcı / ortam bilgilerini almak (navigator)

Eskiden navigator.appName, appVersion gibi alanlar kullanılırdı. Günümüzde bunlar çoğu tarayıcıda benzer/yanıltıcı olabilir. Aşağıdaki örnek daha pratik ve günceldir.

function ortamBilgisi() {
  let s = "";
  s += "Dil: " + navigator.language + "\\n";
  s += "Platform: " + (navigator.platform || "Bilinmiyor") + "\\n";
  s += "UserAgent: " + navigator.userAgent + "\\n";
  s += "Viewport: " + window.innerWidth + "x" + window.innerHeight + "\\n";
  s += "Screen: " + screen.width + "x" + screen.height + "\\n";

  // Chromium tabanlı tarayıcılarda yeni alan (varsa)
  if (navigator.userAgentData) {
    s += "UAData Mobile: " + navigator.userAgentData.mobile + "\\n";
  }

  alert(s);
}

5) location ile yönlendirme ve URL parçalama

// Mevcut URL
console.log(location.href);

// Yönlendirme (aynı sekme)
function git() {
  location.href = "https://example.com";
}

// Yenileme
function yenile() {
  location.reload(); // cache davranışı tarayıcıya göre değişebilir
}

// URL parçaları
console.log(location.protocol); // https:
console.log(location.host);     // domain:port
console.log(location.pathname); // /sayfa
console.log(location.search);   // ?a=1&b=2

const qs = new URLSearchParams(location.search);
const id = qs.get("id");
const secim = qs.get("secim");
console.log({ id, secim });

6) history ile ileri / geri

function geriGit() {
  history.back();         // bir önceki sayfa
  // history.go(-1);       // aynı iş
}

function ileriGit() {
  history.forward();      // bir sonraki sayfa
  // history.go(1);
}

7) window resize / scroll eventleri

Kullanıcı pencereyi büyütüp küçülttüğünde veya sayfayı kaydırdığında tetiklenir. Performans için “her pikselde” çalışır gibi düşün: basit throttling kullanmak iyi olur.

let t = 0;

window.addEventListener("resize", () => {
  clearTimeout(t);
  t = setTimeout(() => {
    console.log("Yeni viewport:", window.innerWidth, window.innerHeight);
  }, 150);
});

window.addEventListener("scroll", () => {
  // Çok sık tetiklenir, ağır işlem koyma!
  // console.log(window.scrollY);
});

8) Mini Demo: Sayfada Kullan (Butonlar)

<button id="btnInfo">Ortam Bilgisi</button>
<button id="btnOpen">Yeni Pencere Aç</button>
<button id="btnClose">Pencereyi Kapat</button>

let popup;

document.addEventListener("DOMContentLoaded", () => {
  document.getElementById("btnInfo").addEventListener("click", ortamBilgisi);

  document.getElementById("btnOpen").addEventListener("click", () => {
    popup = window.open("", "DemoPencere", "width=420,height=240,noopener");
    if (!popup) return alert("Pop-up engellendi!");
    popup.document.write("<h3>Demo Pencere</h3><p>İçerik JS ile yazıldı.</p>");
  });

  document.getElementById("btnClose").addEventListener("click", () => {
    if (popup && !popup.closed) popup.close();
  });
});