Screen forwarding after Load

Asked

Viewed 406 times

0

Does anyone know how to do when I press a link I be directed first to a load screen and after a certain time (thing of seconds) I be directed to the page I would really like to go? In short: the load page would act as an "interventor" between the Link and the target page.

javascript html

3 answers

1


There is an old technique, without JS or jQuery, just use the Meta Refresh

Place this tag inside the <head> of the page where the loader

<meta http-equiv="refresh" content="2; pagina-de-destino.html">

Notice that number 2; are the seconds that you will remain on the page of loader before it directs you to the landing page.

Then its structure would look like this:

First page with link to href="pagina-loadre.html" > page-Loader.html with the meta http-equiv="refresh" > html landing page

inserir a descrição da imagem aqui

0

You can do it using JavaScript. Just use a setTimeout on the loading screen to wait the time before redirecting and window.location to make the redirect.

Follow an example:

window.onload = function(){
  //Tempo que deseja esperar, em milissegundos
  var tempo = 5000;
  //Url para onde redirecionar
  var url = "https://answall.com"

  setTimeout(function(){
    window.location = url;
  }, tempo);
}
<h1>Tela de Load</h1>

You can pass the link to the loading screen as a parameter in the url. You can access the page url using window.location.href and the parameter as follows:

var url_string = "http://load.html?url=https://answall.com" ; //window.location.href
var url = new URL(url_string);
var link = url.searchParams.get("url");
console.log(link);

If the url you want to direct to has gets parameters, see below for how to treat.

On the page that calls the load you need to pass the url to where it will redirect using encodeURIComponent. Remember to give one decodeURIComponent(url) in the url received within the load.

Follow the example:

function redirect(url) {
  var urlEncoded = encodeURIComponent(url);
  var redirectUrl = "load.html?link="+ urlEncoded;
  
  console.log(redirectUrl);
  //window.location = redirectUrl;
}
<a href="#" onclick="redirect('www.foobar.com/?first=1&second=12&third=5')"> redirect to loading page </a>

0

This is Gabriel, welcome to Stackoverflow.

There are two ways you can achieve what you need - one easy and one that requires more code to be developed.

The easiest way just use the function scope.setTimeout(function[, delay]). Basically it will execute the code inside the function only after the time in milliseconds set in the parameter delay.

Within the function you just redirect the user to the desired page. And before the function, just display some Download (there are several simple and small libraries that do this).

loader.display = "block";

window.setTimeout(() => {
   window.location = "https://example.com";
}, 3600);

The second way (which requires more skills) you will have to intercept from which page the user was redirected to that loading page (can be through GET parameters, cookies, Sessions, etc) and use the same function as mentioned above scope.setTimeout(function[, delay]) to redirect the user after X time to desired page.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.