Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.

CSS

В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.

Спрятать по имени класса (class)

HTML пример

этот блок нужно спрятать

CSS пример

Sidebar {display: none;}

.

Спрятать по id

HTML пример

этот блок нужно спрятать

CSS пример

#sidebar {display: none;}

Код выше скроет все элементы на странице с .

Спрятать по другим атрибутам

В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.

HTML пример

Ссылка

CSS пример

Container div:nth-child(2) {display: none} .

Container div:nth-child(2) спрячет второй div внутри блока.container.

div спрячет все div элементы со страницы, у которых есть data-id атрибуты со значением "hello-world" , если указать так , то это будет скрыты не только div элементы, но уже все элементы будут проверены на наличие такого атрибута и значения.

Вы так же можете убрать элемент другими свойствами CSS, например:

Sidebar { display: none; opacity: 0; z-index: -999; visibility: hidden; width: 0; height: 0; position: absolute; left: -9999; top: -9999; }

Описание CSS свойств из примера выше

opacity: 0 — устанавливает прозрачность до 0, тем самым элемент совсем не будет показан на странице, чтобы снова показать нужно установить 0.1 (10% видимости элемента), 0.2, … 1.

z-index: -999 — устанавливает расположение слоя. Чем выше цифра, тем элемент, который вы хотите спрятать будет находиться выше других слоев. Например, если у слоя.sidebar стоит z-index: 999, а у.container стоит z-index: 100, то даже если поставить эти слои друг на друга, .sidebar все равно будет отображаться выше.container, так как index у него стоит выше.

visibility: hidden — схожее свойство с display: none

width: 0;height: 0; — если их поставить к нулю, то у вашего элемента высота и ширина будет равно 0, тем самым он вообще не будет показывать на экране.

position: absolute; left: -9999; top: -9999 — в данном случае, элемент переместиться за пределы экрана пользователя, тем самым не будет виден на странице

jQuery

Элементы на странице так же можно скрыть при помощи jQuery. Вы должны сначала установить библиотеку jQuery, прежде чем начать пользоваться ее функциями.

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

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

Удалить элемент с помощью класса (class)

Скрипт ниже удалить все элементы со страницы с классом sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $(".sidebar").remove(); }); });

Удалить элемент с помощью id

Скрипт ниже удалить элемент со страницы с id sidebar.

HTML пример

Текст

jQuery пример

$(function() { $(document).ready(function() { $("#sidebar").remove(); }); });

Удалить элемент по атрибуту

$(function() { $(document).ready(function() { $("a").remove(); }); });

Таким образом можно удалить все что угодно на странице.

JavaScript

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

Удалить элемент с помощью class

HTML пример

Текст

JavaScript пример

document.getElementsByClassName("sidebar").remove() script2.php Его задача: выдать конечный скрипт, если есть заголовок referer
Итоги В итоге мы получаем, что мы не можем ни посмотреть в исходном коде страницы, ни скачать, ни сохранить скрываемый скрипт средствами тестируемых четырех браузеров. Вообще же можно посмотреть его двумя способами:

  • Переход по ссылке прямо ведущей на script2.php и расположенной на странице нашего сайта;
  • Формирование http-запроса с указанием в нем заголовка referer.
Повысыть эффективность скрытия можно такими методами:
  • С помощью mod-rewrite заменять идущие к серверу script1.js и script2.js на script1.php и script2.php соответственно, чтобы на странице были всем привычные файлы js, так как php резко бросается в глаза;
  • Сделать фиктивный скрипт максимально сложным, правдоподобным и запутанным, чтобы человек пытающийся его разобрать изрядно помучался перед осознанием того, что его обманули;
  • Обфускация кода.
    • Честно говоря, никакому разработчику это не нужно, в основном любой javascript код легко посмотреть в браузере, и поэтому особых причин скрывать свой код нет. Это, так сказать, видимое, то, что нельзя скрыть. Однако, есть ребята, которые очень стесняются показывать свой код кому-либо, считая, что это собственность, которую нельзя украсть, допустим, библиотеки. Вы создали онлайн-сервис, специально к нему создали мощную сложную библиотеку, выполняющую определенные операции, аналогов вашего сервиса, вашей библиотеки нет, и, естественно, вам не хотелось бы, чтобы ваш скрипт легко видел каждый (разработчик) и мог на примере вашего сделать подобный, еще более лучший. Конечно, нет ничего плохого в том, чтобы делать что-то лучше, это эволюция, но с точки зрения бизнеса, конкурентам это только на руку.Что для этого нужно? Вам нужно лишь понять алгоритм и попробовать улучшить его, а мне пересказать свой опыт того, как я делал скрытые скрипты. Первое, что нам нужно — это протестировать задачу на реальном (локальном) сервере, я буду это делать при помощи Denwer на локальном сервере.

    а) Для тестирования создайте каталог на сервере.
    Я захожу на виртуальный диск, у меня это диск R, там же зайдите в папку home

    Создайте директорию script, а внутри создайте папку www, в итоге у вас получится: home/script/www/ — после этого обязательно обновите сервер (Restart Denwer)

    б) Создаем файл index.php – допустим, это наша главная страница сайта, и тут нам нужно выводить скрытые скрипты. Так же создайте папку «js» в этом каталоге.

    Для нашей задачи, потребуются AJAX-запросы, для этого вы можете использовать свои рациональные функции, но если ваш проект будет разрастаться до размеров, который потребует применение особых эффектов, событий, подключите библиотеку, а я подключу заранее jQuery, поэтому в корень папки «js» добавьте jquery.js.

    Затем в этой же папке создайте новую папку, в ней и будут храниться скрипты, которые нам нужно будет скрывать. Я назову ее «security»:

    в) Набираем предварительный код в index.php


    Как вы видите, присутствует блок

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

    Но для начала давайте создадим наши скрипты, которые хотим спрятать.


    г) В папке «security» создайте script1.js и script2.js, c таким вот содержимым, соответственно:


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

    Htaccess – это файл конфигураций, настраиваемый разработчиком, пользователем данного сервера.

    Htaccess имеет такое содержимое:

    После чего, на запрос:

    Вы увидите подобное:

    Тем самым ваша папка security скрыта от посторонних глаз, она является недоступной.

    Если вы попытаетесь подключить скрипты:

    То в любом случае, ваши файлы не будут выполняться, так как они глобально скрыты сервером

    д) Возвращаемся к программному php-блоку в index.php

    Суть в том, что PHP имеет доступ ко всем файлам на сервере, независимо, скрыты они или нет, то есть, если вы пропишете:


    то в данном случае мы с вами увидим содержимое нашего скрытого скрипта.

    Однако с другого сервера содержимое нашего скрипта нельзя будет увидеть, и будет возвращено сообщение об ошибке 500. Это нам на руку, таким образом, другие сайты не смогут считывать наши скрытые файлы.

    е) Вот как будет выглядеть конечный результат:

    А теперь разбираемся, как это все работает. jQuery выполняет post-запрос (это помогает избежать дыр в работе index.php) на сервер «index.php?js=result», там идет проверка, если запрос с нашего сервера (функция strpos() и адрес нашего сервера «HTTP://script» – c учетом данного примера), то скрипт проверяет POST-переменную, то есть адрес нашего скрытого скрипта, и выдает текстовый результат. jQuery метод done() получает ответ в виде этого текстового содержимого, а уже этот текст можно преобразовать в рабочий javascript, это делает стандартная кроссбраузерная функция eval();

    В итоге Мы получаем свой результат, наши скрипты нельзя увидеть статически или динамически через консоль браузера, но легко увидеть их работу. Данные скрипты и их функции легко выполняются. Однако нужно хорошо подумать, чтобы применять данную технику, так как в данном случае поднимается вопрос производительности, быстродействия. Функция eval(code) среди разработчиков javascript считается злом, и рекомендуется использовать ее аналог new Function(‘return ’ + code), правда последнее не умеет выполнять определение функций внутри, то есть если в вашей переменной будет запись определения функции, code = “function test() {alert(1);}; test();”, то код не будет выполнен, а значит eval() подходит на все случаи жизни, правда имеет свои нюансы, о которых еще нужно дополнительно почитать.