O que torna a internet um lugar dinâmico e flexível é a possibilidade de navegar entre páginas e levar consigo algumas informações. Durante o desenvolvimento das nossas aplicações, ter tal dinamismo e flexibilidade também é muito importante para garantir inúmeras aplicabilidades.
Vamos ver aqui como chamar um arquivo javascript e passar para ele parâmetros, porém não vamos enviar via Query String no atributo src. Existe uma forma mais simples e funcional que deixa até mais elegante o código.
Para esse exemplo vamos ter duas páginas, a index.html e script.js. Passamos os parâmetros através dos atributos data-* na própria tag de script, conforme exemplo abaixo.
<script src="script.js" data-attr1="Aqui vem o primeiro valor" data-attr2="Aqui vem alguma coisa"></script>Note que temos dois data-attr*, ali fica nossos parâmetros e é eles que vamos acessar nos arquivos .js.
Dentro do nosso arquivo .js, acessamos os atributos seguindo o código abaixo. Utilizamos a propriedade currentScript em seguida chamamos a função getAttribute() como faríamos normalmente.
const attr1 = document.currentScript.getAttribute('data-attr1');Agora vamos ver dois exemplos mais completos.
index.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Javascript - SatellaSoft</title>
</head>
<body>
<div>
<p id="attr1"></p>
<p id="attr2"></p>
</div>
<script src="script.js" data-attr1="Aqui vem o primeiro valor" data-attr2="Aqui vem alguma coisa"></script>
</body>
</html>script.js
'use strict'
const attr1 = document.currentScript.getAttribute('data-attr1');
const attr2 = document.currentScript.getAttribute('data-attr2');
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#attr1').innerHTML = attr1;
document.querySelector('#attr2').innerHTML = attr2;
});Devemos obter os valores logo no começo do arquivo, incluir a captura dentro de um evento pode não funcionar.
Finalizamos por aqui.
