Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Додати в обране для всіх браузерів

  1. Додати в Вибране головну сторінку сайту
  2. Додати в Вибране поточну сторінку
  3. ламаємо стереотипи

Наша взаимовыгодная связь 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
Нова закладка в 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

Копіювання статті заборонено.

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: