Website Scripting

In the following examples, we’ll take you through what you can do with Website Scripting and how to set it up for different scenarios.

The window.scrollTo function takes in 3 parameters:

1. context (null)
2. horizontal X coordinate (0)
3. vertical Y coordinate (500)

Usually vertical is the axis we want to scroll. In this case, we scroll 500 pixels vertically, but you need to experiment with the numbers to find the appropriate amount of pixels to scroll to. The scrollTo function call is wrapped in a setTimeout function call, which delays the code execution to make sure the page is loaded. In this case, we delay execution by 1000 milliseconds; however, depending on how the website is built, it may not be necessary. You can try setting the value to 0 and see if the page scroll still works.

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

On Android-based players, some websites may show a mobile version due to responsive CSS. This script forces the viewport to a Full HD browser size instead.

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);

This script forces the page to refresh every 60 seconds. Note that it calls setTimeout, which runs only once; but since the page reloads and runs the script again, there is no need to use setInterval.

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

Website Scripting can be used to start a video on the page. This example waits 1 second for the page to load, gets all <video> tags, takes the first one and calls the play() function on it. If the page has multiple video tags, this would start the first video it can find.

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

When it comes to logging into a website, there is no one-size-fits-all solution. Each website is a different system and needs a tailored approach. While JavaScript programming skills would be beneficial, it is certainly possible to create the script without any technical background. We gladly assist our subscription customers with simple scripts.

The login script performs the following actions:

1. Find the username input field and fill it with our username
2. Find the password input field and fill it with the password
3. Find the login button and click it

First, we need to teach the script to find the elements in the web page. To do so, we need to find out what the IDs of the elements are. This is possible in every browser, but we focus on Chrome in this guide. Navigate to the page where you want to automate the login and open the developer tools. (Settings -> More Tools -> Developer Tools)

In the developer tools, choose the Elements tab if not already selected. Then click on the Select Element button (step 1) and mouse over the username input field and click on it (step 2). The HTML code that represents the username field will be highlighted; it should be an <input> tag. Most website creators assign a unique ID to that field that we can use to reference it in the script, in this example it is “user_login” (step 3).

Repeat the same process for the password field. In our example, the password field id is “user_pass“. Ideally, the login button also has an ID attribute (here “login_btn”), in which case we have all the information needed to create the script:

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

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

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

Sometimes, however, the login button may not have an ID assigned, but instead, all fields are wrapped in a <form> element. Instead of clicking on the button, we can also call the submit() function on the form itself:

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

It is possible, however, that the form does not have an ID attribute either. Then we can search for all <form> elements on the page and submit the first one we find, but beware that this only works if there is only one <form> on the page:

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

If you are very unlucky and none of the elements have an ID attribute assigned, then there are 2 options:

1. Contact the website developers and ask them to assign ID values to login page elements
2. Hire a developer to write the script – it’s still possible to find the elements, but it’s beyond the scope of this article. A qualified JavaScript developer should be able to develop the script in about 30 minutes to 1 hour

Just replace the username and password variables. This login script works for Microsoft, Office365, Hotmail and PowerBI sites.

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);

The script below will scroll the website from top to bottom at a given speed. This script is more complicated, but you don’t need to understand how it works. You can copy the script below and adjust the SPEED and JUMP_TO_TOP according to your needs.

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);