Obtener agente de usuario en JavaScript

Muhammad Muzammil Hussain 15 febrero 2024
  1. ¿Qué es un agente de usuario?
  2. Obtener agente de usuario en JavaScript
Obtener agente de usuario en JavaScript

Este artículo explicará el propósito de los agentes y le permitirá saber cómo funciona en el código fuente de JavaScript. También veremos cómo podemos obtener un agente de usuario en el programa JavaScript.

¿Qué es un agente de usuario?

Un agente de usuario es una propiedad de un navegador. Durante una solicitud de URL del navegador al servidor, nuestro navegador envía su agente de usuario al sitio web con el que estamos interactuando.

El agente de usuario es una cadena o línea que contiene la identificación del navegador y del sistema operativo.

Se incluye un campo de agente de usuario en los encabezados de solicitud HTTP, y el contenido del campo de agente puede variar de un navegador a otro. Cada navegador tiene su agente de usuario específico.

Esta información puede ser útil para que los servidores web administren estos servicios para servir diferentes páginas web a diferentes navegadores web o sistemas operativos.

Por ejemplo, un servidor web podría enviar la página web móvil a un navegador móvil o una página web avanzada a un navegador web avanzado. Y el servidor web también puede recomendar a los usuarios que actualicen su navegador.

Aquí hay un ejemplo de contenido de agente de usuario.

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 Edge/18.19041

Obtener agente de usuario en JavaScript

En JavaScript, podemos crear una función personalizada para obtener el contenido de los agentes de navegación activos. Con la ayuda de la propiedad del navegador userAgent, podemos encontrar el campo de contenido del agente, y esa propiedad es de solo lectura.

Ejemplo en JavaScript:

<html>
    <head>
        <title>get agent in JavaScript</title>
    </head>
    <script>
    function getAgent()
    {
        let agent = navigator.userAgent; //get agent from navigator property
        document.getElementById("agent").innerHTML = "User-agent:<br>" + agent;
    }
    </script>
    <body>

        <h1 style="color:blueviolet">DelftStack Learning</h1>
        <h3>JavaScript Get Agent</h3>

        <p>Click on button to get the agent</p>

        <button onclick="getAgent()">Click me</button>

        <p id="agent"></p>
    </body>
</html>

Producción:

Obtener agente de usuario en JavaScript

Como se muestra en el código fuente anterior, declaramos una función de tipo let getAgent() en las etiquetas <script></script> que se activará al hacer clic en un botón.

Dentro de esa función, tenemos que obtener el contenido del agente de usuario usando la propiedad navigator navigator.userAgent y almacenar ese valor de cadena en una variable. Luego, hemos asignado esa variable al elemento de párrafo utilizando el método predeterminado del documento HTML getElementById("agent").innerHTML.

Hemos creado el elemento de botón Haga clic en mí y llamamos a la función getAgent() en el evento de clic para mostrar el contenido del agente en la página web.

Puede guardar la fuente anterior con la extensión de HTML y abrirla en el navegador para ver el resultado.