Cambiador de página desplegable discreto | Programar Plus

0

Usar un menú desplegable para crear navegación no es tan común como lo era antes, pero todavía está disponible. Se rompió bastante bien por ser inaccesible / molesto. De hecho, muchos de los scripts que encontrará para crear un menú como este son de esta manera. Gorrón. ¡Hagamos uno que funcione con OR sin JavaScript!

Ver demostración

El camino OBTRUSIVO

<form>
    <select onchange="window.open(this.options[this.selectedIndex].value)">
        <option value="">Go to page...</option>
        <option value="https://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
</form>

JavaScript en línea … funciona, pero solo si JavaScript está habilitado. Sin, tendrá un menú desplegable que no hace absolutamente nada.

El camino NO OBSTANTE

<form id="page-changer" action="" method="post">
    <select name="nav">
        <option value="">Go to page...</option>
        <option value="https://css-tricks.com/">CSS-Tricks</option>
        <option value="http://digwp.com/">Digging Into WordPress</option>
        <option value="http://quotesondesign.com/">Quotes on Design</option>
    </select>
    <input type="submit" value="Go" id="submit" />
</form>

Bastante similar, pero sin JavaScript en línea. En su lugar, proporcionamos el formulario y la identificación que usaremos más adelante para apuntar. El formulario ahora se envía a sí mismo y hemos agregado un botón de envío, por lo que el formulario es funcional. La selección ahora tiene un valor de nombre, por lo que cuando se presiona el botón Enviar, POSTARÁ un valor.

En la parte superior de nuestra página, buscaremos un valor POST de ese formulario. Si está allí, redirigiremos la página a ese valor.

<?php
	if (isset($_POST['nav'])) {
		 header("Location: $_POST[nav]");
	}
?>

No se necesita JavaScript en absoluto, la redirección de la página se maneja completamente a través de PHP del lado del servidor. NOTA: este es solo el PHP simplificado. Probablemente debería desinfectar ese valor enviado antes de pasarlo a la función de encabezado (especialmente si ejecuta PHP antes de 4.4.2 o 5.1.2) para evitar ataques de “inyección de encabezado”.

Sin embargo, podemos hacer que se comporte de manera idéntica al método intrusivo, con solo unas pocas líneas de jQuery.

  1. Ocultar el botón de enviar.
  2. Cuando se cambia la selección …
  3. Redirigir al valor de la opción
$(function() {

    $("#submit").hide();

    $("#page-changer select").change(function() {
        window.location = $("#page-changer select option:selected").val();
    })

});

Ver demostración

Actualizar

El lector David Vandenbroek escribe en:

Encontré que usando:

<select onChange="window.open(this.options[this.selectedIndex].value)">

abre un cuadro de diálogo de advertencia emergente y, si está permitido, una nueva ventana en iPhone / iPad cuando iOS Safari tiene la configuración ‘Bloquear ventanas emergentes’ configurada en APAGADO. Cuando el ajuste está en ON, no sucede nada.

Para evitar ambos comportamientos indeseables, utilicé:

<select onChange="window.location.replace(this.options[this.selectedIndex].value)">

en lugar de.