Ver el código fuente

El objetivo de este ejercicio es el de mostrar el código fuente de una página. Está claro que siempre lo podremos obtener mediante el menú de nuestro navegador o mediante el botón derecho (si este está disponible). Pero nosotros vamos a hacer que desde nuestra página web podamos mostrar los códigos fuente de otras páginas.

Anteponer view-source a la URL

Para poder hacer esto simplemente nos servirá con anteponer la palabra view-source a la URL. Por ejemplo el código de Línea de Código sería:

view-source:[http://lineadecodigo.com](http://lineadecodigo.com/)

Crear el formulario HTML

Nosotros lo que haremos será obtener la URL mediante un campo de texto de un formulario HTML y concatenar con la anterior cadena. Así que lo primero será el generar el formulario:

<form>
  <input type="text" id="url" name="url">
  <input type="button" value="Ver Código" onclick="verCodigoFuente(url.value)">
</form>

Función JavaScript verCodigoFuente

Hemos utilizado el evento JavaScript onClick de un botón para ejecutar el método que hará que veamos el código fuente de la página. En nuestro caso lo hemos llamado verCodigoFuente. Este método recibe el valor del campo URL del formulario.

Ahora veamos la función JavaScript verCodigoFuente(URL). Lo primero que hará esta función es ver si llega algún dato. Esto se realizará mediante un simple if.

if (URL == "") {
  alert("Debes de introducir una URL");
}

Validar la URL con expresiones regulares

Deberemos de tener cuidado de que el usuario escriba una URL que sea válida. Para ello, al menos vamos a comprobar que la cadena que nos proporcione el usuario empiece por http://. Esto lo haremos mediante expresiones regulares. En este caso la expresión regular que identifica al protocolo http en su forma http:// sería la siguiente:

var regexp = /^http:\/\//;

La expresión regular se validará mediante el método .test(). Veamos como sería:

if (!regexp.test(URL)) {
  alert("La URL debe empezar por http://");
}

Mostrar el código fuente

Solo nos quedará invocar a la URL con el “view-source” por delante. Para ello accederemos directamente al objeto window y a su propiedad location.href, la cual representa la barra de navegación.

window.location.href = "view-source:" + URL;