Ver el código fuente

02/Feb/2007 JavaScript , , , , , 16 Comentarios

El objetivo de este ejercicio es el de mostrar el código fuente de una página. Esta 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.

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://www.lineadecodigo.com

Nosotros lo que haremos será obtener la URL mediante un campo de texto de un formulario HTML y concatenar con la anterior cadena.

A si que lo primero será el generar el formulario:

  1. URL: <input type="text" name="url" size="50" value="http://"><br>
  2. <input type="button" onClick="verCodigoFuente(this.form.url.value);"
  3. value="Ver código fuente">
  4. </form>

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.

  1. if (sURL == "") {
  2. alert("Introduzca alguna URL");
  3. return false;
  4. }

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:

protocolo = /^http:\/\/

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

  1. if (!/^http:\/\//.test(sURL)) {
  2. alert("La URL tiene que empezar con el protocolo http://");
  3. return false;
  4. }

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.

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

Vídeos sobre Javascript


16 comentarios en “Ver el código fuente”

Víctor Cuervo

MonoPbl

Una pregunta maestros.

Como abtengo la URL de un canal en vivo mediante el codigo de fuente de la pagina
para reproducirlo en mi reproductor VLC. Me explico?
Osea cual es la forma mas sensilla de obtener un URL de un video o canal en vivo y como se identifican las partes dentro del codigo de fuente?
espero que me puedan ayudar, mis conocimientos son de simples curiosidades como se daran cuentan
saludos

Víctor Cuervo

Víctor Cuervo

@Sat-Lavadora,

Para ese caso te recomiendo que vayas generando el código mediante Javascript. Es decir, si va formando el formulario tu le vas generando el código. Para acceder a la capa puedes utilizar el innerHTML.

Échale un ojo a
http://lineadecodigo.com/javascript/cambiar-el-contenido-de-una-capa-con-javascript/

Espero que te sirva.

Víctor Cuervo

Sat-Lavadora

Hola necesito un codigo para generar el codigo fuente de un formulario.Por ejemplo solo que esta incluido en una etiqueta div no de toda la pagina.

Víctor Cuervo

Sat-Lavadora

Hola estoy buscando algo parecido pero que me salga en un a tabla el codigo de un div .Que me explico estoy haciendo una pagina para formularios online y necesito que me salga el codigo fuente del formulario para que el usuario lo inserte en su pagina web. Agora se genera el codigo pero tienes que coger el codigo manual con ctrl+u . Alguna idea?

Víctor Cuervo

lineadecodigo

@zkr,

Es que eso no es una página, si no un vídeo en sí.

Si quieres cargar ese vídeo desde una página web tendrías que poner el siguiente código:

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Cargar vídeo MOV</title>
</head>
<body>

<h1>Cargar vídeo MOV</h1>
<object classid=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B” codebase=”http://www.apple.com/qtactivex/qtplugin.cab” height=”256″ width=”320″>

<param name=”src” value=”http://da.biostr.washington.edu/DA-ATLASES/Neuroanatomy/DAmovies/ventstrans.mov”>
<param name=”autoplay” value=”true”>
<param name=”type” value=”video/quicktime” height=”256″ width=”320″>

<embed src=”http://da.biostr.washington.edu/DA-ATLASES/Neuroanatomy/DAmovies/ventstrans.mov” height=”256″ width=”320″ autoplay=”true” type=”video/quicktime” pluginspage=”http://www.apple.com/quicktime/download/”>

</object>

</body>
</html>

Espero que te sirva.

Víctor Cuervo

zkr

yo no puedo ver el código de esta página para copiar un video en Quicktime, me podrían ayudar?

http://da.biostr.washington.edu/DA-ATLASES/Neuroanatomy/DAmovies/ventstrans.mov

Víctor Cuervo

Ordenador

Juanma solo entra a la pagina te vas en tu barra de herramientas de internet donde dice ver o view en mi caso y buscas codigo fuente o en mi caso source solo clickeas y listo aparace

Víctor Cuervo

Juanma

Hola amigos…. quiero ver el código fuente de una página y de las maneras que se aconsejan aquí no he podido. la página es http://www.folkloremaraton.com/en_vivo.html
Si alguien puede lograrlo… genial…

Víctor Cuervo

nata

como es # en codigo fuente?

Víctor Cuervo

overon

todo esto está muy bien, pero eso que estaís viendo. el código html intentad pasarlo a una variable, y lo que pasará es la dirección url, no el código, además directamente en el iexplorer no funciona, con lo que un script que no corre bajo el iexplorer (que no es el mejor ni de lejos pero si el mas usado) no tiene mucho sentido

como se podría hacer de otro modo???? esa es la cuestión

Víctor Cuervo

jeus..

Repuesta para Darwin: http://www.thedaniex.com ese no es el dominio exato de donde se aloja el material que esta en esa pag tienes que instalar firefox despues ves el codigo de fuente y despues busca la linea que dice src ayi la copias la pegas en el nabegador y te pasa a la verdadera URL de donde esta alojada la pag si quieres tambien podes vicitar mi web..

http://www.portaldehacker.tk
portaldehacker.tk

saludos desde venezuela..:D

Víctor Cuervo

Darwin

no acepta la pagina http://www.thedaniex.com.. no sirve par eesta pagina

Víctor Cuervo

Sak

Joe y tambien funciona poniendo Kandemor_view

Víctor Cuervo

lineadecodigo

Mucho más sencillo…. jejejejejejeje…

Víctor Cuervo

chuidiang

Curioso, también funciona poniendolo en el navegador (firefox al menos)

view-source:http://www.lineadecodigo.com

Nunca te acostarás….

Se bueno.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*