Bookmarklet

Bir yer işareti (olarak da bilinir favelet ) bir küçük bilgisayar programı yazılmıştır içinde JavaScript edilir kaydedilmiş bir şekilde yer imi ve böylece genişleyen bir fonksiyonlarını web tarayıcısı . Örneğin, web sitelerinin görünümünün veya işlevselliğinin istemci tarafında değiştirilmesine olanak tanır . Teknik olarak, bir yer imi, JavaScript kodunun tarayıcı tarafından yürütülmesine izin veren URI şemasındaki bir yer imidir . javascript:

Normalde, bir web sitesine gömülü bir JavaScript programı, web sitesi çağrıldığında veya bir form veya benzeri gönderme gibi belirli eylemler sırasında yürütülür. Web sitesinin yaratıcısı, yürütme türünü ve zamanını belirler. Buna karşılık, yer imleri durumunda, sayfa yüklendikten sonra yer imi seçilerek, o anda görüntülenen web sitesine içerilen JavaScript kodu uygulanır.

Olası uygulamalar örn. B. İşaretlemenin okunması ve işaretlenen metnin başka web sitelerine aktarılması , hesaplamalar, kelime dönüşümleri, URL manipülasyonları, Belge Nesne Modeli manipülasyonu , Whois sorguları vb.

Çeşitli tarayıcılardaki destek, yer imlerindeki ilgili JavaScript URL'lerinin desteğine bağlıdır. JavaScript kodunun ilgili bölümlerinin desteği de bir rol oynar.

Örnek: Vikipedi ile terimlerin açıklaması

Örneğin, aşağıdaki JavaScript programı , tarayıcıda önceden seçilen metni Wikipedia'nın Almanca sürümünü arar :

var sel = document.getSelection();

if (sel === null || sel === undefined) {
    sel = prompt('Suchbegriff:', '');
}

if (sel !== null && sel !== undefined && sel !== '') {
    location.href = 'https://de.wikipedia.org/w/index.php?search=' + encodeURIComponent(sel);
}

Bu programı bir bookmarklet'te kullanmak için bazı özel karakterlerin yanlış yorumlanmamaları için değiştirilmesi gerekir . Yukarıdaki örnekten, temelde yukarıdakiyle aynı kodu içeren, yalnızca okunması daha zor, ancak teknik olarak net olan aşağıdaki yer imi oluşturulur:

javascript:void%20function(){var%20sel=document.getSelection();if%20(sel===null||sel===undefined)sel=prompt(%22Suchbegriff:%22,%22%22);if(sel!==null%26%26sel!==undefined%26%26sel!==%22%22)location.href=%22https://de.wikipedia.org/w/index.php%3Fsearch=%22+encodeURIComponent(sel)}();

Yukarıdaki örnekteki yer imi, Wikipedia makalesini açıklama gerektiren terimle web sitesiyle aynı pencerede (veya sekmede) açar. Bunu istemiyorsanız, ancak yeni bir sekme / pencerede Wikipedia açıklamasını tercih ediyorsanız, JavaScript kodunun buna göre uyarlanması gerekir. location.href = ... talimatı yerine aşağıdaki kod gereklidir:

    var w = 'https://de.wikipedia.org/w/index.php?search=' + encodeURIComponent(sel);
    w.focus();

Tarayıcı Uyumluluğu

Yukarıdaki örnekte olduğu gibi, seçili metne erişim prosedürü tarayıcılar arasında farklılık gösterir:

  • Bazı tarayıcılarda (Google Chrome, Safari) window.getSelection () çalışır
  • Diğer tarayıcılarda, document.getSelection () çalışır
  • Microsoft Internet Explorer'da, document.selection.createRange().Metin çalışır

Tüm tarayıcılarda eşit olarak çalışan bir bookmarklet oluşturmak için bu farklılıkların dikkate alınması gerekir.

Yüklemek:
  1. Yeni bir yer imi / favori oluşturun.
  2. Yeni yer imi / favori için bir ad seçin.
  3. JavaScript kodunu adres alanına kopyalayın.
Kullanmak:
  1. Herhangi bir web sayfasında bir kelimeyi vurgulayın.
  2. JavaScript kodunu içeren yer imlerini / sık kullanılanları arayın.
  3. Wikipedia, vurgulanan kelimenin açıklamasını gösterir.

Diğer örnekler

Minimal örnek

Aşağıdaki yer imi yalnızca bir JavaScript ifadesinden oluşur ve basitçe bir iletişim kutusu açar:

javascript:alert('Hallo!');

Dolayısıyla bu kitapçık yararlı bir şey yapmaz, sadece temel prensibi göstermeyi amaçlar.

Görüntülenen web sayfalarının listesi

Aşağıdaki yer imi, görüntülenen web sitesinin tüm bağlantılarının listelendiği yeni bir sayfa oluşturur:

javascript:w=open('','Z6','width=400,height=200,scrollbars,resizable,menubar');l=document.links;with(w.document){write('<base%20target=_blank>');for(i=0;i<l.length;i++){write(l[i].toString().link(l[i])+'<br/>')};void(close())}

Yer imlerinin sağlanması ve entegrasyonu

Yer imleri sağlamanın ve entegre etmenin birkaç yolu vardır. Basit bir seçenek, JavaScript kodunu bir HTML sayfasına bağlantı olarak eklemektir. Aşağıdaki örnekte, "Vikipedi ile Terminoloji" bağlantısı, yukarıda zaten açıklanan JavaScript koduyla oluşturulmuştur:

<a href="javascript:sel=document.getSelection();
         if(!sel){void(sel=prompt('Suchbegriff:',''))};
         if(sel)location.href='https://de.wikipedia.org/w/index.php?search='+encodeURIComponent(sel);">
  Begriffserklärung mit Wikipedia
</a>

Sayfa bir tarayıcı ile çağrılırsa, sayfanın metninde “Vikipedi ile terimlerin açıklaması” bağlantı metni görünür. En basit durumda, kullanıcı şimdi bu bağlantıyı fare ile araç çubuğuna taşımalıdır (tıklamayın). Hiçbir araç çubuğu görünmüyorsa, önce tarayıcı ayarları aracılığıyla görünür hale getirilmelidir (örneğin, Firefox'ta Görünüm -> Araç Çubukları -> Yer İmleri Araç Çubuğu altındaki kutuyu işaretleyerek ). Kullanıcı daha sonra herhangi bir web sitesinde bir terimi fare ile işaretleyebilir ve araç çubuğundaki "Vikipedi ile Terim Açıklaması" girişine tıklayabilir - daha sonra ilgili Wikipedia sayfasına yönlendirilecektir. Uygulamada, araç çubuğunda yer kazanmak için “Vikipedi ile terimlerin tanımı” kısaltmasının kullanılması tavsiye edilir.

güvenlik

Bir web sitesinde bir bookmarklet tıklandığında, içerdiği program kodu bu web sitesi çerçevesinde yürütülür. Tarayıcı, bu kodun yalnızca çevresindeki sayfaya ait verilere erişmesini sağlar. Bu, yalnızca bir bağlantıya tıklayarak üçüncü taraf bir web sitesinden verilere erişilmesini önler.

Bir yer imi oluşturularak, yer iminin içerdiği program kodu, o anda aktif olan web sitesi çerçevesinde yürütülür. Kötü amaçlı kod, yukarıdaki (iyi huylu) örnekte arama işleviyle gösterildiği gibi, etkin web sitesinden diğer web sitelerine veri aktarabilir ve bundan yararlanabilir. Bu nedenle, yer imleri yalnızca güvenilir kaynaklardan yüklenmeli ve kullanılmalıdır. Diğer kaynaklardan gelen yer imleri söz konusu olduğunda, kod, kullanımdan önce içerik açısından kontrol edilmelidir; bu, birçok yüzde işareti nedeniyle zordur ve ayrıca JavaScript programlama bilgisi gerektirir.

İnternet linkleri