Ocultar guión. Texto oculto en JavaScript

La solución más sencilla para mostrar/ocultar un elemento de documento HTML utilizando JavaScript. Una descripción detallada de la esencia del proceso y sus características.

Derribar por medios ordinarios esconder) o mostrar (inglés) espectáculo) El elemento del documento HTML no es posible. Esto se hace usando la propiedad CSS. mostrar o visibilidad. La diferencia entre ellos es que visibilidad, aunque hace invisible el elemento HTML, el espacio que ocupa permanece con él. Está claro que se utiliza mucho más a menudo. mostrar.

pantalla (del inglés) mostrar) es una propiedad multipropósito que determina cómo se debe mostrar un elemento en un documento.

Lista de posibles valores de propiedades CSS mostrar, entendido por varios navegadores, no es grande, pero es suficiente.

• bloque: el elemento se muestra como un elemento de bloque. Aplicar este valor a elementos en línea, como la etiqueta SPAN, hace que se comporte como bloques, es decir. Los saltos de línea se producen al principio y al final del contenido.
• en línea: el elemento se muestra como en línea. La aplicación de este valor a elementos de bloque, como una etiqueta DIV, hace que se comporte como elementos en línea, es decir, su contenido comenzará donde terminó el elemento anterior.
• elemento de lista: el elemento se muestra como un elemento de bloque y se agrega un marcador de lista.
• none: oculta el elemento en el documento. El espacio que ocupa no está reservado y la página web se configura como si el elemento nunca hubiera existido.

Está claro que para cambiar la propiedad CSS de un elemento HTML en particular, es necesario utilizar un lenguaje de programación de scripts. En nuestro caso es JavaScript. Pero todo está en orden.

El primer paso es decidir cómo acceder exactamente al elemento HTML del documento. Para hacer esto, puede usar el método getElemetById del objeto del documento, que devuelve un enlace al elemento HTML del documento según el valor del atributo id. Por ejemplo:

document.getElemetById("prueba")

Ahora necesitamos acceder a las propiedades de estilo del elemento HTML correspondiente. Para ello se utiliza la propiedad de estilo. Por ejemplo:

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

Todo lo que queda es crear un elemento de control que cambiaría el valor de la propiedad CSS. mostrar, en algún evento, por ejemplo onclick (clic del mouse). Aquí vale la pena prestar atención al hecho de que para resolver la tarea en cuestión, deberá verificar el valor actual de la propiedad CSS. mostrar y cámbielo al "opuesto". En nuestro caso, usaremos el valor ninguno para ocultar y "vacío" para mostrar. En el segundo caso, eliminamos la propiedad CSS. mostrar en el elemento correspondiente, lo que le permitirá trabajar correctamente tanto con elementos HTML en bloque como en línea.

Para mayor claridad, daré el siguiente ejemplo:

cambio de función (idName) ( if(document.getElementById(idName).style.display=="none") ( document.getElementById(idName).style.display = ""; ) else ( document.getElementById(idName).style .display = "none" ) devuelve falso ) ¡Hola mundo! Cambiar

Tenga en cuenta que la etiqueta DIV tiene un atributo de estilo configurado para mostrar: ninguno. ¿De este modo? establecemos el valor de la propiedad CSS mostrar el valor predeterminado es none , es decir Inicialmente, el elemento HTML estará oculto.

Este pequeño javascript te permitirá, si es necesario, ocultar y mostrar fragmentos de texto e imágenes cuando hagas clic en un enlace. Esto puede ser necesario cuando desee describir cosas muy triviales que mucha gente sabe. Y para que la mayoría de los lectores no se distraigan con esta información, proporciónela solo cuando haga clic en el enlace. De la misma forma, puedes ocultar una imagen o cualquier fragmento en general. O implemente un cuestionario, donde al hacer clic en una pregunta específica, se revelará una respuesta específica.

Primero daré un ejemplo, luego un guión y explicaciones.

Código de ejemplo:

¿Esto siempre funcionará?

Ver el elefante rosa

Aquí está la implementación de este fragmento (haga clic en los enlaces):

Funcionará si el usuario no ha desactivado deliberadamente el uso de javascripts en su navegador. Todos los temas modernos de Wodpress con galerías y efectos funcionan con la ayuda de JavaScript. Y muchos sitios modernos utilizan esta tecnología.

Guion

Necesitaremos una pequeña función show_hide().

función mostrar_ocultar(obj_id) (
doc= document.getElementById(obj_id);
if(doc.style .display == "none" ) doc.style .display = "bloque";
más doc.style .display = "ninguno"
}

Para WordPress, la función show_hide() se puede colocar en el archivo header.php antes de la etiqueta de cierre, encerrada entre las etiquetas y. O colóquelo en un archivo js incluido.

Más detalles

Y colocamos el fragmento oculto en un div.

Detalles

El fragmento oculto debe estar encerrado en su propio div con una identificación única dentro de la página (aquí id="detail" ) y un estilo display:none (que le indica al navegador que no muestre el contenido). Cuando se carga la página, este fragmento oculto se cargará en el navegador, será indexado por los motores de búsqueda, pero permanecerá oculto hasta que el usuario haga clic deliberadamente en el enlace Más detalles, donde está escrita la llamada a nuestra función show_hide. El valor de identificación del div que se va a ocultar se pasa como parámetro a la función. La función cambia la propiedad de visualización de ninguna a bloquear y viceversa. Lo que lleva a mostrar y ocultar el fragmento en el div.

En el caso de una imagen, puedes ocuparte de aquellos pocos usuarios que todavía tienen JavaScript deshabilitado mostrándoles la imagen en otra ventana. Sabemos la dirección de la imagen. Por eso, un enlace a una imagen como esta:

Ver el elefante rosa

Es mejor reescribirlo así:

Ver el elefante rosa

Si JavaScript está habilitado, no verá ningún cambio. Pero cuando está deshabilitado, en lugar de un enlace roto, se abrirá una imagen en una nueva ventana.

Para que las páginas web funcionen completa y óptimamente en su navegador, debe estar habilitado javascript.

Te contamos qué es y cómo habilitarlo en este artículo.

Tabla dinámica ¿Qué es javascript?

JavaScript se puede llamar un lenguaje multiparadigma. Tiene soporte para muchos métodos de programación. Por ejemplo, orientado a objetos, funcional e imperativo.

Este tipo de programación no está directamente relacionado con Java. La sintaxis principal de este lenguaje de programación es el lenguaje C, así como C++.

La base de las páginas web del navegador es el código HTML, con el que los programadores añaden diversos elementos interactivos a las páginas.

Si javascript está deshabilitado en el navegador, los elementos interactivos no funcionarán.

Este tipo de lenguaje de programación apareció gracias al trabajo conjunto de Sun Microsystems y Netscape.

Inicialmente, JavaScript se llamaba LiveScript, pero después de que el lenguaje Java se hizo popular entre los programadores, las empresas de desarrollo decidieron cambiarle el nombre.

El departamento de marketing de Netscape creía que ese nombre aumentaría la popularidad del nuevo lenguaje de programación, lo que, de hecho, sucedió.

Te recordamos que JavaScript no está directamente relacionado con Java. Estos son idiomas completamente diferentes.

Funciones de JavaScript

Este lenguaje de programación tiene un número ilimitado de posibilidades debido a su versatilidad.

Los principales aspectos de la aplicación son aplicaciones móviles para teléfonos inteligentes, páginas web interactivas de sitios y servicios.

La mayor parte de la innovación se debió a que la empresa AJAX se unió al proyecto, lo que proporcionó las características que se utilizan en el lenguaje actual.

Para ahorrar tráfico y aumentar la facilidad de uso, JavaScript ofrece la posibilidad de cambiar páginas de sitios y servicios en pequeñas partes, sin que el usuario en línea lo note.

Esto no requiere apagar el sitio mientras se edita o agrega nueva información.

Los cambios ocurren inmediatamente, sin necesidad de actualizar o recargar la página.

La función JavaScript puede estar deshabilitada por varios motivos.

Es posible que el usuario anterior lo haya desactivado intencionalmente ya que no era necesario para la navegación web. El cierre también podría ocurrir por sí solo.

Deshabilitar JavaScript puede impedir que se abran algunos enlaces. A continuación veremos formas de habilitar esta función en navegadores populares.

Navegador Yandex

Para activar la función JavaScript en la versión 22 e inferiores, vaya a la barra de herramientas y seleccione el elemento del menú "Configuración".

Para habilitar javascript, vaya a la sección "Contenido", en la cual para activar la función debe marcar la casilla "Usar JavaScript".

Para deshabilitar la función, debe desmarcar esta casilla.

Para guardar los cambios, haga clic en el botón "Aceptar" y actualice la página del navegador.

No es necesario reiniciar el navegador para que los cambios surtan efecto. Después de la activación, podrá ver páginas web en su totalidad y realizar acciones en servicios interactivos.

Versiones de Opera de 10.5 a 14

En primer lugar, debemos abrir la configuración del navegador.

En la esquina superior izquierda, haga clic en el botón "Menú", en el menú contextual, mueva el cursor al elemento "Configuración" y haga clic en el subelemento "Configuración general...".

Después de esto, se abrirá una nueva ventana con la configuración del navegador.

En él debe seleccionar la pestaña "Avanzado".

En el menú de la izquierda de la pestaña, haga clic en el elemento "Contenido", luego de lo cual activamos la función marcando dos casillas de verificación en los elementos "Habilitar JavaScript" y "Habilitar Java".

Para desactivarlas, estas casillas de verificación deben estar desmarcadas.

Activación y desactivación de javascript en las versiones Opera del 10.5 al 14

Después de haber marcado o desmarcado las casillas, guarde los cambios haciendo clic en el botón "Aceptar".

Ahora reiniciamos el navegador para que los cambios surtan efecto. Todas las funciones de JavaScript estarán disponibles para usted.

Versiones desde 15 y superiores

En estas versiones del navegador Opera la activación de JavaScript es mucho más sencilla.

Para abrir la ventana de configuración, debe presionar la combinación de teclas de acceso rápido Alt + P en un navegador abierto. En el menú que se abre, abra la pestaña "Sitios".

Para activar la función, debe marcar la casilla de verificación en "Permitir la ejecución de JavaScript", para desactivarla: "Prohibir la ejecución de JavaScript".

Después de esto, simplemente haga clic en el botón "Aceptar" para guardar los cambios y actualizar la página que está viendo con la tecla F5 o haciendo clic en el icono correspondiente a la izquierda de la barra de direcciones.

No es necesario reiniciar el navegador.

Safari

Para habilitar la función JavaScript en el navegador propietario de Apple, debe ir a la configuración.

Para abrirlos, debe hacer clic en el botón "Safari" y seleccionar "Configuración".

¿Alguna vez ha querido ocultar a extraños un script en su página que hace que aparezca un menú irrealmente hermoso o realizar otras acciones que no le gustaría ver pronto en uno de cada dos sitios web?
En caso afirmativo, el método descrito en este artículo le resultará útil junto con la ofuscación del código. Al mismo tiempo, haré una reserva de inmediato de que el método no es 100 por ciento efectivo, pero probablemente lo protegerá de la mayoría de los no profesionales y de algunos profesionales.

Teoría Digamos que tenemos una página nojs.php y en ella un script secret.js que debe ocultarse. El navegador y el usuario pueden recibir el script del servidor de las siguientes maneras:

Cargar un script colocado directamente en la página o cargado usando el DOM;

Vea el script en la ventana Código fuente de la página;

Guardar una página con todos los archivos en su disco duro;

Ingresando una URL directa en la barra de direcciones.

En el primer caso, el navegador debe enviar el encabezado HTTP HTTP_REFERER.
En el segundo y tercer caso, no todos los navegadores lo transmiten (Chrome, Firefox muestran un script previamente descargado del caché; Opera, IE descarga el script nuevamente, pero sin enviar el referente).
En el cuarto caso, el referente no es transmitido por ninguno de los cuatro navegadores.
Si publicamos JavaScript dinámicamente y verificamos la presencia del encabezado de referencia en la solicitud, inmediatamente nos protegeremos de Opera e IE, pero para Crome y Firefox tendremos que encontrar algo más complicado. Primero descargaremos un script, que a su vez descargará otro script, y se verificará en ambas descargas la presencia de un referente http. Se ha establecido científicamente que si crea dinámicamente un script en la página document.createElement("script") y luego lo elimina de la página, el script funcionará como de costumbre, pero no se guardará en Practicenojs.php. la página tiene un propósito de carga script1.php
Encuentre JS Después de 10 segundos, debería ver el script oculto funcionando en forma de alerta. Haga clic en el enlace después de la alerta para asegurarse de que los eventos tampoco hayan desaparecido. En este enlace puedes ver el script oculto. script1.php Su trabajo es cargar dinámicamente script2.php si hay un encabezado de referencia. Los tiempos de espera se pueden reducir, dependiendo del tiempo de ejecución aproximado del script oculto.
script2.php Su tarea es producir el script final si hay un encabezado de referencia
Resultados Como resultado, obtenemos que no podemos mirar el código fuente de la página, ni descargar o guardar el script oculto usando los cuatro navegadores probados. En general, puedes verlo de dos maneras:

• Siga el enlace que conduce directamente a script2.php y se encuentra en la página de nuestro sitio web;
• Formación de una solicitud http que indica el encabezado del referente.

Puede aumentar la efectividad del ocultamiento utilizando los siguientes métodos:

Usando mod-rewrite, reemplace script1.js y script2.js que van al servidor con script1.php y script2.php, respectivamente, para que la página contenga los archivos js familiares, ya que php es llamativo;

Haga que el guión ficticio sea lo más complejo, plausible y confuso posible, de modo que la persona que intenta analizarlo sufra mucho antes de darse cuenta de que fue engañado;

Ofuscación de código.