Passando parâmetros para arquivos Javascript

Vamos ver como passar parâmetros para arquivos JS através da tag script.

Publicado em 30/12/2021 11:58

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.