Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: MilorES en 30 Septiembre 2012, 18:44 pm



Título: [GreaseMonkey] Busco tutorial en español o ayuda
Publicado por: MilorES en 30 Septiembre 2012, 18:44 pm
En principio quería hacer algo sencillo, tengo un web que tiene varios css pero solo muestra uno dependiendo de como te registras (no se puede cambiar).

Me gustaría cambiárselo, el problema es que la etiquet <link> no contiene el id.

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Asgard</title>
<link href="favicon.ico" rel="shortcut icon">
<link href="/estilos/3.css" type="text/css" rel="STYLESHEET">

Me interesa cambiar la ultima linia (luego aprendiendo como hacer eso seguro que sabría hacer el cambio de imagenes) quiero poner en vez de un 3 un 5.

Esto se debería hacer con un script para greasemonkey de lado del cliente. (No puedo tocar nada del servidor, como es normal)


Título: Re: [GreaseMonkey] Busco tutorial en español o ayuda
Publicado por: ~ Yoya ~ en 30 Septiembre 2012, 21:18 pm
DOM (http://es.wikipedia.org/wiki/Document_Object_Model#Estableciendo_referencias_a_objetos)

Para este tipo de cosas, es necesario utilizar javascript. Aprende las cosas básicas, que ya es algo genérico en todos los lenguajes, imprimir en pantalla, toma de decisiones, etc..

Luego lee sobre DOM, y te recomiendo que en ese momento comiences a utilizar algun framework para javascript, como puede ser la famosa librería Jquery. La razon, es que todavia no hay un estandar y para ahorrarte tiempo de escribir lineas y lineas, para que funcione en todos los navegadores, mejor utiliza un Framework para que no te preocupes por la compatibilidad en los diferentes navegadores.

Bueno, la solucion aqui, cuando aplicas todos los conocimientos mencionados.
Código
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
  3. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
  4. $(document).ready(function() {
  5. $('html head link:eq(1)').attr('href','/estilos/5.css');
  6. });
  7.  
  8.  
  9.  
  10.  
  11. <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  12. <title>Asgard</title>
  13. <link href="favicon.ico" rel="shortcut icon">
  14. <link href="/estilos/3.css" type="text/css" rel="STYLESHEET">

Saludos.


Título: Re: [GreaseMonkey] Busco tutorial en español o ayuda
Publicado por: MilorES en 30 Septiembre 2012, 23:34 pm
Si tengo pensado aprender como funciona el DOM de una vez y luego algo de javascript (y siempre tirar de un framework)

Pero yo necesito usar greasemonkey crear un script para él, no puedo cambiarle el código fuente a la web.

Deduzco que eso no me vale.


Título: Re: [GreaseMonkey] Busco tutorial en español o ayuda
Publicado por: ~ Yoya ~ en 1 Octubre 2012, 00:45 am
Como que no, solo tienes que agregar Jquery en el UserScript. y Agregar esto:
Código
  1. $(document).ready(function() { $('html head link:eq(1)').attr('href','/estilos/5.css');});

Primero que nada, lee la documentación de Greasemonkey para que sepas como agregar archivos javascript. Hasta hay llego, yo no te creare el UserScript.


Título: Re: [GreaseMonkey] Busco tutorial en español o ayuda
Publicado por: MilorES en 1 Octubre 2012, 05:49 am
Gracias, aunque no funciona del todo bien, si cambia el css (lo veo en el código fuente), pero se queda cargando :O

Añadiendo a la cabecera del script:
// @grant       GM_getValue
// @grant       GM_setValue

después del:

// @require     http://code.jquery.com/jquery-1.8.2.min.js

parece que perfecto.

Ahora a mirar el tema de la imágenes, supongo que solo debo redactar esa función :D

Gracias.