Разбираясь с очередным API от сервиса онлайн-чатиков для веб-сайтов, я столкнулся с проблемой, когда на компьютере все работало хорошо, а на Айпадушке — нет. У меня был вот такой код:
$(...).on('click', function(e) {
e.preventDefault();
$zopim.livechat.window.toggle();
});
Другими словами, при клике на кнопочку я хотел, чтобы чат разворачивался или скрывался, если уже развернут. Но на мобильных устройствах чат открывается не внутри страницы с помощью <iframe>, а в качестве отдельной вкладки в браузере, поэтому toogle() не работал. Что же делать?
Пообщавшись с поддержкой и взглянув на пару страниц, что мне посоветовали посмотреть, стало понятно, что надо использовать show() вместо toogle(), но тогда наша кнопочка будет всегда лишь открывать чат. Покопавшись в ужатом исходном коде файла, который заставляет чат работать… Ничего интересного. Можно заметить, что на мобильных устройствах рядом с <iframe> появляется еще какая-то ссылка <a>. Ну и что? Искать на странице есть ли вот этот <a>? Слишком некрасиво. Найти строчку, которая определяет тип устройства? Ой, все.
Тут я вспомнил, что в API была функция, которая могла определить открыт чат или нет — getDisplay(). Эврика!
$(...).on('click', function(e) {
e.preventDefault();
if ($zopim.livechat.window.getDisplay()) {
$zopim.livechat.window.hide();
} else {
$zopim.livechat.window.show();
}
});
С таким кодом все работает и на трогательных устройствах, и на компьютерах.
