Скрытый код javascript просмотреть на странице. Как скрыть элементы в HTML? Что для этого нужно
Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "FAQ " вывести только названия вопросов. А если человека заинтересует ответ на определённый вопрос, то он может открыть ответ, а когда просмотрит, то и закрыть. Это создаёт удобство страницы и её компактность. И для этого я подготовил простенький скрипт на JavaScript , позволяющий открыть, либо скрыть определённый текст (в общем случае, определённые элементы), то есть сделать скрытый текст на JavaScript .
Результат: Кликните мышкой по названию вопроса. Если Вы кликните ещё раз, то ответ вновь закроется.
Вопрос №1Ответ №1.
Вопрос №2Ответ №2.
Код JavaScript (вставлять между тегами и ):
function expandit(id){
obj = document.getElementById(id);
if (obj.style.display=="none") obj.style.display="";
else obj.style.display="none";
}
Код HTML (вставлять между тегами и ):
Вопрос №1
Ответ №1.
Вопрос №2
Ответ №2.
а)
Для тестирования создайте каталог на сервере.
Я захожу на виртуальный диск, у меня это диск 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() подходит на все случаи жизни, правда имеет свои нюансы, о которых еще нужно дополнительно почитать.Это небольшой javascript позволит при необходимости скрывать и показывать при нажатии на ссылку фрагменты текста и картинки. Это может понадобиться, когда вы захотите описать совсем уж тривиальные вещи, которые многие знают. И чтобы большинство читателей не отвлекалось на эту информацию, предоставить её лишь при нажатии на ссылку. Таким же образом можно скрыть картинку и вообще любой фрагмент. Или реализовать вопросник, где при нажатии на конкретный вопрос будет раскрываться конкретный ответ.
Сначала приведу пример, затем скрипт и пояснения.
Пример Код:
Всегда ли это будет работать?
Посмотреть розового слоника
Будет работать, если пользователь в своём браузере сознательно не отключил использование джаваскриптов. Все современные темы Wodpress с галереями и эффектами работают не без помощи JavaScript. Да и многие современные сайты используют эту технологию.
СкриптНам понадобится небольшая функция show_hide().
function show_hide(obj_id)
{
doc=
document.getElementById(obj_id)
;
if(doc.style
.display ==
"none"
)
doc.style
.display =
"block"
;
else doc.style
.display =
"none"
}
Для WordPress функцию show_hide() можно разместить в файле header.php перед закрывающимся тегом , заключив её в теги и . Или разместить в подключаемом js-файле.
Подробнее
А скрываемый фрагмент помещаем в div
Подробности
Скрываемый фрагмент должен быть заключён в свой div c уникальным в пределах страницы id (здесь id="detail" ) и стилем display:none (который говорит браузеру, чтобы не отображал содержимое). При загрузке страницы этот скрываемый фрагмент загрузится в браузер, будет индексироваться поисковыми системами, только будет скрыт до тех пор, пока пользователь сознательно не нажмёт на ссылку Подробнее , где прописан вызов нашей функции show_hide . В качестве параметра в функцию передаётся значение id скрываемого div’а. Функция меняет свойство display с none на block и обратно. Что приводит к показу и скрытию фрагмента в div’е.
В случае с картинкой можно позаботиться о тех немногочисленных пользователях, у которых всё-таки отключён javascript, показав им картинку в другом окне. Нам же известен адрес картинки. Поэтому ссылку на картинку вида:
Посмотреть розового слоника
лучше переписать так:
При включенном джаваскрипте вы не увидите изменений. Зато при отключённом вместо нерабочей ссылки перед вами откроется картинка в новом окне.
Для полноценной и оптимальной работы веб-страниц в браузере необходимо, чтобы в нем был активирован javascript.
Что это такое и как его включить, мы расскажем в этой статье.
Сводная таблица Что такое javascript?
ЯваСкрипт можно назвать мультипарадигмальным языком. Он имеет поддержку множества способов программирований. Например, объектно-ориентированное, функциональное и императивное.
Данный вид программирования никак не связан напрямую с java. Основным синтаксисом этого языка программирования является язык Си, а также Си++.
Основой веб-страниц браузеров является HTML-код, с помощью которого программисты добавляю на страницы различные интерактивные элементы.
Если javascript в браузере отключен, интерактивные элементы работать не будут.
Появился данный вид языка программирования благодаря совместной работе компаний Sun Microsystems и Netscape.
Изначально ЯваСкрипт имел название LiveScript, но после того, как язык Java стал популярным среди программистов, компаниями-разработчиками было принято решение переименовать его.
Маркетинговый отдел компании Netscape посчитал, что такое название увеличит популярность нового языка программирования, что, собственно, и случилось.
Напомним, что ЯваСкрипт не имеет прямого отношения к Java. Это абсолютно разные языки.
Возможности JavaScriptДанный язык программирования имеется неограниченное количество возможностей за счет своей универсальности.
Основными аспектами применения являются мобильные приложения для смартфонов, интерактивные веб-страницы сайтов и сервисов.
Бо́льшую часть новшеств привнесло присоединение к проекту компании AJAX, которая предоставила возможности, используемые в языке на сегодняшний день.
Для экономии трафика и увеличения удобства использования, ЯваСкрипт предоставляет возможность изменять страницы сайтов и сервисов небольшими частями незаметно для пользователя в режиме онлайн.
Это не требует отключения сайта на время редактирования или добавления новой информации.
Изменения происходят сразу, не требуя обновления или перезагрузки страницы.
Функция ЯваСкрипт может быть отключена по разным причинам.
Возможно, предыдущий пользователь намеренно мог его отключить, так как он не требовался для просмотра веб-страниц. Также отключение могло произойти самостоятельно.
Отключение javascript может послужить причиной отказа в открытии некоторых ссылок. Чуть ниже мы рассмотрим способы включения данной функции в популярных браузерах.
Яндекс.БраузерЧтобы активировать функцию ЯваСкрипт в версии 22 и ниже, следует перейти на панель инструментов и выбрать пункт меню «Настройки» .
Для включения javascript переходим в раздел «Содержимое» , в котором для активации функции требуется поставить галочку в строке «Использовать JavaScript» .
Для отключения функции нужно эту галочку снять.
Для сохранения изменений нажимаем кнопку «ОК» и обновляем страницу браузера.
Для того, чтобы изменения вступили в силу, перезапускать браузер не требуется. После активации, вы сможете полноценно просматривать веб-страницы и совершать действия на интерактивных сервисах.
Opera Версии от 10,5 до 14В первую очередь нам потребуется открыть настройки браузера.
В левом верхнем углу нажимаем кнопку «Меню» , в контекстном меню наводим курсор на пункт «Настройки» и жмем на подпункт «Общие настройки…» .
После этого откроется новое окно с настройками браузера.
В нем необходимо выбрать вкладку «Дополнительно» .
В левом меню вкладки нажимаем на пункт «Содержимое» , после чего активируем функцию, поставив две галочки на пункты «Включить JavaScript» и «Включить Java» .
Для деактивации эти галочки нужно снять.
Активация и деактивация javascript в Opera версии от 10,5 до 14
После того, как вы поставили или сняли галочки, сохраняем изменения нажатием кнопки «ОК» .
Теперь перезапускаем браузер для того, чтобы изменения вошли в силу. Вам станут доступны все функции javascript.
Версии от 15 и вышеВ данных версиях браузера Опера активация ЯваСкрипт намного проще.
Для того, чтобы открыть окно настроек, необходимо в открытом браузере нажать сочетание «горячих» клавиш Alt +P . В открывшемся меню открываем вкладку «Сайты» .
Для активации функции требуется установить «флажок» на пункт «Разрешить выполнение JavaScript» , для деактивации – «Запретить выполнение JavaScript» .
После этого достаточно нажать кнопку «ОК» для сохранения изменений и обновить просматриваемую страницу клавишей F5 или нажатием соответствующего значка слева на адресной строке.
Перезапускать браузер не требуется.
SafariДля включения функции ЯваСкрипт в фирменном браузере Apple – , требуется перейти в настройки.
Чтобы их открыть, требуется нажать кнопку «Safari» и выбрать пункт «Настройки ».
Есть множество вариантов того, как можно скрыть ненужные элементы в HTML. Мы рассмотрим в этой статье как это можно сделать с помощью CSS, JavaScript или jQuery. Если у вас есть еще какие-нибудь варианты — то пишите их в комментарии.
CSSВ CSS множество разных способов того, как можно скрыть элемент. Ниже показы примеры того, как это чаще всего осуществляется.
Спрятать по имени класса (class)HTML пример
этот блок нужно спрятать
CSS пример
Sidebar {display: none;}
.
Спрятать по idHTML пример
этот блок нужно спрятать
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(); }); });
Таким образом можно удалить все что угодно на странице.
JavaScriptJavaScript очень мощный сам по себе, но не многие знаю как им пользоваться, так как для начинающего разработчика, язык является достаточно сложным. Ниже я написал несколько пример того, как можно скрыть элементы используя JavaScript.
Удалить элемент с помощью classHTML пример
Текст
JavaScript пример
document.getElementsByClassName("sidebar").remove()
