Вступ до дії «Запустити JavaScript на вебсторінці» у Швидких командах на iPhone або iPad
Ледь не всі вебсторінки скриптуються за допомогою JavaScript, мови програмування, що створює динамічні ефекти у веббраузерах, зокрема анімації, інтерактивні меню, відтворенням відео тощо. Зазвичай ви не бачите JavaScript, коли переглядаєте вебсайт. Утім, побудувавши швидку команду, що містить дію «Запустити JavaScript на вебсторінці», і згодом запустивши таку швидку команду в програмі Safari, ви можете керувати JavaScript будь-якої вебсторінки.
Швидкі команди, що виконують ваші сценарії JavaScript на вебсторінці, мають безліч застосувань. Наприклад, ви можете створювати швидкі команди, що видобувають конкретні дані з вебсторінки й потім включають такі дані в якесь завдання, як-от виокремлення розкладу якогось заняття та його додання до програми «Календар» або експортування даних учасників групи в соціальній мережі та подальше додання таких даних до електронної таблиці.
Ви також можете створювати швидкі команди, що дозволяють вам модифікувати вебсторінку, наприклад, змінити шрифт тексту такої вебсторінки або швидкість, з якою відтворюється якесь її відео. Щоб запускати JavaScript зі швидкої команди, потрібно ввімкнути параметр. Див. у Експертні параметри Приватності й безпеки у Швидких командах на iPhone або iPad.
Інформацію щодо використання швидких команд, що запускають JavaScript на вебсторінці, див. у Використання дії «Запустити JavaScript на вебсторінці» у Швидких командах на iPhone або iPad.
Про видобування даних вебсторінок
Дія «Запустити JavaScript на вебсторінці» дає вам змогу добути дані з будь-якої вебсторінки, захоплюючи всі елементи, що відповідають певним критеріям, потім повторно звертаючись до цих елементів для виконання якогось завдання з даними (або подальшої інспекції цих елементів).
Наприклад, щоб створити список усіх зображальних елементів на вебсторінці, використовуйте:
var elements = document.querySelectorAll(«img»);
В іншому прикладі, щоб отримати кожен елемент із класом “post,” використовуйте:
var elements = document.querySelectorAll(«.post»);
Коли NodeList створено, ви можете повторювати елементи (для подальшого фільтрування елементів або додання елементів до структури даних), використовуючи щось таке:
var elements = . ; for (let element of elements) < // . >
Вхідні дані дії «Запустити JavaScript на вебсторінці»
Вхідними даними для дії «Запустити JavaScript на вебсторінці» має бути будь-яка дійсна вебсторінка Safari, тобто ви маєте запускати цю швидку команду з меню оприлюднення (а саме із Safari, SFSafariViewController або ASWebAuthenticationSession).
Коли швидка команда запускається з меню оприлюднення, вхідні дані з програми Safari передаються до першої дії у вашій швидкій команді.
Хоча вхідні дані для дії «Запустити JavaScript на вебсторінці» мають бути вебсторінкою Safari, ви можете вставляти в дію додаткові дані, використовуючи Магічну змінну. Наприклад, швидка команда Змінити швидкість відео (доступна в Галереї) містить дію «Запустити JavaScript на вебсторінці», що змінює відео на вебсторінці. Швидкістю відтворення відео контролює змінна Швидкості.
Інформацію щодо запуску швидких команд із Safari див. у Запуск швидкої команди з іншої програми на iPhone або iPad.
Вихідні дані дії «Запустити JavaScript на вебсторінці»
Щоб видати дані, ви маєте викликати оброблювач завершення в JavaScript, як-от completion(result) . Через те, що JavaScript зазвичай використовується з асинхронними моделями, виклик навмисне не синхронний. У такий спосіб ви можете завершити асинхронно. Наприклад, таке є дійсним:
window.setTimeout(function() < completion(true); >, 1000);
Вихідними даними для дії «Запустити JavaScript на вебсторінці» є будь-який прийнятний тип даних формату JSON, зокрема:
- Рядок
- Число
- Булеве значення (істина чи хиба)
- Масив (містить будь-який інший прийнятний тип JSON)
- Словник (містить будь-який інший прийнятний тип JSON)
- Нуль
- Невизначено
Непомітно для користувача, «Швидкі команди» автоматом закодовує і декодує значення, яке ви отримуєте, щоб передавати між JavaScript і програмою «Швидкі команди». Це означає, що вам не треба викликати JSON.stringify(result) перед викликанням оброблювача завершення.
Через те, що видане значення є JSON, певні видані значення не працюватимуть добре. Наприклад, функція або Вузол не матимуть прийнятного JSON-кодованого подання. У такому випадку рекомендовано, щоб ви створили Масив/Словник, що містить JSON-суміcні значення, які потрібні вам.
Примітка. Обʼєктом у JavaScript є всього лише словник, тому базові обʼєкти добре конвертуються в JSON.
Якщо ви не хочете отримувати жодних даних із дії «Запустити JavaScript на вебсторінці», ви можете викликати completion() без жодного аргументу в цій функції (бо undefined є дійсними вихідними даними). Це те саме, що викликання completion(undefined) .
Ліміт часу на дію «Запустити JavaScript на вебсторінці»
Як і решта JavaScript-розширень у Safari, дія «Запустити JavaScript на вебсторінці» має свій часовий ліміт і повинна виконуватися якомога швидше. JavaScript, що використовує синхронні функції, може бути не завершено вчасно, зокрема:
- window.alert()
- window.prompt()
- window.confirm()
- Часи очікування, що тривають більше одної секунди, наприклад: window.setTimeout(function() < completion(); >, 5000);
Якщо ваш JavaScript перевищує часовий ліміт, швидка команда не зможе виконатися, і коли ви запустите цю швидку команду, зʼявиться повідомлення про помилку «Час на JavaScript минув».
Усунення помилок синтаксису й середовища виконання
Ви можете використовувати будь-який синтаксис, що підтримується в Safari, для опису JavaScript у дії «Запустити JavaScript на вебсторінці».
У програмі Швидкі команди дія «Запустити JavaScript на вебсторінці» допомагає вам виявити помилки з допомогою перевірки базового синтаксису до того, як ви запустите цю швидку команду з розширення Safari.
Коли ви вводите свій сценарій у текстовому полі, виділяння синтаксису допомагає вам стежити за коректністю JavaScript. Наприклад, якщо ви забули додати лапки в кінці рядка, весь текст за таким рядком виділяється.
Якщо синтаксис вашого сценарію правильний, але містить помилку середовища виконання, дія «Запустити JavaScript на вебсторінці» виловлює і показує винятки. Для прикладу, якщо ваш сценарій посилається на змінну або функцію, якої не існує (як-от shortcuts.completion() ), під час виконання показується помилка.
Действия браузера по умолчанию
Многие события автоматически влекут за собой действие браузера.
- Клик по ссылке инициирует переход на новый URL.
- Нажатие на кнопку «отправить» в форме – отсылку её на сервер.
- Зажатие кнопки мыши над текстом и её движение в таком состоянии – инициирует его выделение.
Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.
Отмена действия браузера
Есть два способа отменить действие браузера:
- Основной способ – это воспользоваться объектом event . Для отмены действия браузера существует стандартный метод event.preventDefault() .
- Если же обработчик назначен через on (не через addEventListener ), то также можно вернуть false из обработчика.
В следующем примере при клике по ссылке переход не произойдёт:
Нажми здесь или здесь
Возврат false из обработчика – это исключение
Обычно значение, которое возвращает обработчик события, игнорируется.
Единственное исключение – это return false из обработчика, назначенного через on .
В других случаях return не нужен, он никак не обрабатывается.
Пример: меню
Рассмотрим меню для сайта, например:
Данный пример при помощи CSS может выглядеть так:
В HTML-разметке все элементы меню являются не кнопками, а ссылками, то есть тегами . В этом подходе есть некоторые преимущества, например:
- Некоторые посетители очень любят сочетание «правый клик – открыть в новом окне». Если мы будем использовать или , то данное сочетание работать не будет.
- Поисковые движки переходят по ссылкам при индексации.
Например, вот так:
menu.onclick = function(event) < if (event.target.nodeName != 'A') return; let href = event.target.getAttribute('href'); alert( href ); // может быть подгрузка с сервера, генерация интерфейса и т.п. return false; // отменить действие браузера (переход по ссылке) >;
Если мы уберём return false , то после выполнения обработчика события браузер выполнит «действие по умолчанию» – переход по адресу из href . А это нам здесь не нужно, мы обрабатываем клик сами.
Кстати, использование здесь делегирования событий делает наше меню очень гибким. Мы можем добавить вложенные списки и стилизовать их с помощью CSS – обработчик не потребует изменений.
События, вытекающие из других
Некоторые события естественным образом вытекают друг из друга. Если мы отменим первое событие, то последующие не возникнут.
Например, событие mousedown для поля приводит к фокусировке на нём и запускает событие focus . Если мы отменим событие mousedown , то фокусирования не произойдёт.
В следующем примере попробуйте нажать на первом – происходит событие focus . Но если вы нажимаете по второму элементу, то события focus не будет.
Это потому, что отменено стандартное действие mousedown . Впрочем, фокусировка на элементе всё ещё возможна, если мы будем использовать другой способ. Например, нажатием клавиши Tab можно перейти от первого поля ввода ко второму. Но только не через клик мышью на элемент, это больше не работает.
Опция «passive» для обработчика
Необязательная опция passive: true для addEventListener сигнализирует браузеру, что обработчик не собирается выполнять preventDefault() .
Почему это может быть полезно?
Есть некоторые события, как touchmove на мобильных устройствах (когда пользователь перемещает палец по экрану), которое по умолчанию начинает прокрутку, но мы можем отменить это действие, используя preventDefault() в обработчике.
Поэтому, когда браузер обнаружит такое событие, он должен для начала запустить все обработчики и после, если preventDefault не вызывается нигде, он может начать прокрутку. Это может вызвать ненужные задержки в пользовательском интерфейсе.
Опция passive: true сообщает браузеру, что обработчик не собирается отменять прокрутку. Тогда браузер начинает её немедленно, обеспечивая максимально плавный интерфейс, параллельно обрабатывая событие.
Для некоторых браузеров (Firefox, Chrome) опция passive по умолчанию включена в true для таких событий, как touchstart и touchmove .
event.defaultPrevented
Свойство event.defaultPrevented установлено в true , если действие по умолчанию было предотвращено, и false , если нет.
Рассмотрим практическое применение этого свойства для улучшения архитектуры.
Помните, в главе Всплытие и погружение мы говорили о event.stopPropagation() и упоминали, что останавливать «всплытие» – плохо?
Иногда вместо этого мы можем использовать event.defaultPrevented , чтобы просигналить другим обработчикам, что событие обработано.
Давайте посмотрим практический пример.
По умолчанию браузер при событии contextmenu (клик правой кнопкой мыши) показывает контекстное меню со стандартными опциями. Мы можем отменить событие по умолчанию и показать своё меню, как здесь:
Теперь в дополнение к этому контекстному меню реализуем контекстное меню для всего документа.
При правом клике должно показываться ближайшее контекстное меню.
Правый клик здесь вызывает контекстное меню документа
Проблема заключается в том, что когда мы кликаем по элементу elem , то мы получаем два меню: контекстное меню для кнопки и (событие всплывает вверх) контекстное меню для документа.
Как это поправить? Одно из решений – это подумать: «Когда мы обрабатываем правый клик в обработчике на кнопке, остановим всплытие», и вызвать event.stopPropagation() :
Правый клик вызывает меню документа
Теперь контекстное меню для кнопки работает как задумано. Но цена слишком высока. Мы навсегда запретили доступ к информации о правых кликах для любого внешнего кода, включая счётчики, которые могли бы собирать статистику, и т.п. Это слегка неразумно.
Альтернативным решением было бы проверить в обработчике document , было ли отменено действие по умолчанию? Если да, тогда событие было обработано, и нам не нужно на него реагировать.
Правый клик вызывает меню документа (добавлена проверка event.defaultPrevented)
Сейчас всё работает правильно. Если у нас есть вложенные элементы и каждый из них имеет контекстное меню, то код также будет работать. Просто убедитесь, что проверяете event.defaultPrevented в каждом обработчике contextmenu .
event.stopPropagation() и event.preventDefault()
Как мы можем видеть, event.stopPropagation() и event.preventDefault() (также известный как return false ) – это две разные функции. Они никак не связаны друг с другом.
Архитектура вложенных контекстных меню
Есть также несколько альтернативных путей, чтобы реализовать вложенные контекстные меню. Одним из них является единый глобальный объект с обработчиком document.oncontextmenu и методами, позволяющими хранить в нём другие обработчики.
Объект будет перехватывать любой клик правой кнопкой мыши, просматривать сохранённые обработчики и запускать соответствующий.
Но при этом каждый фрагмент кода, которому требуется контекстное меню, должен знать об этом объекте и использовать его вместо собственного обработчика contextmenu .
Итого
Действий браузера по умолчанию достаточно много:
- mousedown – начинает выделять текст (если двигать мышкой).
- click на – ставит или убирает галочку в input .
- submit – при нажатии на или при нажатии клавиши Enter в форме данные отправляются на сервер.
- keydown – при нажатии клавиши в поле ввода появляется символ.
- contextmenu – при правом клике показывается контекстное меню браузера.
- …и многие другие…
Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JavaScript.
Чтобы отменить действие браузера по умолчанию, используйте event.preventDefault() или return false . Второй метод работает, только если обработчик назначен через on .
Опция passive: true для addEventListener сообщает браузеру, что действие по умолчанию не будет отменено. Это очень полезно для некоторых событий на мобильных устройствах, таких как touchstart и touchmove , чтобы сообщить браузеру, что он не должен ожидать выполнения всех обработчиков, а ему следует сразу приступать к выполнению действия по умолчанию, например, к прокрутке.
Если событие по умолчанию отменено, то значение event.defaultPrevented становится true , иначе false .
Сохраняйте семантику, не злоупотребляйте
Технически, отменяя действия браузера по умолчанию и добавляя JavaScript, мы можем настроить поведение любого элемента. Например, мы можем заставить ссылку работать как кнопку, а кнопку вести себя как ссылка (перенаправлять на другой URL).
Но нам следует сохранять семантическое значение HTML элементов. Например, не кнопки, а тег должен применяться для переходов по ссылкам.
Помимо того, что это «хорошо», это делает ваш HTML лучше с точки зрения доступности для людей с ограниченными возможностями и с особых устройств.
Как включить на телефоне javascript
JavaScript — объектно-ориентированный скриптовый язык программирования. Подробнее..
Если вы увидели сообщение на сайте наподобие «Вам необходимо включить javascript».
Нет необходимости искать где скачать JavaScript или как его установить в браузер.
JavaScript встроен в браузеры и вам необходимо просто включить его.
Как включить JavaScript в браузере: Opera, Google Chrome, Mozilla Firefox, Internet Explorer, Apple Safari, Netscape Navigator
- JavaScript
- FAQ
- JavaScript скачать бесплатно
Примеры полезных JS-скриптов
С помощью блока «вставка HTML кода» (T123, категория Другое) на страницу можно добавить абсолютно любой скрипт. Мы собрали примеры кода, который вы можете использовать, чтобы добавить некоторые функции.
о достижении цели при клике на ссылку / кнопку
о клике на кнопку
об открытии попапа
после отправки на приемщик данных Тильды
перед переходом из корзины на сайт платежной системы
который срабатывает на кнопки/ссылки с определённым классом
в Facebook Pixel
Примите во внимание, что ниже приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.
Перехват различных событий на странице
Перехват может понадобиться, если мы хотим отследить открытие попапа, переход по ссылке, отправки данных на сторонний сервис после успешной отправки формы, встраивание в форму своих контролов и много чего еще, на что хватает фантазии и в чем есть потребность.
Перехват клика по ссылке
Перехват клика по ссылке в конкретном блоке
Перехватываем клик по ссылке в блоке #rec123456789
где #rec123456789 — номер блока, в который добавится виджет с погодой;
Номер блока можно посмотреть в Настройках блока
Отправка события в Яндекс.Метрику о достижении цели при клике на ссылку/кнопку
Указанный скрипт отслеживает клик по любой ссылке/кнопке, у которой адрес совпадает с «ссылка». Если такой клик произошел, то будет отправлено событие «цель» в метрику.
где XXXXXX — номер вашего счетчика;
Отправка события в Яндекс.Метрику о достижении цели при клике на внешнюю ссылку/кнопку
Указанный скрипт отслеживает клик по любой внешней ссылке/кнопке, у которой адрес совпадает с «ссылка». Если такой клик произошел, то будет отправлено событие «цель» в метрику.
где XXXXXX — номер вашего счетчика;
Пример отправки событий при клике на кнопки
Есть две кнопки, одна ведет на блок с текстом размещенный на этой же странице, а вторая на другую страницу. У первой кнопки прописан якорь на блок #rec12345678, а у второй ссылка на внешнюю страницу http://help-ru.tilda.cc/
где yaCounterXXXXXX — номер вашего счетчика;
Отправка события в Яндекс. Метрику об открытии попапа
Отлавливаем все клики и если, ссылка на которую кликнули, указывает на «#popup. «, то отправляем в метрику событие — просмотр страницы, ведь попап это тоже страница, да и просмотр страницы легче отследить или построить составную цель (например: открытие страницы, открытие попапа, отправка формы)
Чтобы код ниже заработал, его нужно поместить в HTML-блок, который должен быть в самом верху
Отправка события в Яндекс. Метрику о добавлении товара в Корзину
Указанный скрипт отслеживает клик по кнопке добавления в Корзину. Если такой клик произошел, то будет отправлена цель «AddToCart» в метрику.
где yaCounterXXXXXX — номер счетчика;
AddToCart — произвольное имя цели в Яндекс.Метрике;
Отправка информации в Google Analytics о клике на ссылку / кнопку
Скрипт отслеживает клик по любой ссылке/кнопке, в адресе которой содержится «значение в url». Если такой клик произошел, то будет отправлена информация о клике. Ниже образец кода. Значения, которые нужно заменить выделены прописными.
ЗНАЧЕНИЕ В URL — здесь нужно поставить любое слово, которое есть в ссылке. Например, при клике на кнопку, посетитель попадает на страницу регистрации по адресу: http://mysite.com/registration. В этом случае вместо ЗНАЧЕНИЕ В URL укажите registration.
НАЗВАНИЕ ВИРТУАЛЬНОЙ СТРАНИЦЫ. Информация о клике на кнопке в Google Analitycs появится в виде статистики просмотра виртуальной страницы. Страница виртуальная, поэтому здесь может быть что угодно.
ССЫЛКА — ссылка, которая стоит на кнопке. Например, http://mysite.com/registration
Чтобы отслеживать клик на кнопку, как достижение цели, создайте в Google Analitycs цель: Собственная цель → Целевая страница → Начинается с /click/
Отправка формы на свой ресурс после отправки на приемщик данных Тильды
Проходим все формы и прописываем в них название функции, которую форма сама вызовет после успешной отправки данных
Отправка данных из формы Zero блока на свой ресурс
Выполнение своей функции перед переходом из корзины на сайт платежной системы
Если нам нужно, добавить в cookie информацию о содержимом корзины, или отправить события типа ecommerce в GA или Метрику, то используя вышеуказанный скрипт это можно сделать. Скрипт вызывается прямо перед переходом к платежной системе или вызова виджета оплаты.
Сторонний сервис, который срабатывает на кнопки/ссылки с определённым классом
Например, если необходимый сервис при клике на кнопку открывает специальный диалог, то важно соблюдать порядок работы со скриптом сервиса. Чтобы избежать проблем, сначала происходит добавление классов для кнопок, а потом вставка скрипта:
Запуск разных виджетов для мобильных и десктопных клиентов
Иногда нужно вставить громоздкий виджет для десктопа, при этом небольшой виджет для мобильного варианта. Для этого нам на помощь придет переменная window.isMobile
Пример вставки смешанного виджета
Вместо условия window.isMobile можно использовать размеры экрана, например, window.innerWidth < 960
Bnovo '; > else < /* код для десктопных клиентов */ html = ''; > var widgetBox = document.querySelector('#widgetbox'); if (widgetBox) widgetBox.insertAdjacentHTML('beforeend', html); >
Как сделать меню в Zero блоке
Данная опция появилась теперь встроена в редактор Zero Block. Чтобы включить фиксирование блока, перейдите в настройки артборда → Position and Overflow и поставьте значение Fixed. Подробнее о настройках фиксации →
Запрет автоматической передачи данных о лидах в Facebook Pixel
Если установить Facebook Pixel, то на странице появится объект fbq, который при отправке формы в Facebook отправляет событие Lead. Если требуется собственная настройка пикселя Facebook, запретить это поведение можно с помощью кода:
Компания Meta Platforms Inc., владеющая социальными сетями Facebook и Instagram, по решению суда от 21.03.2022 признана экстремистской организацией, ее деятельность на территории России запрещена.
Примите во внимание, что выше приведены образцы кода, которые вам нужно будет модифицировать самостоятельно, и эти действия требуют понимания того, как работает Javascript. К сожалению, мы не осуществляем поддержку по вопросам, связанным с работой стороннего кода.
