Scripts en sitios web

En los ejemplos siguientes verás qué puedes hacer con Scripts en sitios web y cómo configurarlo en distintos casos.

La función window.scrollTo recibe 3 parámetros:

1. contexto (null)
2. coordenada horizontal X (0)
3. coordenada vertical Y (500)

Normalmente el eje que queremos desplazar es el vertical. En este caso nos desplazamos 500 píxeles en vertical, pero tienes que probar los números para encontrar la cantidad de píxeles adecuada. La llamada a scrollTo va dentro de una llamada a setTimeout, que retrasa la ejecución del código para asegurarse de que la página está cargada. Aquí retrasamos la ejecución 1000 milisegundos; según cómo esté hecho el sitio, puede que no haga falta. Puedes probar a poner el valor en 0 y ver si el desplazamiento sigue funcionando.

setTimeout(window.scrollTo.bind(null, 0, 500), 1000);

En reproductores basados en Android, algunos sitios muestran la versión móvil por el CSS adaptable. Este script fuerza el viewport a un tamaño de navegador Full HD.

const viewportWidth = 1920;
const viewportHeight = 1080;
const devicePixelRatio = 2;

// Set the viewport meta tag to control the layout on mobile devices
const viewportMetaTag = document.querySelector('meta[name=viewport]');
if (viewportMetaTag) {
viewportMetaTag.content = `width=${viewportWidth}, height=${viewportHeight}, initial-scale=${1 / devicePixelRatio}, maximum-scale=${1 / devicePixelRatio}, user-scalable=0`;
}

// Set the window size to match the viewport
window.resizeTo(viewportWidth, viewportHeight);

// Trigger a resize event to ensure proper rendering
const resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);

Este script fuerza la página a actualizarse cada 60 segundos. Ten en cuenta que llama a setTimeout, que se ejecuta solo una vez; pero, como la página se recarga y vuelve a ejecutar el script, no hace falta usar setInterval.

setTimeout(function(){
  window.location.reload(true);
}, 60000);

Scripts en sitios web puede servir para arrancar un vídeo de la página. Este ejemplo espera 1 segundo a que cargue la página, obtiene todas las etiquetas <video>, coge la primera y llama a la función play(). Si la página tiene varias etiquetas de vídeo, arranca el primer vídeo que encuentre.

setTimeout(function(){document.getElementsByTagName('video')[0].play()}, 1000);

Para iniciar sesión en un sitio web no hay una solución única. Cada sitio es un sistema distinto y necesita un enfoque a medida. Saber programar en JavaScript ayuda, pero se puede crear el script sin formación técnica. Ayudamos con gusto a los clientes con suscripción con scripts sencillos (en inglés).

El script de inicio de sesión hace lo siguiente:

1. Encuentra el campo de usuario y lo rellena con nuestro usuario
2. Encuentra el campo de contraseña y lo rellena con la contraseña
3. Encuentra el botón de inicio de sesión y hace clic en él

Primero hay que enseñar al script a encontrar los elementos de la página. Para eso hay que saber cuáles son los id de los elementos. Se puede hacer en cualquier navegador, pero esta guía se centra en Chrome. Ve a la página donde quieres automatizar el inicio de sesión y abre las herramientas para desarrolladores. (Configuración -> Más herramientas -> Herramientas para desarrolladores)

En las herramientas para desarrolladores, elige la pestaña Elementos si no está seleccionada. Luego haz clic en el botón de seleccionar elemento (paso 1), pasa el ratón por el campo de usuario y haz clic en él (paso 2). Se resalta el código HTML que representa el campo de usuario; debería ser una etiqueta <input>. La mayoría de quienes crean sitios asignan un id único a ese campo, y podemos usarlo para referirnos a él en el script; en este ejemplo es «user_login» (paso 3).

Repite el mismo proceso con el campo de contraseña. En nuestro ejemplo, el id del campo de contraseña es «user_pass». Lo ideal es que el botón de inicio de sesión también tenga un atributo id (aquí «login_btn»); en ese caso ya tenemos todo lo necesario para crear el script:

document.getElementById('user_login').value = "YOUR_USERNAME_HERE";

document.getElementById('user_pass').value = "YOUR_PASSWORD_HERE";

document.getElementById('login_btn').click();

A veces, sin embargo, el botón de inicio de sesión no tiene un id, y todos los campos van dentro de un elemento <form>. En lugar de hacer clic en el botón, también podemos llamar a la función submit() del propio formulario:

document.getElementById('loginform').submit();

También puede pasar que el formulario tampoco tenga un atributo id. Entonces podemos buscar todos los elementos <form> de la página y enviar el primero que encontremos, pero ten en cuenta que esto solo funciona si en la página hay un solo <form>:

document.getElementsByTagName('form')[0].submit();

Si tienes muy mala suerte y ningún elemento tiene un atributo id, hay 2 opciones:

1. Contactar con quienes desarrollan el sitio y pedirles que asignen valores id a los elementos de la página de inicio de sesión
2. Contratar a alguien que escriba el script: seguir encontrando los elementos es posible, pero se sale de este artículo. Una persona con experiencia en JavaScript debería poder hacer el script en unos 30 minutos o 1 hora

Solo tienes que sustituir las variables de usuario y contraseña. Este script de inicio de sesión funciona en sitios de Microsoft, Office365, Hotmail y PowerBI.

var user = "YOUR_USERNAME_HERE";
var pass = "YOUR_PASSWORD";
function setValue(id, value){
  document.getElementById(id).value = value;
  document.getElementById(id).dispatchEvent(new Event("change"));
}
function clickButton(id){
  document.getElementById(id).click();
}
setTimeout(setValue.bind(null, 'i0116', user), 1000);
setTimeout(clickButton.bind(null, 'idSIButton9'), 1100);
setTimeout(setValue.bind(null, 'i0118', pass), 1800);
setTimeout(clickButton.bind(null, 'idSIButton9'), 2000);

El script de abajo desplaza el sitio web de arriba abajo a una velocidad dada. Es más complicado, pero no hace falta entender cómo funciona. Puedes copiar el script y ajustar SPEED y JUMP_TO_TOP según lo que necesites.

var SPEED = 20; //change the speed for faster/slower scrolling. Value between 1 and 1000
var JUMP_TO_TOP = true; //Scrolls back to top when scrolling reaches bottom. either true or false

var fps = 100;
var speedFactor = 0.001;
var minDelta = 0.5;
var autoScrollSpeed = 10;
var autoScrollTimer, restartTimer;
var isScrolling = false;
var prevPos = 0, currentPos = 0;
var currentTime, prevTime, timeDiff;

window.addEventListener("wheel", handleManualScroll);
window.addEventListener("touchmove", handleManualScroll);

function handleManualScroll(){
  currentPos = window.scrollY;
  clearInterval(autoScrollTimer);
  if (restartTimer){
    clearTimeout(restartTimer);
  }
  restartTimer = setTimeout(function(){
    prevTime = null;
    setAutoScroll();
  }, 50);
}

window.addEventListener("scroll", function (e) {
  currentPos = window.scrollY;
  if((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight){
    //scrolling reached bottom.
    if(JUMP_TO_TOP){
      window.scrollTo(0, 0)
      currentPos = 0;
    }
    else{
      clearInterval(autoScrollTimer);
    }
  }
});

function setAutoScroll(newValue){
  if(newValue){
    autoScrollSpeed = speedFactor * newValue;
  }
  if(autoScrollTimer){
    clearInterval(autoScrollTimer);
  }
  autoScrollTimer = setInterval(function(){
    currentTime = Date.now();
    if(prevTime){
      if(!isScrolling){
        timeDiff = currentTime - prevTime;
        currentPos += autoScrollSpeed * timeDiff;
        if(Math.abs(currentPos - prevPos) >= minDelta){
          isScrolling = true;
          window.scrollTo(0, currentPos);
          isScrolling = false;
          prevPos = currentPos;
          prevTime = currentTime;
        }
      }
    }
    else {
      prevTime = currentTime;
    }
  }, 1000 / fps);
}

setAutoScroll(SPEED);