JavaScript ile bir Metin Arama Yer İşareti Nasıl Oluşturulur

Yer işareti Hangi JavaScript uygulamaları olarak erişilebilir tarayıcı yer imleri. Kullanıcıları etkinleştirmek için kullanılırlar farklı eylemler gerçekleştir web sayfalarında. Örneğin, FontShop tarafından hazırlanan bu yer imi, FontShop web fontlarını herhangi bir web sayfasında önizlemek içindir..

Bu yazıda, bunun ne kadar hızlı ve kolay olduğunu göreceğiz yer imi koyma bunu yaratarak Wikiwand gerçekleştirir (daha iyi görünümlü Wikipedia) arama herhangi bir web sayfasındaki seçili bir metin için.

Yer imleri nasıl çalışır?

Bir bookmarkın URI'si kullanır javascript: protokol Bu onun olduğunu gösterir JavaScript kodundan oluşur. Bir bookmark'a tıkladığınızda, JavaScript'i çalıştır Bir web sayfasında, bir sayfanın görünümünü değiştirmek, başka bir sayfaya yönlendirmek veya sayfadaki yeni bilgileri göstermek gibi görevleri gerçekleştirin..

Yer imleri aslında olduğundan JavaScript kod kümeleri, kişisel kullanım için veya WordPress’in Press This bookmarklet ile yaptığı gibi, kullanıcılarınıza sunmak için çok az JavaScript bilgisiyle oluşturmak kolaydır..

JavaScript koduyla başlayın

URL yapısı Wikiwand İngilizce bir makale için kullanır https://www.wikiwand.com/en/articleTitle. Hangi URL’nin Wikiwand sayfasına atlayan bir komut dosyası yazmamız gerekiyor. kullanıcının henüz seçtiği dizeyle biter - seçilen metnin yerine koymak makale başlığı.

Önce biz metni ele geçirmek kullanıcı sayfada aşağıdaki kodu seçti:

 getSelection (). toString () 

Bizim ihtiyacımız oyuncular tarafından döndürülen nesne getSelection () dize olarak kullanarak toString () yöntem, bunu yapmak için seçilen metni çıkar.

Sonra, ihtiyacımız var ziyaret yapmak Wikiwand makale sayfasına. Bunu aşağıdaki mantığı kullanarak başaracağız. NEWURL Olacak Wikiwand makale sayfasının URL'si (sonunda seçilen dizeyi içerecektir):

 location.href = newURL 

Bu iki kod parçacığını bir araya getirdiğimizde, şu senaryo ile sonuçlanır:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Şimdi sadece eklemek zorundayız javascript: cepheye protokol ve biz son kod kitapçığımızda kullanacağız:

 // satır kesmeleri olmadan bir satıra ekleyin: javascript: location.href = 'https://www.wikiwand.com/tr/' + getSelection (). toString (). ) 

İsteğe bağlı yerine (/ \ N / g, '% 20') sonunda yeni satır karakterlerinin yerine geçer (\ n) Metinde tek boşluk karakteriyle (% 20).

JavaScript kodu hazır. Kodun yerleştirilmesi gerektiğini unutmayın. tek bir satırda satır sonu olmadan, o zamandan beri olacak bir metin giriş alanına eklendi.

Yer imini oluştur

Tarayıcınızın yer imi penceresini açın ve yeni yer imi ekle:

• Firefox: Ctrl + shift + B / cmd + shift + B tuşlarına basın, "Yer İmleri Araç Çubuğu" nu sağ tıklayın ve "Yeni Yer İşareti" ni seçin.
• Krom: Ctrl + shift + O / cmd + alt + B tuşlarına basın, "Yer imleri çubuğu" ni sağ tıklayın ve "Sayfa Ekle ..." yi seçin..

URL alanında JavaScript kodunu kopyala yapıştır önceden Yer imi oluşturulduktan sonra kullanıma hazırdır; herhangi bir web sayfasına git, bir kelime seç Wikiwand’de arama yapmak favoriyi tıkla - Wikiwand makale sayfası bir kerede açılacak.

Hızlı erişim

Yer imine her ihtiyacınız olduğunda yer imi menüsüne ulaşmak yerine, doğrudan göster hızlı erişim için tarayıcınızda.

• Firefox: Üst menü çubuğunda "Görünüm> Araç Çubukları" nı tıklayın ve "Yer İşaretleri Araç Çubuğu" nu seçin..
• Krom: Ctrl + shift + B / cmd + shift + B tuşlarına basın.

Yer imi bağlantısı oluştur

Favori kitabınızı bir web sitesine ekleyebilirsiniz. köprü olarak ayrıca, hangi ziyaretçiler yer imi olabilir ya bağlantıyı yer imi araç çubuğuna sürükleyip bırakarak ya da bağlantıyı sağ tıklayıp yer imi için seçenek belirleyerek.

Yer imi kitaplığınızı köprüye çevirmek için Yer imi betiği ile HTML etiketi değeri olarak href nitelik:

   Wikiwand Search Bookmarklet  

Yer imleri ayrı olarak nasıl saklanır

Ayrıca ayrı bir JavaScript dosyası kullan kısa bir komut dosyanız varsa - bu kılavuzda henüz görmüş olduğumuz gibi - gerekli olmayan yer imi kodunu saklamak için, ancak JavaScript kodu yer imi çubuğuna kopyalamak için çok uzun olduğunda kullanışlı olabilir tarayıcınızın.

Dosya MyScript.js irade ana JavaScript kodunu barındır Yer imi için, ve aşağıdaki kodu eklemeniz gerekir. yer imi URL’si olarak (tarayıcının yer imi çubuğuna veya href HTML dosyasındaki özellik):

 // satır sonları olmayan bir satıra ekleyin javascript: (() => with (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Yukarıdaki kod pasajı kendi kendine çağıran bir ok işlevine sarılmış, ve aşağıdaki gibi ECMAScript 6’nın özelliklerini kullanır. let Anahtar kelime, kod uzunluğunu azaltmak için. Bir ekler > işaret eden etiket MyScript.js dosya dokümanın bölümü kullanıcı yer imini tıklattığında (not için mutlak bir yol kullanmanız gerekebileceğini unutmayın. MyScript.js dosya).