Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

163
Visualizações
Generate Viewing Link JS

I have a static website (HTML, CSS, JS) where people can keep track of their times.

I would like it so that they can generate a link that creates a new html page to display their time. I would like this link to be shareable, so other people can see the time.

e.g.

I time myself and get a really good time that I would like to share. I generate a link which is linked to that time, and send it to my friends, who on clicking that link can see the time & other details associated with it.

Is this possible, and if it is, how?

Thanks

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

I made a working demo to show you what you can do w/o database and keep data unmodified and "secure".

When you press "share" it encode with btoa JS function your time and name value to url and then generate a link.

When someone go to link, it read the params from URL ?time=XXX?name=XXXX and then decode them with atob JS function then set name et timer elements text to display on page.

NOTE: Remove first const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; and uncomment const queryString = '?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla'; to make this code work on your page server.

window.onload = function() {
  let timerEl = document.getElementById('timer');
  let nameEl = document.getElementById('name');
  const queryString = '?time=MTBtMjFz&name=U2FtIEJaRVo='; //Get the time parameter index.html?time=MTBtMjFz&name=Q29kZXJHdXJ1WFla" from URL (encoded with javascript)
  //Uncomment next line in production 
  //const queryString = window.location.search;
  if (queryString !== '') {
    const urlParams = new URLSearchParams(queryString);
    const time = urlParams.get('time');
    const name = urlParams.get('name');
    timerEl.innerText = window.atob(time);
    nameEl.innerText = window.atob(name)
  }
  let share = document.getElementById('share');
  share.addEventListener('click', function(e) {
    //Generate URL 
    document.getElementById('sharelink').innerText = 'http://example.com/timer.html?time=' + window.btoa(timerEl.innerText) + '&name=' + window.btoa(nameEl.innerText);
  });
}
<!-- Consider this page URL is http://example.com/timer.html -->
<main>
  <h1>I'm <span id="name"></span></h1>
  <h2> My time is: <span id="timer"></span></h2>
  <button id="share">Share my time !</button>
  <h3 id="sharelink"></h3>
</main>

about 4 years ago · Juan Pablo Isaza Relatório

0

if you just need show time and not worry with security you can use get parameters. You make url like: yoursite.com/time?time=20 and in your time page:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

// Your time as stored in this variable.
var time = findGetParameter("time");

but i recommend a database with server-side langague like PHP, NODE or .NET.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda