Наша взаимовыгодная связь https://banwar.org/
Автор статті: Сергій Камінський
З кожним днем збільшується кількість веб-майстрів, які прагнуть робити свої сайти однаково зручними для користувачів всіх браузерів, а не заточують їх тільки під Internet Explorer, як це було раніше. Напевно найбільше користувачі альтернативних браузерів не люблять посилання "Долучити до вибраних", яка зустрічається на кожному сайті, а працює тільки в Internet Explorer. Зараз я розповім як правильно реалізувати на своєму сайті цю функцію, щоб вона працювала у всіх поширених браузерах.
Так як користувачу може знадобитися додати в Вибране не тільки сайт (головну сторінку), але і сторінку на якій він знаходиться, то ми докладно розглянемо обидва варіанти, а ви самі вирішите який з них використовувати.
Додати в Вибране головну сторінку сайту
Давайте спочатку розглянемо чим відрізняється посилання "Долучити до вибраних" для Internet Explorer від її аналога в інших браузерах, а потім об'єднати їх в одну. В IE використовується функція window.external.AddFavorite (), яка приймає два значення: адреса сторінки для додавання в закладки та її назва:
<A href = "javascript: void (0);" onclick = "window.external.AddFavorite ( 'http://www.kaminskiy-web.com/', 'Статті по створенню сайтів'); return false;"> Додати сайт у Вибране </a>
Думаю пояснювати тут нічого не потрібно. А ось наступний приклад ми розглянемо докладніше. Код для додавання в Вибране для Opera, Firefox і Netscape виглядає наступним чином:
<a title="Статьі по створенню сайтов" href="http://www.kaminskiy-web.com" rel="sidebar"> Додати сайт у Вибране </a>
Як бачите це звичайне посилання з наявністю додаткового параметра rel = "sidebar" який якраз і вказує браузеру на необхідність додати сайт в закладки при кліці на засланні. Крім цього в параметрі title = "" потрібно вказати з яким ім'ям додавати сайт в закладки. А ось адреса сторінки, яка додається, прописується в href = "". Зазвичай вказується головна сторінка сайту і його назву.
Віконце, яке з'являється при натисканні на посилання
Тепер нам потрібно зробити так, щоб посилання "Додати в обране" працювала однаково добре в усіх браузерах. Так як код для IE працює тільки в ньому, а параметр rel = "sidebar" підтримують тільки Opera, Firefox і Netscape, то ніщо не заважає нам просто об'єднати обидва варіанти в одну посилання:
<A title = "Статті по створенню сайтів" href = "http://www.kaminskiy-web.com" onclick = "window.external.AddFavorite ( 'http://www.kaminskiy-web.com', 'Статті по створенню сайтів '); return false; " rel = "sidebar"> Додати сайт у Вибране </a>
Давайте вирішимо більш складну задачу і замість того, щоб вручну прописувати адресу та назву сайту, будемо автоматично визначати на якій сторінці знаходиться в даний момент відвідувач і надамо йому можливість додати в Вибране поточну сторінку з відповідним адресою та назвою.
Додати в Вибране поточну сторінку
Отже, давайте знову почнемо з Internet Explorer:
<A href = "javascript: void (0);" onclick = "window.external.AddFavorite (location.href, document.title); return false;"> Додати поточну сторінку в Вибране </a>
Як бачите в коді нічого не змінилося, крім зазначених параметрів функції window.external.AddFavorite (). В JavaScript-параметрі document.title міститься назва сторінки, яке береться браузером із зазначеного нами заголовка документа, розташованого між тегами <head> <title> Назва сторінки </ title> </ head>. Адреса поточної сторінки браузер отримує з адресного рядка і привласнює його параметру location.href. Таким чином немає необхідності змінювати вручну на кожній сторінці потрібні нам параметри.
Нова закладка в Interet Explorer
З браузерами Opera, Firefox і Netscape все трохи складніше. Нам доведеться написати невелику JavaScript-функцію, яка буде працювати приблизно так само як і вже відома нам функція в Internet Explorer. Ми помістимо її всередині посилання, так що вона буде займати всього лише один рядок, але для легшого сприйняття я її трохи відформатував:
<A href = "javascript: void (0);" onclick = "var url = window.document.location; var title = window.document.title; function bookmark (a) {a.href = url; a.rel = 'sidebar'; a.title = title; return true; } return bookmark (this); return false; "> Додати поточну сторінку в Вибране </a>
На самому початку ми присвоїли змінним url і title значення JavaScript-параметрів window.document.location (адреса сторінки) і window.document.title (назва сторінки). Далі ми створюємо функцію bookmark (). З її допомогою ми з кількох змінних, значенням яких є адреса і назва сторінки, генеруємо посилання. Не забуваємо також про параметр rel = "sidebar", який так само буде згенерований за допомогою bookmark ().
Тепер нам залишилося об'єднати код для Internet Explorer і інших браузерів, щоб отримати одну кросбраузерную посилання:
<A href = "javascript: void (0);" onclick = "var url = window.document.location; var title = window.document.title; function bookmark (a) {a.href = url; a.rel = 'sidebar'; a.title = title; return true; } bookmark (this); window.external.AddFavorite (location.href, document.title); return false; " > Додати поточну сторінку в Вибране </a>
У нас вже є функція, сумісна з основними браузерами. Тепер нам потрібно як то поєднати її з користувачами.
ламаємо стереотипи
Так як багато користувачів альтернативних браузерів вже звикли до того що посилання "Долучити до вибраних" працює тільки в Internet Explorer і не звертають на неї уваги, то нам потрібно як то ненав'язливо показати відвідувачеві що ми подбали про працездатність даної посилання в його браузері. Думаю найбільш вдалим варіантом буде визначати яким браузером користується відвідувач нашого сайту і виводити відповідний логотип біля посилання. А можна просто вивести відразу все логотипи:
Так виглядає кінцевий результат
Сподіваюся моя стаття допомогла вам зрозуміти як працює кросбраузерная посилання "Долучити до вибраних" і ви будете застосовувати це на практиці, створюючи все більш зручні сайти для ваших відвідувачів. Можна також зробити так, щоб в Избранном навпаки закладки відображалася іконка вашого сайту. Про це читайте в статті « Іконка для вашого сайту ».
Інші записи по темі в розділі статті по JavaScript
Копіювання статті заборонено.