1

Lo que pasa es que estoy intentando hacer que en HTML un botón con texto (abrir ficha técnica) que lo tengo alojado en mi dominio, digamos "archivo.pdf" pueda ser abierto en otra pestaña del navegador, y pueda ser visualizado la pagina web y en otra el "archivo.pdf". Lo que pasa, es que en mi código que he estado desarrollando, funciona bien con el target="_blank" y window.open("archivo", '_blank') y demás, lo que busco es que solo se abra una sola vez en otra pestaña el archivo pdf que quiero en la version de celular porque siempre se abren mas de 10 pestañas con el mismo archivo en el celular si se implementa mal el javascript con el , el y el html,o en otros casos tambien parece que ya se arregló, pero a la hora de implementarlo por ejemplo en 5 botones, abre el mismo archivo que se vinculó con el 5to botón en todos los demás botones anteriores, ayuda por favor :( Esto es lo que tengo avanzado


<!--forma 1 -->

<script>
                function abrirPDF() {
                    var url = '/recursos/nombre del archivo.pdf'; // Reemplaza 'ruta-al-archivo.pdf' con la ubicación de tu archivo PDF
                    var win = window.open(url, '_blank');
                    if (win) {
                        // La ventana se abrió correctamente
                        win.focus(); // Enfoca la nueva pestaña si ya existe
                    } else {
                        // Bloquea la apertura múltiple de ventanas emergentes
                        alert('Por favor, habilita las ventanas emergentes en tu navegador.');
                    }
                }
            </script>
        
            <button onclick="abrirPDF()">Abrir PDF</button>


<!--forma 2 -->


<button class="abrirArchivo" data-archivo="/recursos/nombredelarchivo.pdf">Descargar Ficha Técnica </button>
              <script>
                // Función para abrir archivos en otra ventana usando atributos personalizados
                document.querySelectorAll('.abrirArchivo').forEach(function(boton) {
                    boton.addEventListener('click', function() {
                        var archivo = this.getAttribute('data-archivo');
                        if (archivo) {
                            window.open(archivo, '_blank');
                        }
                    });
                });
                </script> 

1 respuesta 1

0

Aquí tienes una solución que puedes usar:

 <!-- Botón para abrir el archivo PDF -->
    <button id="abrir-pdf">Abrir Ficha Técnica</button>
    
    <script>
    // Variable para rastrear si la pestaña está abierta
    let fichaTecnicaAbierta = false;
    let fichaTecnicaVentana;
    
    document.getElementById('abrir-pdf').addEventListener('click', function() {
        if (!fichaTecnicaAbierta) {
            // Si la pestaña no está abierta, abre el archivo PDF en una nueva pestaña
            fichaTecnicaVentana = window.open('archivo.pdf', '_blank');
            fichaTecnicaAbierta = true;
        } else {
            // Si la pestaña ya está abierta, enfoca la pestaña existente
            fichaTecnicaVentana.focus();
        }
    });
    </script>

Este código JavaScript rastrea si la pestaña ya está abierta utilizando la variable fichaTecnicaAbierta. Si la pestaña no está abierta, se abrirá el archivo PDF en una nueva pestaña y se establecerá fichaTecnicaAbierta en true. Si la pestaña ya está abierta, se enfocará la pestaña existente.

Puedes utilizar este código para múltiples botones en tu página sin que se abran pestañas adicionales del mismo archivo PDF en la versión móvil. Asegúrate de reemplazar 'archivo.pdf' con la ubicación real de tu archivo PDF.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.