الصفحة الرئيسية>دروس تصميم الويب>توحيد الويب

دراسة أولية حول تطبيق OpenSearch

الكاتب：Eve Cole وقت التحديث：2009-05-31 01:02:24

تحتوي العديد من المتصفحات الحديثة على مربع بحث على الجانب الأيمن من شريط العناوين، ويتم تثبيت بحث Google افتراضيًا. كما هو موضح أدناه:

في الواقع، هذا هو أحد تطبيقات OpenSearch. طالما أنك تكتب ملف xml ذي التنسيق الصغير المطابق، يمكنك صياغة مربع البحث المقابل. بالرجوع إلى مستند التعريف الخاص بـ OpenSearch، يمكنك بشكل أساسي الحصول على تنسيق xml الأساسي. على سبيل المثال، يمكن تحديد ملف بحث نموذجي بتنسيق XML على هذا النحو.

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<InputEncoding>utf-8</InputEncoding>
<ShortName>ShortName</ShortName>
<وصف>وصف</وصف>
<Image type="image/vnd.microsoft.icon">favicon</Image>
<Url type="text/html" template="http://who.am.i/search?word={searchTerms}"/>
</OpenSearchDescription>

من السهل فهم ملف xml أعلاه، باستثناء جذر xml الثابت، ويمكن فهم التعريفات الأخرى حرفيًا:

  • يحدد InputEncoding تشفير البحث، والذي يعتمد على الوضع الفعلي لموقع الويب.
  • ShortName هذا هو الاسم المختصر للبحث، مثل "بحث Google"
  • الوصف وصف لمربع البحث هذا، مثل "بحث التسوق في Taobao - فقط إذا لم تتمكن من التفكير فيه، فلن تتمكن من العثور على أي شيء لا يمكنك العثور عليه."
  • تشبه الصورة الأيقونة المفضلة لصفحة الويب المستخدمة للبحث عن الهوية
  • URL هذا هو المعلم الأكثر أهمية، حيث يحدد رابط البحث. يحتوي على العديد من المعلمات، استخدم بشكل عام المعلمة {searchTerms} لتحديد مصطلحات البحث. تشير المعلمة type="text/html" إلى أنه تم إرجاع الصفحة (سينتقل المتصفح إلى هذه الصفحة إذا كانت بتنسيقات أخرى، فسيتم فتحها باستخدام البرنامج الافتراضي المقابل (على سبيل المثال، type="application/). سيتم استخدام rss+xml") فتح قارئ RSS).

اكتملت عملية كتابة تنسيق xml الخاص بـ OpenSearch للحصول على معلومات تفصيلية، يرجى الرجوع إلى مستند تعريف OpenSearch الخاص به. بعد ذلك، نحتاج إلى إضافة هذا البحث إلى الصفحة. هناك طريقتان أساسيتان. يجب عليهم إضافة علامات الارتباط في رأس الصفحة (على غرار RSS)، وإضافتها باستخدام Javascript (مثل تحديد زر للتشغيل). تعد إضافة علامات الارتباط أمرًا بسيطًا للغاية، ويكون التنسيق كما يلي

<link rel="search" type="application/opensearchdescription+xml"
href="http://who.am.i/search.xml" title="ShortName" />

كما هو الحال مع RSS، يتم إصلاح rel والنوع، ونحدد بشكل أساسي href (مسار عنوان URL لملف xml أعلاه، لكي تكون آمنًا، استخدم المسار المطلق، أي بدءًا من http://) والعنوان (أي المسار القصير). عنوان البحث). وبهذه الطريقة، عند فتح هذه الصفحة في Explorer وFirefox، يمكنك رؤية القائمة المقابلة، كما هو موضح في الشكل:

يعد الإضافة باستخدام Javascript أكثر صعوبة (ربما يكون الوضع أفضل بكثير الآن). نحن نستخدم بشكل أساسي وظيفة ملحق المتصفح. توجد معلمة window.external.AddSearchProvider في Explorer (وثائق مفصلة). طريقة الاتصال النموذجية هي كما يلي

window.external.AddSearchProvider('http://who.am.i/search.xml');

الرابط الموجود في المعلمة هو المحتوى الموجود في الرابط أعلاه. متاح تحت فايرفوكس

window.sidebar.addSearchEngine(
"http://who.am.i/search.xml"، /* عنوان URL للمحرك */
"favicon.ico"، /* رمز URL */
"الاسم المختصر"، /* اسم المحرك */
"الوصف" ); /* اسم الفئة */

المعلمات والأمثلة كما هو موضح في نموذج التعليمات البرمجية (الوثائق الرسمية). تجدر الإشارة إلى أن Firefox2 والإصدارات الأحدث كانت "متوافقة" مع طريقة الاتصال window.external.AddSearchProvider الخاصة بـ Explorer (التفاصيل). ثم يمكن كتابة كود Javascript المقابل الخاص بنا على هذا النحو (لكي تكون متوافقًا مع الإصدارات السابقة لـ Firefox2، أضف حكمًا آخر، إذا شعرت أنه ليس ضروريًا، فلا يمكنك إضافته)

وظيفة addEngine(){
إذا (window.external || window.external.AddSearchProvider) {
window.external.AddSearchProvider('http://who.am.i/search.xml');
} else if (window.sidebar && window.sidebar.addSearchEngine) {
window.sidebar.addSearchEngine(
"http://who.am.i/search.xml"،
"favicon.ico"، /* رمز URL */
"الاسم المختصر"، /* اسم المحرك */
"الوصف" ); /* اسم الفئة */
}}

بهذه الطريقة، يمكنك تسجيل هذه الوظيفة في حدث النقر على رابط أو زر، وسينبثق مربع تأكيد، كما هو موضح في الشكل، بعد أن ينقر المستخدم على التأكيد، ستتم إضافته إلى مربع بحث المتصفح.

مقالات ذات صلة