Kişisel bir web günlüğü

Web standartlarına uygun yeni pencere açtırmak

Pencere Web sayfaları hazırlarken eskisi gibi başına buyruk kodlama devri gerilerde kaldı. Artık web standartlarına uymak, web standartlarının belirlediği kurallar çerçevesinde kodlama yapmak çok önemli. Bunun için de eskiden kullandığımız fakat şimdi terk etmek zorunda olduğumuz bazı kodlar var. Bu kodlardan birisi de a etiketi içerisinde yeni bir pencere açtırmak için kullandığımız target="_blank" kodu. Tamam, web standartlarına uymak açısından bu kodu terk edelim ama bu kod olmadan da nasıl yeni bir pencere açtıracağız?

Güle güle "target"

Web standartlarını belirleyen W3 konsorsiyumu, bizim standartlara uygun kodlama yapabilmemiz için daha katı kuralları olan HTML 4.0 Strict ve XHTML 1.0 Strict sürümlerini yayınlamıştır. Bu sürümlerde target özniteliği çıkartılırken rel isminde başka bir öznitelik eklenmiş. Her ne kadar rel özniteliğinin esas amacı linklere yeni bir pencere açtırmak değilse de biz onu birazcık JavaScript ile destekleyip yeni bir pencere açabilecek hale getireceğiz.

İlk önce eski yöntem ile yani target="_blank" kodu ile nasıl yeni bir pencere açtırdığımızı hatırlayalım. Eski yöntemde bir linke yeni bir pencere açtırmak için target özniteliğine _blank değerini atardık. Aynen alttaki kodda olduğu gibi...

<a href="yeni.html" target="_blank">Yeni Bir Pencere Aç</a>

Yeni yöntemde ise rel özniteliğine external değerini atıyoruz. Hem böylece web sayfalarındaki linkleri 2 ana gruba ayırmış da oluyoruz. Kendi web sitemizdeki sayfalar arasında geçişi sağlayan iç linkler internal olarak adlandırılırken, başka web sitelerindeki sayfalara geçişi sağlayan dış linkler de external olarak adlandırılmış oluyor ;)

Artık yeni pencere açtırmak istediğimiz linkleri alttaki örnek kodda olduğu gibi düzenlemeliyiz.

<a href="yeni.html" rel="external">Yeni Bir Pencere Aç</a>

Birazcık JavaScript

Son yazdığımız rel="external" kodlu linke tıkladığınızda yeni bir pencere açılmadığını göreceksiniz. Çünkü daha önce de dediğim gibi rel özniteliğinin esas amacı linklere yeni bir pencere açtırmak değil. Yaptığımız işlem, rel="external" kodunu kullanarak web sayfamızdaki hangi linklerin external (harici) olduğunu işaretlemek. JavaScript kullanarak işaretlediğimiz bu linklerde düzenleme yaparak yeni pencere açmalarını sağlayacağız.

  1. function HariciLinkler() {
  2.  
  3. }

İlk önce boş olarak JavaScript fonksiyonumuzu oluşturduk. Tüm işlemleri bu fonksiyon içerisinde yapacağız.

  1. if (!document.getElementsByTagName) return;
  2.     var linkler = document.getElementsByTagName("a");
  3.     var linklerAdet = linkler.length;

Daha sonra web sayfamızdaki bütün a etiketlerini yakaladık. Yakalama işlemini getElementsByTagName kodu ile yapıyoruz. Bu kodun anlamı "elemanları etiket ismine göre al" demek. Bu kod web sayfamızdaki bütün a etiketlerini yakalıyor ve bellekte bir dizi (array) halinde saklı tutuyor. Yalnız bazı eski web tarayıcııları (IE 4 gibi) bu kodu desteklemiyor. Bu yüzden ilk satırda if ile bu kodun çalışıp çalışmadığını test ettik. En son satırda ise yakalanmış olan link adetini, linklerAdet değişkenine kaydediyoruz. Örneğin 50 tane link yakalandıysa, bu değişkenin değeri 50 oluyor.

  1. for (var i=0; i<linklerAdet; i++) {
  2.         var tekLink = linkler[i];
  3.         if(tekLink.getAttribute("href") && tekLink.getAttribute("rel") == "external") {
  4.             tekLink.target = "_blank";
  5.         }
  6.     }

Üstte ise bir for döngüsü açtık. Bu döngü, linklerAdet değişkeninin değeri kadarı dönecek. Bir başka değişle web sayfamızda kaç tane a etiketi varsa o kadar... Döngüyü açtıktan sonra yaptığımız işlem, linkler değişkeninde dizi (array) halinde tutulan linkleri teker teker almak. Sonrasında aldığımız her bir linkin iki özniteliğine bakıyoruz. Eğer bir a etiketi, hem href özniteliği taşıyorsa hem de rel özniteliğinin değeri external ise işleme alıyoruz. Yaptığımız işlem ise target="_blank" etkisi yaratmaktan ibaret.

Artık HariciLinkler fonksiyonumuz hazır olduğuna göre şimdi sıra onu çalıştırmaya geldi. Bu fonksiyonu web sayfamız yüklenir yüklenmez çalıştırmak için JavaScript'tin onLoad olayına atamamız gerekiyor. Bu yüzden alttaki kodu kullanıyoruz.

window.onload = HariciLinkler;

Artık JavaScript ile işimiz bitti. Yukarıda yaptığımız kodların tamamına derli-toplu bir halde bakalım. Alttaki kodu olduğu gibi web sayfanızın <script></script> etiketleri arasına yerleştirmeniz yeterli olacaktır. Daha da güzeli bir JavaScript dosyasına kaydetmeniz ve <script type="text/javascript" src="kodlar.js"></script> şeklinde kullanmanız.

  1. function HariciLinkler() {
  2.     if (!document.getElementsByTagName) return;
  3.     var linkler = document.getElementsByTagName("a");
  4.     var linklerAdet = linkler.length;
  5.    
  6.     for (var i=0; i<linklerAdet; i++) {
  7.         var tekLink = linkler[i];
  8.         if(tekLink.getAttribute("href") && tekLink.getAttribute("rel") == "external") {
  9.             tekLink.target = "_blank";
  10.         }
  11.     }
  12. }
  13.  
  14. window.onload = HariciLinkler;

Birazcık da görsellik

Aslında yapmamız gerekenleri yaptık. rel="external" ile işaretlenmiş olan linkleri JavaScript yardımıyla yeni pencede açma özelliği kazandırdık. Ve bunu web standartları çerçevesinde yaptık. Fakat yazının başında linkleri 2'ye ayırmıştık hatırlarsanız. İç linklere internal, dış linklere ise external demiştik. Bu noktada biraz da web sayfamızı kullananları düşünmeliyiz. Şu durumda kullanıcılar, web sayfamızın kaynak kodlarını görüntülemeden hangi linklerin internal, hangi linklerin external olduklarını anlayamazlar. Kullanıcıların, hangi linklere tıkladıklarında yeni bir tarayıcı penceresinin açılacağını önceden bilmeleri yerinde olur. İşte bu yüzden external olan linkleri JavaScript ve CSS kullanarak internal linklerden ayıracağız. Bu sayede kullanıcılar, hangi linklerin external olduğunu kolayca anlayabilecekler.

External ve Internal linkler

Kodlamaya geçmeden önce üstteki resim hakkında konuşalım. Resimde 2 tane link görüyorsunuz. Bunların hangisinin internal, hangisinin external olduğunu söyleyebilir misiniz? Elbette söyleyebilirsiniz :) İkinci linkin yanındaki küçük resim herşeyi anlatıyor. İşte biz de şimdi bu etkiyi yaratacağız. Yani external linklerin yanına küçük bir "yeni pencerede aç" resmi ekleyeceğiz.

  1. function HariciLinkler() {
  2.     if (!document.getElementsByTagName) return;
  3.     var linkler = document.getElementsByTagName("a");
  4.     var linklerAdet = linkler.length;
  5.    
  6.     for (var i=0; i<linklerAdet; i++) {
  7.         var tekLink = linkler[i];
  8.         if(tekLink.getAttribute("href") && tekLink.getAttribute("rel") == "external") {
  9.             tekLink.target = "_blank";
  10.            
  11.             // küçük resim ekle
  12.             tekLink.style.background = "url(yeni_pencere.gif) right center no-repeat";
  13.             tekLink.style.paddingRight = "20px";
  14.             tekLink.style.marginRight = "2px";
  15.         }
  16.     }
  17. }
  18.  
  19. window.onload = HariciLinkler;

style.background ile resim dosyasının yolunu ve pozisyonunu bildiriyoruz.
Eklediğimiz resmin linke yapışmaması için paddingRight ile biraz boşluk veriyoruz. Son olarak link ile linkten sonra gelecek olan metin arasında marginRight kodunu kullanarak uzaklık ataması yapıyoruz. Ve böylece uygulamamız son halini almış oluyor.

Uygulamanın son halini görmek için bu sayfaya
Uygulamada kullanılan küçük resmi almak için şu sayfaya

25 Mayıs 2007, 10:26 Programlama Bugün 1 kez, toplamda ise 6,732 kez okundu. , , ,
Yorum takibi Geri izleme Yazıyı Paylaş Yazıyı yazdır
20 yorum var
  1. Volkan Özçelik 25 Mayıs 2007 14:24

    Merhaba Erhan,

    Yaptığın örnek kusursuz, güzel, yerinde ve standartlara uygun.

    target=”_blank” kullanmaktan “kat be kat” iyi olduğu ise kesin.

    Bununla birlikte, kullanıcının elinden özgürlüğün alan bir uygulama da aynı zamanda.

    Yanlış anlama, konuya farklı bir pencereden bakmaya çalışıyorum:

    Demek istediğim ben, bir kullanıcı olarak, çeşitli nedenlerden dolayı, harici linkleri de aynı pencerede gezinmek isteyebilirim.

    O zaman yandaki harici link ikonunu fark edip “hııı bu yeni pencerede açılıyor” öngörüsünü yaptıktan sonra, linke sağ tıklayıp, linkin URL adresini kopyalamak ve aynı pencereye yapıştırmak gerekecek.

    …

    Aslında ideali, harici linklerin yanında “harici link” ikonunun bulunması fakat nerede açacağına dair tercihin kullanıcıya bırakılması.

    Sanıldığından çok daha fazla kişi “sağ tıklayıp” “yeni pencerede” ya da “yeni sekme”de açmayı biliyor.

    …

    Daha da ideali ise DOM yardımı ile her linkin yanına küçük bir harici link “span”i eklemek ve bu “span”lerin “onclick” olay dinleyicilerinde yeni pencerede açılacak bir linki tetiklemek olabilir.

    Sevgiler.

  2. Erhan 25 Mayıs 2007 15:01

    @Volkan
    Dediklerine kısmen katılıyorum. Aslında en güzeli external linklerin yanına eklediğimiz simgeye, ayrıca bir link özelliği daha eklemek. Yeni pencererde açmak isteyenler bu simgeye tıklayabilir. Hatta daha güzeli bu işi bir fonksiyonda toplayıp, kullanıcıya “sitedeki linkleri ayrı pencerede aç” gibi özellik de sunulabilir (bunu yapanlar var).

    Yazıda dikkati çekmek istediğim diğer bir nokta web sayfalarında external ve internal link ayrımının yapılması. Ben hangi linkin o siteye ait olduğunu ve hangi linkin başka bir siteye ait olduğunu imleci üzerine götürmeden de anlamak isterim. Özellikle bol linkli sayfalarda.

  3. Erdal 2 Haziran 2007 23:05

    Güzel iş, tebrikler.

  4. Seregwethrin 7 Haziran 2007 07:07

    html 1.0 traditional kullanırım targetımı da yazarım :)

  5. Yakuphan 20 Haziran 2007 10:29

    Güzel bir yöntemi, güzel bir şekilde anlatmışsınız. Teşekkür ederim.
    Volkan Özçelik’in yorumuna ek olarak;
    Javascript özelliğini kapatmış bir kullanıcıda bu yöntem işe yarayacak mı? Elbetteki yaramayacak. Ya da sayfa tam olarak yüklenmediğinde işe yarayacak mı? Yine yaramayacak. Bu ihtimaller olası mı? Hem de büyük oranda olası. Bu durumda ne yapılabilir? Cevap: ???

  6. Erhan 20 Haziran 2007 22:55

    @Yakuphan
    Cevap gayet basit. Yazdığımız javascript kodu unobtrusive olduğu için web sayfamızda hiçbir hata olmayacaktır ve eskisi gibi çalışmaya devam edecektir. Sadece “external” linkler yeni pencerede/sekmede değil, aynı pencerede/sekmede açılacaktır o kadar. Bu da çok çok çok… büyük bir sorun olmasa gerek :)

  7. wolkanca 22 Haziran 2007 20:55

    çok güzel bir tutorial olmuş.

  8. FeRHaT 27 Haziran 2007 12:31

    Zihnine sağlık dostum da küçük resmi nasıl alacağız. Not defterine yapıştırılmıyor.Sağol.

  9. Erhan 28 Haziran 2007 12:54

    @FeRHaT
    Yazının sonunda “şu sayfaya” linkine sağ tıkla ve hedefi farklı kaydet de. Böylece resmi kaydedebilirsin.

  10. Derbeder 7 Ağustos 2007 13:04

    Teşekkürler kodlar için. çok işime yaradı.

  11. Volkan 28 Kasım 2007 10:03

    Web standartlarına uyumlu sayfalar oluşturmak çoğu kişinin hayalidir. Ama standartlara geçerken daha önce web dünyasında çok sık kullanılan bu özelliğin neden standartların dışına çıktığını da mantıklı bir şekilde anlatmalıyız insanlara. Belki daha kullanıcı dostu sayfalar yapabilmek ve eskiden frame ile yapılan sayfaların günümüzde azalması, site içinde senin de bahsettiğin harici ve dahili linkler buna pdf,excel,word gibi formattaki linker içindeki simgeler de eklenerek çoğatılabilir belki. Böylece web standartlarına uyarak kodlama yapacak arkadaşların da kafasındaki neden sorusu da daha işin başındayken cevaplanmış olacaktır diye düşünüyorum.

  12. Erhan 28 Kasım 2007 13:19

    @Volkan
    Dediklerine sonuna kadar katılıyorum. Ek açıklamaların için teşekkürler.

    Bunun yanında bahsettiğin linkere simgeler eklemek işini de Bildirgeç‘te anlatmıştım vaktinde.

  13. kuzey2004 19 Şubat 2008 18:58

    Teşekkürler verdiğiniz bilgiler için. Yaptım ve sorunsuz oldu, sevindirik oldum :)

  14. Cumhur 16 Mayıs 2008 18:28

    Hoşuma gitti benim de. Sağol.

  15. Çağlar 17 Haziran 2008 14:45

    Ağzınıza sağlık herzamanki gibi mükemmel bir anlatım

  16. iLkerAksoY 15 Temmuz 2008 14:10

    Faydalı bir makale… Eline sağlık…

  17. Oğuzhan Bugüş 24 Temmuz 2008 19:50

    Anlatımınız gayet başarılı. Tebrik ediyorum. Ayrıca örnek yazı latince mi?

  18. Erhan 25 Temmuz 2008 18:46

    @Oğuzhan Bugüş
    Örnek yazının ne olduğuna http://tr.wikipedia.org/wiki/Lorem_Ipsum adresinden bakabilirsiniz.

  19. Web için önemli siteler : Erdem Arslan
  20. jquery kullanarak web standartlarına uygun pencere açmak - katodivaihe
İçinizde kalmasın, siz de yorum yazın

« Thunderbird ile Hotmail veya Yahoo Hesabına Bağlanmak 4 basit adımda parlak butonlar yapmak »

Copyright © 2008 eburhan.com | Structure Theme | XHTML 1.0 | Yukarı