HTML и CSS код веб-страницы: как его редактировать из адресной строки

Трюк для изменения структуры и макета любой веб-страницы из адресной строки браузера с помощью программы, созданной на основе Chromium и простого кода JavaScript.

Когда вы открываете любую веб-страницу, браузер считывает код, формирующий сайт, и отображает его с помощью директив, заданных на уровне HTML, CSS и JavaScript.

В Chrome, Edge, Opera или в любом случае во всех браузерах, производных от Chromium, можно щелкнуть правой кнопкой мыши любой элемент, из которого состоит веб-страница, а затем выбрать «Проверить» или «Проверить» в контекстном меню, чтобы проверить, как создается объект.

Щелкнув вкладку «Сеть», вы можете проверить все элементы, составляющие HTML-страницу, по мере их загрузки.

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

В статье Редактирование веб-страницы из браузера с помощью элемента Inspect мы видели, как такие инструменты, как Inspect и Examine, работают в Chrome Dino, игра, интегрированная в браузер, может научить нас изменять код JavaScript, загружаемый с веб-страницы.

Знаете ли вы, что код HTML и CSS веб-страницы также можно редактировать из адресной строки?

Гораздо менее известна возможность взаимодействия с HTML-кодом и CSS веб-страницы из адресной строки браузера.

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

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

Например, предположим, что некий веб-сайт автоматически уменьшает высоту тега div с идентификатором article-body, предотвращая чтение всего содержимого.

Предположим, что операция выполняется с использованием свойства max-height в стиле тега:

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

Как принудительно загрузить все содержимое рассматриваемого тега div? В этом случае просто удалите свойство max-height из стиля.

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

document.getElementById(«тело статьи»).style.maxHeight=null;

Добавив javascript: в качестве «префикса», затем преобразовав то, что вставлено в адресную строку, следующим образом, мы удалим свойство max-height:

javascript:document.getElementById(«тело статьи»).style.maxHeight=null;

Браузер, основанный на Chromium, просто попросили выполнить простую строку кода JavaScript в DOM или содержимом посещаемой вами HTML-страницы.

В примере используется метод JavaScript getElementById для поиска на веб-странице тега с идентификатором article-body.

Как только соответствующий атрибут стиля найден, он проверяется на наличие свойства max-height на уровне кода JavaScript.Код JavaScript должен быть выражен в форме maxHeight (поэтому без дефисов и с заглавной «H»).

В нашем случае значение свойства max-height, каким бы оно ни было, устанавливается равным null (нуль) и, следовательно, эффективно удаляется: при нажатии Enter рассматриваемый тег div больше не будет иметь ограничений по высоте, и его содержимое будет полностью раскрыто.

Красиво, не так ли? Тот же подход можно использовать для удаления раздражающих элементов, добавив свойство display: none; для стиля через JavaScript.

Строку кода JavaScript можно вставить как в адресную строку настольного браузера, так и на мобильных устройствах, например, в Chrome для Android. Важно никогда не забывать префикс javascript:.

Щелкнув правой кнопкой мыши на панели избранного браузера (CTRL + SHIFT + B), вы также можете добавить новую кнопку, содержащую код JavaScript в поле URL:

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

Этот прием основан на использовании понятия букмарклет.