Как скрыть часть кода, до действия?
Проблема следующая, на сайте есть iframe, который необходимо скрыть от всех, пока пользователь не совершит любое действие(скролл, движение мышкой, нажатие на экран).
Задача не только временно скрыть айфрейм для рендеринга в браузере, но и скрыть его наличие в исходном коде, до действий. То есть он не должен быть виден в инструментах разработчика, пока не произойдет скролл и т.д.
Возможно такое реализовать? Если да, то буду благодарен за пример
- Вопрос задан 12 мар. 2023
- 128 просмотров
Как скрыть фрагмент html кода не удаляя его?
Есть прайс, в нем 4 столбца и один из них надо скрыть не удаляя его и не по средствам css, а сделать так что бы код просто не читался. Возможно ли это сделать?
- Вопрос задан более трёх лет назад
- 1575 просмотров
Комментировать
Решения вопроса 1
Евгений Вольф @Wolfnsex Куратор тега HTML
Если не хочешь быть первым — не вставай в очередь!
Возможно ли это сделать?
Да, можно его закомментировать . А что бы он совсем не читался (людями) — можете его в закодировать в Base64 или вообще зашифровать (с помощью стороннего ПО).
Ответ написан более трёх лет назад
HTML — Скрыть текст и код
Вопрос глупый, но ответа я найти не смог. (Либо я плохо искал. ) Вот у меня есть сайт, там две ссылки, одна скрытая при помощи display:none но код ссылки остается открытый, и её можно просмотреть, возможно ли как то скрыть её код? + Кратко говоря, нужно сделать что бы HTML код элемента не был виден при его просмотре в браузере. Как это реализовать?
Отслеживать
задан 30 мар 2018 в 21:29
75 10 10 бронзовых знаков
о каком «коде ссылки» идет речь?
30 мар 2018 в 21:31
Обычная ссылка: .
30 мар 2018 в 21:40
Можете показать пример, что есть и как должно быть, либо набросок сделать?
30 мар 2018 в 21:43
странно, у меня нету никакого кода, ссылка скрыта и все
30 мар 2018 в 21:54
Суть в том, что автор имел ввиду, что у него есть 2 ссылки, одна должна не просто скрываться от пользователя визуально, но и исчезать из кода. display:none скрывает элемент визуально, но не врезает ее из кода. Как уже дан ответ, то полностью вырезать можно только при помощи js-кода, либо через back-end, например, при помощи PHP. HTML и CSS не дают возможностей для «вырезания» кусков кода подобным образом.
Как скрыть элементы в HTML?
Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.
В CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.
Спрятать по имени класса (class)
HTML пример
этот блок нужно спрятать
CSS пример
.sidebar
Код выше скроет все элементы на странице с .
Спрятать по id
HTML пример
этот блок нужно спрятать
CSS пример
#sidebar
Код выше скроет все элементы на странице с .
Спрятать по другим атрибутам
В случае, если у вас нет id или class у элемента, то его все равно можно скрыть. Альтернативно можно использовать другие атрибуты, как показано в примере ниже.
HTML пример
CSS пример
.container div:nth-child(2) .container div:nth-child(3) div[data-id=»hello-world»] a[href=»http://bologer.ru»] a[data-url]
.container div:nth-child(2) спрячет второй div внутри блока .container.
div[data-id=»hello-world»] спрячет все div элементы со страницы, у которых есть data-id атрибуты со значением «hello-world» , если указать так [data-id=»hello-world»] , то это будет скрыты не только div элементы, но уже все элементы будут проверены на наличие такого атрибута и значения.
Вы так же можете убрать элемент другими свойствами CSS, например:
.sidebar
Описание 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 пример
Удалить элемент с помощью id
Скрипт ниже удалить элемент со страницы с id sidebar.
HTML пример
Текст
jQuery пример
Удалить элемент по атрибуту
Пример ниже удалит все ссылки с сайта с атрибутом data-url .
Таким образом можно удалить все что угодно на странице.
JavaScript
JavaScript очень мощный сам по себе, но не многие знаю как им пользоваться, так как для начинающего разработчика, язык является достаточно сложным. Ниже я написал несколько пример того, как можно скрыть элементы используя JavaScript.
Удалить элемент с помощью class
HTML пример
Текст
JavaScript пример
document.getElementsByClassName('sidebar')[0].remove()
Привет выше удалить первый найденный .sidebar элемент со страницы. getElementsByClassName() возвращает массив, поэтому нам нужно использовать индекс [0] , чтобы удалить первую позицию из него.
Таким же образом, нам можно пройтись циклов по массиву и удалить все элементы с классом .sidebar :
var els = document.getElementsByClassName('sidebar'); var elsLength = els.length; for(var i = 0; i
Удалить элемент с помощью id
HTML пример
JavaScript пример
Пример выше удалит элемент с id именем sidebar.
Удалить элемент по атрибуту
HTML пример
JavaScript пример
Пример выше удалит первый найденный элементы на странице с атрибутом data-url , который равен значению yeah.
Чтобы удалить все элементы, используйте цикл, как на примере ниже:
var els = document.querySelectorAll('[data-url=yeah]'); var elsLength = els.length; for(var i = 0; i
Вывод
Ни один способ описанный выше не является наилучшим для удаления элементов на странице так как лучше всего найти исходник проблемы и удалить от туда. Например найти html страницу где находится ненужный элемент страницы и удалить его от туда. Лучше этого ничего нельзя сделать.
Если у вас остались какие-нибудь вопросы, пишите их в комментарии.