dr.Brain

doctor Brain

мир глазами веб-разработчика

Ссылки: расширенные возможности

как использовать HTML-cсылки для звонков, сообщений и взаимодействия с приложениями

dr.Brain

время чтения 3 мин.

Photo by Alexander Andrews on Unsplash

С помощью HTML-ссылок мы можем открыть панель набора телефонного номера на мобильном устройстве. Да, эта функция актуальна только для смартфонов, но Google Chrome предлагает неплохую альтернативу для обладателей ноутбуков и настольных компьютеров - мы можем нажать на ссылку и здесь, звонок будет переведен на мобильный телефон. Такие ссылки называются “click to call links”

<!-- эта ссылка откроет телефонную панель набора с номером 123456789 -->
<a href="tel:123456789">Позвони мне</a>

Но есть и другие интересные возможности HTML-ссылок.


Другие возможности ссылок

Что еще можно сделать со ссылками:

  • найти местоположение на Google Maps,
  • открыть почтовый клиент с шаблоном письма,
  • отправить заранее созданный текст в SMS.

ссылки и Google Maps

Нажав на ссылку мы можем открыть заданный адрес на Google Maps, такая ссылка называется Map URL и поддерживается различными платформами. Если на устройстве уже установлено нативное приложение, Google Maps просто откроет запрашиваемый адрес. Во всех остальных случаях URL инициируется запуск Google Maps и поиск необходимого адреса в браузере.

Существуют различные Map URL, нас интересуют следующие возможности:

  1. открыть запрашиваемый адрес на Google Maps,
  2. построить маршрут до опредленного адреса.

Подробную информацию можно прочитать в руководстве для разработчиков Google Maps Platform.

<!-- эта ссылка откроет на Google Maps адрес: 20, James Road, Washington --> 
<a href="https://www.google.com/maps/search/?api=1&query=20,James%20Road,Washington">Найди меня на Google Maps</a>

<!--  эта ссылка с помощью Google Maps построит путь до адреса: 20, James Road, Washington --> 
<a href="https://www.google.com/maps/dir/?api=1&destination=20,James%20Road,Washington">Найди меня на Google Maps</a>

ссылка на почтовый клиент с шаблоном письма

Мы отлично знаем, что mailto: позволяет открыть почтовый клиент и создать новое письмо. Но с помощью ссылки, мы также можем добавить и другие аттрибуты сообщения: адрес, тему, само сообщение, получателей копии и скрытой копии.

Посмотрим на пример:

<!--  эта ссылка откроет почтовый клиент, чтобы создать письмо для адресата: someone@abc.com -->
<a href="mailto:someone@abc.com">напиши письмо</a>

<!-- эта ссылка откроет почтовый клиент, чтобы создать письмо для someone@abc.com с темой: Mail From Link -->
<a href="mailto:someone@abc.com?subject=Mail From Link">напиши письмо с этой темой</a>

<!-- эта ссылка откроет почтовый клиент, чтобы создать письмо для someone@abc.com с темой: Mail From Link и сообщением: Sample Email -->
<a href="mailto:someone@abc.com?subject=Mail From Link&body=Sample Email">напиши письмо с этой темой, текст уже готов</a>

<!-- эта ссылка откроет почтовый клиент, чтобы создать письмо для someone@abc.com с темой: Mail From Link и сообщением: Sample Email и отправить копии по заданным адресам -->
<a href="mailto:someone@abc.com?cc=john@someemail.com,jack@junga.com&subject=Mail From Link&body=Sample Email">напиши письмо с этой темой не только мне, текст уже готов</a>

Отправляем SMS с текстом

Ключевое слово атрибута href sms: позволяет отправить заданный текст SMS на указанный номер. При создании такой ссылки лишний раз проверьте корректность формата сообщения.

Вот пример:


<!-- эта ссылка откроет SMS-мессенджер, чтобы отправить сообщение на номер +94771234557
с текстом: Hi there I'd Like Coffee
Make sure you encode your message body before sending-->

<a href="sms:+94771234557?body=shsa%40%20Hi%20there%20I%27d%20Like%20Coffee">
отправьте SMS
</a>

Спасибо за внимание.

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.