Hoje vamos aprender a resolver um problema comum em aplicações front-end e também em aplicativos híbridas quando precisamos ler parâmetros de uma página para outra sem utilizar linguagens de back-end, como PHP por exemplo.
Conhecendo as funções JS
Funções são blocos de construção fundamentais em JavaScript. Uma função é um procedimento de JavaScript – um conjunto de instruções que executa uma tarefa ou calcula um valor. Para usar uma função, você deve defini-la em algum lugar no escopo do qual você quiser chamá-la.
Capturar o endereço da url com JavaScript
Para capturar o endereço da url usamos a função window.location.href
do JS. Esta função retorna o caminha completo da url, incluindo o http:// e todos os parâmetros inclusos na url.
Encontrar caracteres em uma string com JavaScript
Depois de descobrirmos o endereço da url, vamos varrer o endereço em busca dos caracteres ? e & para que então possamos descobrir quais são os parâmetros. Para isso usamos a função split().
Código completo
No código a seguir usamos as duas funções citadas acima. O código a seguir consegue varrer até 4 parâmetros passados na url. Você poderá ajudar o código para a quantidade de parametros que desejar ler.
Coloque até 3 parametros na url e pressione a tecla Enter.<br /><br />
<hr />
<div id="resultado"></div>
<script>
window.onload = CapturaParametrosUrl();
/*
Captura parâmetros de URL com JS
Créditos: https://comodesenvolver.com.br
*/
function CapturaParametrosUrl() {
//captura a url da página
var url = window.location.href;
alert("URL CAPTURADA: \n\n" + url);
//tenta localizar o ?
var res = url.split('?');
if (res[1] === undefined) {
alert('página sem parâmetros.');
}
if (res[1] !== undefined) {
//tenta localizar os & (pode haver mais de 1)
var parametros = res[1].split('&');
alert('Parametros encontrados:\n' + parametros);
//qtd. de parâmetros que serão tratados pelo laço.
var qtdParametrosParaLer = 5;
//guarda o nome dos parâmetros e os valores e, vetores.
var parametroEncontrado = new Array();
var valorParametro = new Array();
for (var cont = 0; cont<=qtdParametrosParaLer; cont++)
{
if (parametros[cont] !== undefined)
{
captura = parametros[cont].split('=');
parametroEncontrado[cont] = captura[0];
valorParametro[cont] = captura[1];
document.getElementById('resultado').innerHTML += parametroEncontrado[cont] + '=' + valorParametro[cont] + '<br/>';
}
}
}
}
</script>
Outro Exemplo de Código
Neste exemplo suponhamos a seguinte situação, o navegador está recebendo a URL com uma variável no final, e queremos pegar só a informação que contenha a nessa variável “https://seudominio.com/?var1=MeusDados” queremos pegar o texto “MeusDados” e imprimirmos em um link href como um incremento de um botão em nossa página.
<a class="wp-block-button__link" href="https://seudominio.com/?var1=Sim">MEU BOTÃO</a>
<script>
window.onload = CapturaParametrosUrl();
/*
Captura parâmetros de URL com JS
Créditos: https://comodesenvolver.com.br
*/
function CapturaParametrosUrl() {
//captura a url da página
var url = window.location.href;
//tenta localizar o ?
var res = url.split('?');
if (res[1] !== undefined) {
//tenta localizar os & (pode haver mais de 1)
var parametros = res[1].split('&');
//qtd. de parâmetros que serão tratados pelo laço.
var qtdParametrosParaLer = 5;
//guarda o nome dos parâmetros e os valores e, vetores.
var parametroEncontrado = new Array();
var valorParametro = new Array();
for (var cont = 0; cont<=qtdParametrosParaLer; cont++)
{
if (parametros[cont] !== undefined)
{
captura = parametros[cont].split('=');
parametroEncontrado[cont] = captura[0];
valorParametro[cont] = captura[1];
document.querySelector(".wp-block-button__link").href += '%20' + valorParametro[cont];
}
}
}
}
</script>