Как вставить скрипт в браузер

Инструкция по запуску Java-скриптов в браузерах Firefox, Chrome, IE, Opera, Safari и других

На нашем сайте опубликовано уже множество различных Java-скриптов для социальных сетей. И в описании каждого скрипта описывать подробные инструкции по их запуску… Это ни к чему. Мы решили написать полноценный мануал с описанием установки скриптов на все браузеры, а также учесть наличие нескольких способов установки на один конкретный браузер и описать их все.

Запуск Java-скриптов через консоль браузера

Сейчас, как известно, запуск скриптов через консоль является наиболее популярным и простым, а главное рабочим способом их использования. Следовательно, с этого мы и начнём – со способов попасть в консоль для каждого браузера.

Консоль в Mozilla Firefox

Проще всего попасть в веб-консоль в браузере Mozilla Firefox можно при помощи сочетания клавиш Ctrl + Shift + K. Нажмите и консоль отобразится.

Консоль в Google Chrome и других браузерах, основанных на Chromium

В Google Chrome, Opera 15+, Амиго, Orbitum и других браузерах, основанных на Chromium, также имеется способ запуска веб-консоли при помощи горячих клавиш. Для этого нужно одновременно нажать Ctrl + Shift + J.

Консоль в Opera 12

Чтобы запустить веб-консоль в браузере Opera старого поколения (не старше 12-ой версии), нужно использовать сочетание клавиш Ctrl + Shift + I. Это позволит запустить Opera Dragonfly – панель с инструментами для разработчика. После её открытия перейдите на вкладку Консоль.

Консоль в Internet Explorer

Чтобы открыть консоль в веб-браузере Internet Explorer, необходимо сначала нажать на кнопку F12, а затем нажать сочетание Ctrl + 2 (двойка на центральной панели, а не в секции Num).

Консоль в Safari

В Safari, перед открытием консоли, обязательно нужно войти в настройки браузера (шестерёнка в правом верхнем углу » Настройки… » Дополнения) и подключить опцию Показывать меню «Разработка» в строке меню. После этого, консоль можно будет вызывать сочетанием клавиш Ctrl + Alt + C.

Все скрипты вводятся в консоли в специально отведённое поле рядом с иконкой-стрелочкой (см. скриншоты, зоны для ввода скриптов выделены красной рамкой). Запуск скриптов осуществляется нажатием кнопки Enter. После ввода и запуска любого скрипта вы будете видеть все комментарии или ошибки в ходе их выполнения.

Запуск Java-скриптов из адресной строки браузера

Метод запуска скриптов из адресной строки браузера является более старым методом, а скорее даже традиционным. Изначально, все скрипты запускались именно таким образом. Но тенденции меняются, мир развивается. В большинстве браузеров после вставки кода скрипта в адресную строку нужно дописывать код вручную, чтобы запустить, а в некоторых браузерах адресная строка вообще не обрабатывает java-скрипты.

Адресная строка в Mozilla Firefox

Печально, но ни одна из самых последних версий браузера Mozilla Firefox не поддерживает обработку скриптов через адресную строку. Хоть и в более ранних версиях подобная опция присутствовала, в современном Firefox разработчики решили от этого отказаться.

Адресная строка в Google Chrome и других браузерах, основанных на Chromium

В браузере Google Chrome и любом другом браузере, построенном на его исходных кодах, таких, например, как Opera 15+, Amigo, Orbitum и других, можно запускать скрипты в адресной строке. Но! После вставки скрипта, перед ним обязательно нужно дописывать слово javascript: (вместе с двоеточием), иначе (благодаря такому явлению, как omnibox) вместо запуска скрипта будет происходить перенаправление на поисковую систему.

Адресная строка в Opera 12

В браузере Opera 12 всё обстоит намного лучше. Для запуска скрипта достаточно вставить его в адресную строку и запустить. Никаких проблем при этом возникать не должно.

Адресная строка в Internet Explorer

В данном браузере, как и в Google Chrome и ему подобных, после вставки скрипта в адресную строку, в самом начале нужно дописать javascript: (вместе с двоеточием), иначе скрипт не заработает.

Адресная строка в Safari

Ну а в Safari дела обстоят так же хорошо, как и в Opera 12. Просто вставьте имеющийся скрипт в адресную строку и запустите.

Использование браузерных плагинов для хранения и запуска скриптов

Если скрипты нужно использовать постоянно, то необходимо возиться с ними, копировать с сайта или текстового файла, вставлять в адресную строку или консоль каждый раз. Согласитесь, – это не удобно. Именно поэтому были придуманы специальные расширения (плагины) для браузеров, предназначенные для хранения и запуска скриптов. Речь пойдёт о двух плагинах: Greasemonkey для Mozilla Firefox и Tampermonkey для Google Chrome.

Плагин Greasemonkey для Mozilla Firefox

Плагин Greasemonkey для Mozilla Firefox позволяет создавать, сохранять и запускать скрипты, добавленные пользователями. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).

Плагин Tampermonkey для Google Chrome

Плагин Tampermonkey является аналогом плагина Greasemonkey для Firefox и точно также позволяет создавать, сохранять и запускать пользовательские скрипты. Будьте внимательны! При использовании скриптов для удаления или изменения чего-либо, сразу после их добавления в плагин они будут запущены автоматически. Настоятельно не рекомендуем добавлять в плагин скрипты, к примеру, для удаления записей со стены ВКонтакте при открытой странице ВКонтакте (мало ли что).

Вот так работают плагины Greasemonkey и Tampermonkey. Всё быстро и просто. Добавленные скрипты никуда не пропадают, их также можно включать и выключать в любое удобное время.

Заключение

Все описанные способы запуска Javascript описаны для самых последних версий популярных веб-браузеров. Если вы используете другой браузер или более устаревшую версию браузера, и способы запуска скриптов в нём отличаются от описанных в данной статье, просьба сообщить об этом в комментариях.

Источник

Современная загрузка скриптов

Передать нужный код для каждого браузера – непростая задача.

В этой статье рассмотрим несколько вариантов, как эту задачу можно решить.

Передача современного кода современным браузером может очень сильно повысить производительность. Ваши JavaScript-пакеты смогут содержать более компактный или оптимизированный современный синтаксис и поддерживать старые браузеры.

Среди инструментов для разработчиков доминирует паттерн module/nomodule декларативной загрузки современного или legacy-кода, который предоставляет браузерам источники и позволяет решать, какие из них использовать:

К сожалению, не всё так просто. Показанный выше подход на основе HTML инициирует перезагрузку скриптов в Edge и Safari.

Что можно сделать?

В зависимости от браузера нам нужно доставить один из вариантов скомпилированных скриптов, но пара старых браузеров не поддерживают весь необходимый для этого синтаксис.

Способ первый: динамическая загрузка

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

Можно реализовать независимый вариант, проверяя, поддерживается ли nomodule в браузере. Это означает, что мы будем рассматривать браузеры вроде Safari 10.1 как устаревшие, даже если они поддерживают модули. Но это может быть к лучшему. Вот соответствующий код:

Это можно быстро превратить в функцию, которая загружает современный или legacy-код, а также обеспечивает асинхронность их загрузки:

Какой же здесь компромисс?

Если для вас эта методика подходит, можете уменьшить размер HTML-документа, в который вы встраиваете эти скрипты. Если ваша полезная HTML-нагрузка маленькая, как экран заставки или код загрузки клиентского приложения, то отказ от сканера предварительной загрузки вряд ли повлияет на производительность. А если вы отрисовываете на сервере много важного HTML, чтобы отправить в браузеры, тогда сканер предварительной загрузки окажется вам полезен и описанный подход будет для вас не лучшим вариантом.

Вот как это решение может выглядеть в эксплуатации:

Способ второй: отслеживание User Agent

У меня нет подходящего примера кода, поскольку отслеживание User Agent — задача нетривиальная. Но зато вы можете почитать прекрасную статью в Smashing Magazine.

По сути всё начинается с того же в HTML для всех браузеров. Когда запрашивается bundle.js, сервер парсит строку User Agent запрашивающего браузера и выбирает, какой JavaScript возвращать — современный или legacy, в зависимости от того, как был распознан браузер.

Для сайтов, которые уже генерируют HTML на сервере в ответ на каждый запрос, это может быть эффективным переходом к загрузке современных скриптов.

Способ третий: штрафуем старые браузеры

Негативный эффект паттерна module/nomodule виден в старых версиях Chrome, Firefox и Safari — их количество очень невелико, поскольку браузеры обновляются автоматически. С Edge 16-18 ситуация иная, но есть надежда: новые версии Edge будут использовать движок отрисовки на основе Chromium, который не имеет таких проблем.

Для некоторых приложений это было бы идеальным компромиссом: загружать современную версию кода в 90 % браузеров, а в старые — отдавать legacy-код. Нагрузка в старых браузерах повысится.

К слову, ни один из User Agent’ов, для которых такая перезагрузка является проблемой, не занимают значимую долю мобильного рынка. Так что источником всех этих лишних байтов вряд ли будут мобильные устройства или устройства со слабым процессором.

Если вы создаёте сайт, к которому обращаются в основном мобильные или свежие браузеры, то для большинства этих пользователей подойдёт простейший вид паттерна module/nomodule. Только удостоверьтесь, что вы добавили фикс Safari 10.1, если к вам заходят более старые iOS-устройства.

Способ четвёртый: применяйте условия использования пакетов

Хорошим решением будет использовать nomodule для условной загрузки пакетов с кодом, который не нужен в современных браузерах, например, с полифиллами. При таком подходе в худшем случае полифиллы будут загружены или даже выполнены (в Safari 10.1), но эффект от этого будет ограничен «переполифиллингом». Учитывая, что сегодня преобладает подход с загрузкой и выполнением полифиллов во всех браузерах, это может быть достойным улучшением.

Можно сконфигурировать Angular CLI для использования этого подхода с полифиллами, как продемонстрировал Минко Гечев. Узнав об этом подходе, я понял, что можно включить автоматическую инъекцию полифиллов в preact-cli — этот PR демонстрирует, насколько легко можно внедрить эту методику.

Так что же выбрать?

Если вы создаёте сайт, который отрисовывается на сервере, и можете позволить себе кэширование, то вам может подойти второй способ.

Если вы используете универсальный рендеринг, выигрыш в производительности, предлагаемый сканированием до загрузки, может оказаться очень важным. Поэтому обратите внимание на третий или четвёртый способы. Выбирайте то, что подходит для вашей архитектуры.

Лично я выбираю, ориентируясь на длительность парсинга на мобильных устройствах, а не на стоимость загрузки в десктопных версиях. Мобильные пользователи воспринимают парсинг и расходы на передачу данных как фактические расходы (расход заряда батареи и плату за передачу данных), тогда как пользователи десктопа не имеют таких ограничений. Также я исхожу из оптимизации под 90% пользователей — основная аудитория моих проектов пользуется современными и/или мобильными браузерами.

Что почитать

Хотите изучить эту тему подробнее? Можете начать отсюда:

Источник

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

Запускать JavaScript (или JS) код в браузере — обычный навык.

Если когда-то хотели апробировать свой первый JS-код, но боялись, этот пост для вас.

Цель поста для читателей — мочь самостоятельно запускать нужный код.

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

Друзья, которые читают. Если вы это видите, вероятно, вы только что получили код и конкретный пункт из этого пособия. Перечитайте пункт и установите скрипт по аналогии самостоятельно!

ПОМНИТЕ: не устанавливайте JS-код из сомнительных источников и когда не понимаете, что код делает!

§ I. ГДЕ запускать JavaScript код?

I.1. Через консоль браузера.

Чтобы открыть консоль нужно нажать ctrl+shfit+K или ctrl+shift+L.

Вставляете код, нажимаете enter, он сработает.

I.2. Через адресную строку браузера.

Это строка, где написан адрес сайта.

Стираете адрес сайта, вместо вставляете код, нажимаете enter, он сработает.

I.3. Через bookmarklet, или букмарклет, или «закладурку».

Это закладка браузера, в которой вместо сайта стоит JS-код.

Создаёте любую новую закладку. Затем находите закладку и исправляете её: вместо адреса сайта, который должен открываться, вставьте JS-код и сохраните.

Нажимаете на эту вкладку, срабатывает JS-код.

ПРИМЕЧАНИЕ: это один из удобнейших «многоразовых» способов запускать JS-код, в том числе в браузере смартфона!

I.4. Через обычный блокнот, сохранённый как HTML.

Открываете новый блокнот (notepad).

Вставляете туда нужный HTML с JS.

Нажимаете «Сохранить как», откроется меню. Тип файла — меняете «Текстовые документы (*.txt)» на «Все файлы (*.*)». Имя файла — мойкод.html. Его и открывать в браузере.

ПРИМЕЧАНИЕ: удобный «многоразовый» способ запускать JS-код на компьютере (без Интернета).

СПРАВОЧНО: HTML — это язык гипертекстовой разметки.

Любая открытая web-страница в браузере в общем случае — HTML.

I.5. Через блокнот в браузере (внося изменения в web-страницу).

Преимущества (многоразовое использование и не требуется Интернет), а также подход похожи на [I.4].

Открываете блокнот в браузере в качестве новой вкладки:

Затем в консоли находите элементы (HTML-код): открываете консоль (ctrl+shift+K или ctrl+shift+L), переходите в Elements.

Изменяете HTML-код, вставляя туда нужный HTML с JS.

Сохраняете страницу, закрываете её.

После сохранения её и открывать в браузере.

ПРИМЕЧАНИЕ: кстати, сам упомянутый браузерный блокнот удобен для своих заметок, которые можно потом сохранять в специальной папке (ctrl+s).

I.6. Через онлайн компилятор/интерпретатор.

Вставляете HTML и JavaScript в соответствующие поля, нажимаете «Save» для сохранения страницы с уникальным адресом (или «Run» для предпросмотра).

Для демонстрации сохранённого можно вставить в конец адреса «/show», будет видна просто страница:

ПРИМЕЧАНИЕ: удобнейший «многоразовый» способ запускать JS-код (когда есть Интернет).

I.7. Через специально установленные расширения (addon) браузера.

Вставляете код, сохраняйте. На соответствующих страницах должно работать.

ПРИМЕЧАНИЕ: удобно автоматически запускать JS-код сразу после загрузки (например, на конкретных сайтах с помощью @match).

§ II. ОСНОВНЫЕ ВИДЫ запуска JavaScrpt-кода?

Здесь речь будет идти о простейшем коде, запускающем окошко с текстом.

В будущем вместо него вам может быть нужно запускать какой-то другой код (но подход, описанный ниже, останется).

Применение: [I.1] консоль.

II.2. Протокол: немедленно вызываемая функция (или IIFE) объявляется и запускается.

Применение: [I.2] адресная строка браузера;

II.3. Userscript для Tampermonkey / Greasemonkey.

Применение: [I.7] специальные аддоны Tampermonkey / Greasemonkey.

II.5. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать.

II.5.1. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код на странице.

var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.textContent=»var func1=function();»;
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);

var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);

II.5.2. Протокол: немедленно вызываемая функция, добавляющая на страницу код и кнопку, с помощью которой его можно запускать: код по ссылке.

var scr1 = document.createElement(‘script’);
scr1.setAttribute(‘type’,’text/javascript’);
scr1.setAttribute(‘src’,’http://codepad.org/2NJ2YB3V/raw.txt’);
document.documentElement.getElementsByTagName(‘*’)[0].appendChild(scr1);

var btnDiv1 = document.createElement(‘div’);
btnDiv1.id = ‘btnDivId1’;
btnDiv1.style.position = ‘relative’;
btnDiv1.style.zIndex = 99999;
var btn1 = document.createElement(‘button’);
btn1.innerHTML = ‘Click’;
btn1.id = ‘btnId1’;
btn1.setAttribute(«onclick», «javascript:func1();»);

§ III. ОСНОВНЫЕ ТИПЫ запускаемых Javascript-кодов?

Разумеется, типов множество, но некоторые мы разобрали.

а) запускаемый сразу;

б) запускаемый после загрузки страницы;

в) запускаемый по кнопке;

г) запускаемый каждые N секунд — изучите самостоятельно!

Первые три вы знаете и видели.

Четвёртый нужно изучить самостоятельно, сделав по аналогии. И, если не выходит, пользуясь поиском в google. Или задавая вопросы на профильных сайтах, например, на stackoverflow или в соответствующих чатах.

Задание-1: чтобы закрепить знания, совет — проверить, «пощупать» каждый кусок кода, который приведён выше и удостовериться, что он работает.

Задание-2: измените КАЖДЫЙ приведённый выше кусок кода и удостоверьтесь, что он работает так, чтобы код запускался каждые 3 секунды.

Если обобщить, то измените в каждом куске

Как вы поняли, [II.1] уже сделан. Попробуйте сделать остальные.

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

[Доп.советы, чуть более углублённые мелочи]

IV.1. О том, где может храниться JavaScript.

Он может быть как внутри самого файла HTML, так и быть внешним (ссылкой на код).

Во втором случае, то есть для хранения внешних, использовался сайт codepad.org, хотя есть и аналоги [но некоторые аналоги могут на уровне не давать возможность его подгружать в браузер, давая ошибку «CORS»; сейчас неважно, но просто учтите].

Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).

На этом достаточно исчерпывающее пособие по запуску JavaScript подходит к концу.

Лицензия на текст, код и скрины: CC0.

UPD: ВНИМАНИЕ: В связи с закрытием сайта codepad.org просьба учитывать изменения, описанные в комментарии #comment_199553464

В связи с тем, что сайт codepad.org более не работает, соответствующие изменения:

В коде ссылку » http://codepad.org/AXduOuGF/raw.txt » заменить (считать заменённой) на

В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на

В коде ссылку » http://codepad.org/2NJ2YB3V/raw.txt » заменить (считать заменённой) на

Фразу «использовался сайт codepad.org » заменить (считать заменённой) на

«но некоторые аналоги могут на уровне не давать возможность» —

удалить слова «на уровне «.

Весь абзац «Там вставлялся код, выбирался «Plain Text», нажимался «Submit». После сохранения правой кнопкой мыши копировался адрес ссылки «Raw Code». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).» заменить (считать заменённым) на

«Там вставлялся код, выбирался «Text», нажимался «Run». После сохранения правой кнопкой мыши копировался адрес ссылки «Скачать». Он-то и является ссылкой (использовалась в [II.4.2], [II.4.4], [II.5.2]).»

Заменить (считать заменённой) на новую (прилагается).

Заменить (считать заменённой) на новую (прилагается).

Было желание опубликовать пост в Лига программистов, но там ограничение по карме, хотя там ему, мне кажется, самое место.

Возможно / разумно ли как-то попросить перенести?

Когда клиент попросил сделать креативную форму

Типичный ИИ-стартап

PS сам в таком работал

А #000000 это Гендальф-гот

Мировой бестселлер

Естественный отбор

Английский для программирования не важен!©

Первые дни на работе

Бэкенд удаленка на западную компанию? Есть ли у кого опыт устройства?

Хотел бы узнать, есть ли на пикабу бэкенд разрабы, удаленно работающие в США/Канаде/Европе? Как нашли/искали работу, какие подводные камни?

В РФ есть потолок зарплат, выше которого прыгнуть можно, но тут как повезет. Есть ощущение (возможно обманчивое), что на западе оклад выше и соответственно можно заработать больше чем тут.

Будни программиста

Перевел интерактивные уроки «ECMAScript 6»

Материал для начинающих.

В продолжение предыдущих топиков

Сообщаю: перевел курс ES6.

UPD: На всякий случай уточню: если вы JS еще не изучали, не следует сразу этот курс проходить, надо сначала базовый курс по JS пройти: https://freecode.academy/learn/sections/ck4h36qju0hp007829wp.

Вторая без первой не заведётся

Ответ на пост «Перевел интерактивные уроки «Базовый курс CSS» и «Базовый курс JavaScript»»

Раз пошла такая пьянка, рискну рассказать о сервисе, который сейчас разрабатываю в качетсве пэт проджекта.

А решил я создать сайт с интерактивными курсами по программированию.
На текущий момент уже созданы курсы :
Базовый HTML, (источник freecodecamp, планируется пополняться и расширяться)

В планах сделать интерактивные курсы по питону.
Что из недостатков по сайту вижу сейчас:

— немного страдает адаптивность, хотя в целом сайт не предназначен для мобильных устройст, т.к. неудодно писать код с мобилки

— не весь функционал реализован до конца

— некоторые курсы (в частности JS) содержат не совсем актуальную информацию. По JS в будущем хочу сделать отдельный курс по ES6 (либо актуальному на момент создания стандарту)

Проект в целом создавался скорее для собственного интереса, т.к. было интересно реализовать возможность интерактивных задач для различных ЯП в браузере.

Источник