🏷️

• старое

Сделать стартовой или добавить в избранное  

📅 Опубликовано:7 августа 2011

Это статья из старого первого блога, который сохранился только на archive.org. Все старые статьи помечены тегом 🚨 старое

Этот пост скорее всего пригодится тем, кто непосредственно занимается разработкой интерфейса сайта, в главную очередь дизайнерам, так как в подавляющем большинстве небольших проектов с соответствующим бюджетом, основная часть работ, по придумыванию «как что и где должно располагаться», ложится на плечи именно этого человека.

Периодически я сталкиваюсь с определенными странностями в макете, нарисованными просто из за банального незнания дизайнером, самых что ни на есть, основ того, что с его макетом делают дальше :)

Одной такой странностью является присутствие в макете двух ссылок (когда это делают бездумно, то их обычно две) — «сделать стартовой» и «добавить в избранное». Не знаю отчего в подкорке многих недалеких дизайнеров образовалось это стойкое сочетание, но оно имеет место быть даже сейчас.

Если бы дизайнеры просто знали, как дело обстоит с возможностью реализации подобного функционала, думаю таких странностей было бы намного меньше.

Начнем по порядку. Так как же обстоит дело с автоматическим (кликание на ссылку и вызов окошка с подтверждением) способом задания стартовой или домашней страницы для браузера? А никак оно не обстоит, здесь все всем, в том числе и разработчикам из Яндекса, давно ясно, — по клику на ссылку с помощью JavaScript, вызов окошка для подтверджения установки страницы в качестве стартовой или домашней возможен только для браузеров IE, примерно таким образом:

    <a href="#" 
      onClick="this.style.behavior='url(#default#homepage)';
      this.setHomePage('http://www.beskrovnyy.pro/'); return false;">
      Сделать страницу стартовой
    </a>
    

Или так:

  function setHome(ob) {
    ob.style.behavior='url(#default#homepage)';
    ob.setHomePage(document.location);
  }
  

    <a onclick="setHome(this); return false" href="#">
      Сделать страницу стартовой
    </a>
    

для других «нормальных» браузеров сделать это у пользователя получится только вручную.

Посмотрим, как к осуществлению этой задачи подходят в Яндексе. Если загрузить страницу ya.ru, в левом верхнем углу можно обнаружить ссылку «Сделать стартовой». Причем срабатывать браузерное добавление ссылки в качестве домашней страницы будет только, если кликать из IE браузеров. Для всех остальных браузеров, для каждого соответственно своя, загрузится красивая страничка с пояснениями и скриншотами, как пользователю это сделать вручную, вызвав соответствующие настройки браузера. Причем для браузера Firefox, будет предложен самый быстрый в его случае вариант — с перетаскиванием на иконку домика, располагающуюся на панели браузера, соответствующего элемента, являющегося ссылкой, у Яндекса это картинка. Хотя перетаскивать можно любые ссылки, favicon и даже текст, все запишется в разделе основных настроек в поле «Домашняя страница».

Если так уж хочется воспользоваться прелестями IE на всю катушку :), а для остальных браузеров ничего рисовать и придумывать не охота, можно показывать ссылку только браузерам IE отделяя ее условными комментариями. К примеру добавлять динамически яваскриптом.

С реализацией добавления в избранное все обстоит более кроссбраузерно. Это не получится сделать только в WebKit-браузерах.

Для IE — это метод AddFavorite, для Gecko — это объект window.sidebar и метод addPanel, Для Оперы вообще ссылка должна иметь специальный атрибут: rel=“sidebar”, ну а для WebKit нет ничего, по крайней мере мой поиск оказался безрезультатным. Так что здесь можно выводить какой-нибудь алерт с приглашением воспользоваться соответствующей комбинацией клавиш, показать страницу или блок с пояснением, либо как-то еще.

К примеру вот здесь человек написал и подробно описал такой, вполне рабочий кроссбраузерный код, для вызова панельки добавления текущей страницы в закладки браузера:

  function add_favorite(a) {
  title=document.title;
  url=document.location;
  try {
    // Internet Explorer
    window.external.AddFavorite(url, title);
  }
  catch (e) {
      try {
        // Mozilla
        window.sidebar.addPanel(title, url, "");
      }
      catch (e) {
        // Opera
        if (typeof(opera)=="object") {
          a.rel="sidebar";
          a.title=title;
          a.url=url;
          return true;
        }
        else {
          // Unknown
          alert('Нажмите Ctrl-D чтобы добавить страницу в закладки');
        }
      }
    }
    return false;
  }
  

    <a href="#" onclick="return add_favorite(this);">
      Добавить в избранное
    </a>