Добавить кнопку внешнюю ссылку в закреп ТГ

Оформлять ссылку как стандартную кнопку нежелательно: ссылка по определению указывает на ресурс, а нажатие кнопки обычно инициирует действие. Но если задача возникла, имеет смысл хотя бы решать её правильно.

Правильно

Синтаксически корректное («валидное») и кроссбраузерное решение — заключить кнопку в простейшую форму. В атрибут action формы следует поместить URL-адрес, на который должна вести «кнопка-ссылка». Для работы формы в устаревших браузерах (IE8 и ниже) следует добавить кнопке атрибут type= «submit» :

«Кнопка-ссылка» в примере ведёт на страницу с адресом /example/ .

Если требуется открывать ссылку в новом окне или фрейме, можно, как и у обычных ссылок, использовать атрибут target элемента FORM :

Демо

Строка запроса

Строка запроса — часть URL-адреса после первого вопросительного знака, содержащая GET-параметры в виде пар name=value ( имя=значение ), разделённых символом lorem=ipsum .

Chromium/ Blink и WebKit

В браузерах на основе движков Chromium/ Blink (Chrome, Opera 15+, Яндекс.Браузер, Vivaldi) и WebKit (Safari) есть ошибка (баг) (1, 2): вопросительный знак, отделяющий строку запроса от основной части адреса, добавляется к адресу даже при отсутствии полей в форме. Поэтому, например, форма:

ФИШКИ ТЕЛЕГРАММ / Кнопка в закрепе канала

приведёт на адрес /example/? вместо ожидаемого /example/ .

Кент Тамура (Kent Tamura) из команды разработчиков Chromium говорит, что это соответствует текущим специфи­кациям HTML и URL.

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

Ограничения по сравнению с реальной ссылкой

• У пользователя нет возможности узнать, куда ведёт ссылка-кнопка, до щелчка по ней.
• Пользователь не может по своему желанию открыть ссылку-кнопку в новой вкладке или в новом окне.

Неправильно

Кнопка внутри ссылки

Нередко элемент BUTTON просто помещают внутрь ссылки:

Это работает во всех современных браузерах, но согласно HTML5 это синтаксически некорректно («невалидно»): ссылка не должна содержать интерактивные элементы. Кроме того, такая ссылка не работает в Internet Explorer (IE) ниже 9-й версии.

Демо

Кнопка с JS-обработчиком щелчка

Порой используется кнопка с JavaScript-обработчиком события щелчка:

Но такая кнопка не работает при выключенном JavaScript, её невозможно открыть в новой вкладке или новом окне, и возможны проблемы с индексацией поисковиками, не исполняющими JavaScript-код.

Демо

Программа для масштабирования игр без размытия

Нестандартные расширения CSS

Описанные ниже возможности нестандартные, и использовать их не рекомендуется.

Firefox и Chromium

Firefox версий 81 и ниже и браузеры на основе движка Chromium (Chrome, Opera 15+, Vivaldi, Яндекс.Браузер) прошлых версий поддерживали нестандартные префиксированные варианты свойства appearance , значение button которых позволяло оформить как кнопку произвольный элемент, в том числе ссылку:

A.example -moz-appearance: button; /* Firefox */
-webkit-appearance: button; /* Chromium */
>

Демо

Internet Explorer, Edge и спецификация

В браузерах Microsoft — Internet Explorer (IE) и Edge — возможность недоступна. В спецификации CSS Basic User Interface Module Level 4 значение button свойства appearance не предусмотрено.

• morontt2013-03-08 Чего только не придумают… 🙂 Хотя вот ссылка кнопкой — это на каждом шагу буквально встречается.
• Александр 2013-06-30 Марат, очень помогла ваша статья. Огромное спасибо!
  Это самый грамотный и актуальный на сегодня ответ в интернете, который мне удалось найти.
  Продолжите, пожалуйста, тему — «Правильный способ сделать картинку ссылкой» (1 вариант — только HTML; 2 вариант — CSS; …). В сети масса устаревших и в корне неверных рекомендаций — кто на что горазд…
  И еще один вопрос-просьба. По адресу http://api.yandex.ru/share/ Яндекс раздает невалидный код. На недоуменные вопросы в клубе разработчиков (http://clubs.ya.ru/share/) отвечают: «А зачем вам эта валидность?» Не могли бы Вы исправить их код?
• Никита 2013-11-15 Есть и у этого способа подводные камни. Вот такие вот штуки ( http://s020.radikal.ru/i720/1311/34/bfe7beda17fe.jpg ) при использовании кнопок предыдущей и следующей страницы. Мешается ужасно. Как обойти непонятно.
• Marat Tanalin(автор)2013-11-16 Никита, если вы о подтверждении, запрашиваемом браузером при попытке обновить страницу (или вернуться на неё по браузерной истории), загруженную в результате отправки формы, то это имеет место только в отношении форм, отправляемых методом POST (когда данные отправляются отдельным HTTP-пакетом). В данной же заметке описывается отправка форм методом GET (когда данные передаются непосредственно в URL-адресе страницы-адресата в виде пар имя=значение , добавляемых после вопросительного знака к адресу, указанному в атрибуте action формы), и соответствующие страницы пользователь может беспрепятственно обновлять или возвращаться на них без каких-либо запросов на подтверждение от браузера.
• Наташа 2015-01-22 Спасибо большое за информацию. У меня есть один «дурацкий» вопрос :-). Почему при размещении 2 и более кнопок на одной странице (с разными url адресами) все они работают в одном направлении?
• Marat Tanalin(автор)2015-01-22 Наташа, скорее всего, в вашем HTML-коде есть ошибки (например, у первой из двух форм отсутствует закрывающий тег ). На всякий случай обратите внимание, что каждую кнопку-ссылку следует заключать в собственную форму, при этом формы не должны быть вложенными друг в друга. В общем случае при любых странных проблемах полезно проверять код HTML-страницы валидатором.
• Наташа 2015-01-22 Спасибо, мне следовало быть более внимательной. И за Валидатор отдельное спасибо )))
• thnx 2015-02-05 Весь интернет перерыл пока искал! спасибо мне очень помогло! и ошибок никаких нет в браузерах.
• ValeriusSoft 2015-05-27 Не работает на движок OpenCart 2.0.2 $uri = $_SERVER[‘REQUEST_URI’];
  $qPos = strpos($uri, ‘?’); if ($qPos === strlen($uri) — 1) header(‘HTTP/1.1 301 Moved Permanently’);
  header(‘Location: ‘ . substr($uri, 0, $qPos));
  >
  ?> Может у вас есть код для .htaccess ?
• Marat Tanalin(автор)2015-05-27 ValeriusSoft, см. новую заметку «Удаляем пустую строку запроса из URL».
• Den 2015-09-11 как привязать код возврата на предыдущую страницу
  к кнопке?
  код кнопки: назад

  За ранее спасибо.

• Marat Tanalin(автор)2015-09-11 Den, в вашем случае ссылка функционально не является ссылкой (указывает на фиктивный пустой якорь # и существует только для исполнения JS-кода при щелчке), поэтому можно просто заменить элемент A на элемент BUTTON , сохранив прежний onclick -обработчик. Но в общем случае использование JavaScript для реализации ссылки на предыдущую страницу нежелательно, т. к. :

• JS может быть выключен в браузере пользователя, и тогда такая ссылка работать не будет, запутывая пользователя;
• пользователь может попадать на одну и ту же страницу с разных страниц вашего сайта (тогда ссылка «Назад» будет всегда указывать на разные страницы), со страницы другого сайта (тогда предыдущий пункт в истории браузера будет указывать на страницу другого сайта — например, поисковика) или отсутствовать вообще (если страница открыта из закладок браузера, и тогда JS-ссылка «Назад» работать не будет).

При необходимости URL-адрес предыдущей страницы имеет смысл вставлять в ссылку явным образом на серверной стороне, а лучше — воздержаться от дублирования встроенной функциональности браузера.

не хотелось использовать javascript в кнопке

• Правильно

• Демо
• Строка запроса
• Chromium/Blink и WebKit
• Ограничения по сравнению с реальной ссылкой

• Кнопка внутри ссылки
• Кнопка с JS-обработчиком щелчка

• Firefox и Chromium
• Демо
• Internet Explorer, Edge и спецификация

• html,
• html5,
• snippets,
• web-стандарты,
• избранное,
• кроссбраузерность,
• ликбез,
• семантика,
• формы

• Firefox 114
• Firefox 113
• Firefox 112
• Firefox 111
• Firefox 110

• Как сделать кнопку ссылкой
• Правильный DOCTYPE в HTML5
• Сброс стилей в CSS
• Отключение Caps Lock в Windows
• Dell P2415Q. Авторский обзор 4K-монитора
• Asus PQ22UC — 22″ OLED-монитор 4K
• Dell UP3017Q — 30″ OLED-монитор 4K

Перепечатка любых материалов сайта в любом объёме запрещена

Источник: tanalin.com

Как вставить ссылку в кнопку aiogram

Создаю бота, и вот хочу сделать такой вот результат, как на картинках. Как этого можно добиться? Использую Aiogram.

Отслеживать
задан 28 апр 2022 в 7:02
1 1 1 серебряный знак 2 2 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Попробуйте использовать InlineKeyboardMarkup и InlineKeyboardButton. Примерно так:

keyboard = InlineKeyboardMarkup() button = InlineKeyboardButton(‘Моя жаба’, url=’https://google.com’) keyboard.add(button)
Отслеживать
ответ дан 28 апр 2022 в 15:43
RuslanZanevskiy RuslanZanevskiy
602 3 3 серебряных знака 7 7 бронзовых знаков

Используй метод «switch_inline_query_current_chat»

Interaction.insert(InlineKeyboardButton(«Моя жаба», switch_inline_query_current_chat=’Моя жаба’))

Отслеживать
ответ дан 16 апр в 11:55
Вадим Амерханов Вадим Амерханов
1 1 1 бронзовый знак

• python
• telebot
• aiogram

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник: ru.stackoverflow.com