Связь и Интернет

Скрытый текст на JavaScript. Как показать и скрыть фрагмент текста или картинку в html с помощью JavaScript Удалить элемент с помощью class

Честно говоря, никакому разработчику это не нужно, в основном любой 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() подходит на все случаи жизни, правда имеет свои нюансы, о которых еще нужно дополнительно почитать.

Описание: Бывают ситуации, когда не хочется выводить весь контент страницы сразу. Например, в разделе "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.

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

Теория Допустим у нас есть страничка nojs.php, а на ней скрипт secret.js, который надо спрятать. Браузер и пользователь могут получить скрипт с сервера следующими путями:
  • Загрузка скрипта непосредственно размещенного на странице или подгруженного с помощью DOM;
  • Просмотр скрипта в окне Исходный код страницы ;
  • Сохранение страницы со всеми файлами на жесткий диск;
  • Ввод прямого URL в адресной строке.
  • В первом случае браузер обязательно передает http-заголовок HTTP_REFERER.
    Во втором и третьем случае он передается не всеми браузерами (Chrome, FireFox выдают ранее загруженный скрипт из кэша; Opera, IE загружают скрипт вновь, но уже без отправки referer).
    В четвертом случае referer не передается ни одним из этих четырех браузеров.
    Если выдавать JavaScript динамически с проверкой наличия заголовка referer в запросе, то мы сразу же защитимся от Opera и IE, но для Crome и Firefox придется придумать что-то позаковыристее. Мы загрузим сначала один скрипт, который в свою очередь загрузит другой скрипт, при этом обе загрузки будем проверять на наличие http-referer. Методом научного тыка установлено, что если динамически создать скрипт на странице document.createElement(«script»), а потом удалить его со страницы, то скрипт будет работать как обычно, но сохраняться он не будет.Практикаnojs.php Эта страничка несет в себе цель загрузить script1.php
    Найди JS Через 10 секунд Вы должны увидеть работу скрываемого скрипта в виде аллерта нажмите ссылку после алерта, дабы убедиться что события тоже не отвалились. По этой ссылке можно увидеть скрываемый скрипт script1.php Его задача: динамически загрузить script2.php, если есть заголовок referer. Таймауты можно уменьшить, в зависимости от примерного времени выполнения скрываемого скрипта.
    script2.php Его задача: выдать конечный скрипт, если есть заголовок referer
    Итоги В итоге мы получаем, что мы не можем ни посмотреть в исходном коде страницы, ни скачать, ни сохранить скрываемый скрипт средствами тестируемых четырех браузеров. Вообще же можно посмотреть его двумя способами:
    • Переход по ссылке прямо ведущей на script2.php и расположенной на странице нашего сайта;
    • Формирование http-запроса с указанием в нем заголовка referer.
    Повысыть эффективность скрытия можно такими методами:
  • С помощью mod-rewrite заменять идущие к серверу script1.js и script2.js на script1.php и script2.php соответственно, чтобы на странице были всем привычные файлы js, так как php резко бросается в глаза;
  • Сделать фиктивный скрипт максимально сложным, правдоподобным и запутанным, чтобы человек пытающийся его разобрать изрядно помучался перед осознанием того, что его обманули;
  • Обфускация кода.
  • Простейшее решение, позволяющее показать/скрыть HTML-элемент документа, используя JavaScript. Подробно описание сути процесса и его особенностей.

    Обычными средствами срыть (англ. hide ) или показать (англ. show ) HTML-элемент документа не представляется возможным. Для этого используется CSS-свойство display или visibility . Отличие между ними состоит в том, что visibility , хоть и делает HTML-элемент невидимым, но место, которое он занимает, остаётся за ним. Понятно, что гораздо чаще используется именно display .

    display (с англ. отображение ) – многоцелевое свойство, которое определяет, как элемент должен отображаться в документе.

    Список возможных значений CSS-свойства display , понимаемых различными браузерами, не велик, но и этого вполне достаточно.

    • block — элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега SPAN , заставляет его вести подобно блокам, т.е. происходит перенос строк в начале и конце содержимого.
    • inline — элемент отображается как встроенный. Применение этого значения для блочных элементов, например тега DIV , заставляет его вести подобно встроенным, т.е. его содержимое будет начинаться с того места, где окончился предыдущий элемент.
    • list-item — элемент выводится как блочный и добавляется маркер списка.
    • none — скрывает элемент в документе. Занимаемое им место не резервируется и web-страница формируется так, словно элемента и не было.

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

    Первым делом надо определиться, как именно обратиться к HTML-элементу документа. Для этого можно воспользоваться методом getElemetById объекта document , который возвращает ссылку на HTML-элемент документа по значению атрибута id . Например:

    document.getElemetById("test")

    Теперь нам нужно получить доступ к свойствам стиля соответствующего HTML-элемента. Для этого используется свойство style . Например:

    document.getElemetById("test").style.display

    Остаётся лишь создать элемент управления, который бы выполнял смену значения CSS-свойства display , по какому либо событию, например onclick (клик мышью). Здесь стоит обратить внимание на тот факт, что для решения поставленной задачи, понадобится проверять текущее значение CSS-свойства display и менять его на «противоположное». В нашем случае, для скрытия, будем использовать значение none , а для отображения «пусто» . Во втором случае мы убираем CSS-свойство display в соответствующем элементе, что позволит корректно работать как с блочными так и встраиваемыми HTML-элементами.

    Для наглядности приведу следующий пример:

    function change(idName) { if(document.getElementById(idName).style.display=="none") { document.getElementById(idName).style.display = ""; } else { document.getElementById(idName).style.display = "none"; } return false; } Hi World! Change

    Обратите внимание, что тег DIV имеет атрибут style со значением display:none . Таким образом? мы задаём значение CSS-свойства display по умолчанию равное none , т.е. HTML-элемент изначально будет скрыт.

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

    Интересное решение реализовано в интернет-гипермаркете "Розетка". Вот например категории:

    Когда мы нажимаем на данную ссылку то открывается полное описание без перезагрузки страницы. Если Вы хотите реализовать такое же решение, то ниже рассказано как это реализовывается на практике.
    Этот момент можно решить благодаря языку программирования JavaScript.
    JavaScript первоначально создавался для того, чтобы сделать web-странички «живыми».
    Чтобы установить в текст Веб-страницы скрипты JavaScript, надо ввести дескриптор . Код JavaScript располагается между тэгами . Код можно размещать как в теле заголовка страницы (между тэгами ), так и в теле страницы (между тэгами ).
    Для того работы скрипта надо создать функцию, которая будет использоваться в любой части сайта. Будем использовать функцию function sh()


    sh();
    function sh() {
    info = document.getElementById("info");
    button = document.getElementById("button");
    if (info.style.display == "none") {
    info.style.display = "block";
    button.style.display = "none";
    }
    }

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

    Подробнее...



    ТЕКСТ КОТОРЫЙ БУДЕТ СКРЫТЫЙ

    Здесь вызывается функция function sh()
    Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block

    Вот пример того что получилось после того как применили функцию к тексту:

    В этом примере на страничке было скрыто 3000 символов SEO-текста, которые были прописаны для продвижения сайта. При нажатии на ссылку сама ссылка «Подробнее…» исчезнет благодаря свойству style.display указанном в функции.
    Таким образом Вы можете реализовать данный функционал. Если у Вас остались вопросы, то задавайте их в комментариях.