es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo pasar un valor como cadena de consulta cuando se produce el evento de clic del botón de retroceso del navegador?

¿Cómo pasar un valor como cadena de consulta cuando se produce el evento de clic del botón de retroceso del navegador?

16 Jun, 2023 Programación

¿Cómo pasar una variable en formato de cadena de consulta a la URL para que se devuelva cuando se presione el botón de retroceso del navegador? Lo estoy implementando como un archivo ejs usando javascript.

Si se mueve de la página A a la página B y regresa a la página anterior usando el botón que devuelve a la página A desde la página B,

onclick = ''location.href=" A url/3" '

se utiliza para pasar una variable para implementar la función que quiero.

Sin embargo, quiero cambiar location.href en el mismo formato para tener la misma función cuando se presiona el botón de retroceso del navegador en lugar del botón que hice yo mismo.

window.onpageshow = function (event) {
            if (event.persisted || (window.Performance && window.PerformanceNavigation.type == 2)) {

        } else {

        }
}

Intenté usar el código anterior, pero cuando se aplicó este código en la etiqueta de script de pageA.ejs, se ejecutó al acceder a la página A. Quiero escribir el código anterior en la página B.

Estoy muy curioso acerca de cómo detectar el evento de clic del botón back del navegador de la página B en la etiqueta de script de pageB.ejs y pasar el valor modificando location.href.

Estoy pensando mucho en esto. Necesito ayuda.

  • ) Estructura html del archivo A.ejs.
<div class = ''tab'' id = ''tab-1'>
  <!-- Ver pestaña-1 -->
</div>

<div class = ''no tab'' id = ''tab-2'>
  <!-- vista de la pestaña-2 -->
</div>

<div class = ''no tab'' id = ''tab-3'>
  <!-- Ver pestaña-3 -->
</div>

<div class = ''no tab'' id = ''tab-4'>
  <!-- Ver pestaña-4 -->
</div>

+) la clase ‘tab’ define el tamaño de la pestaña y la clase ‘no tab’ hace que la pestaña sea invisible. Al ingresar a la página A por primera vez, la pestaña-1 se muestra por defecto. La clase de la pestaña-1 es solo ‘tab’, no ‘no tab’.

La razón por la que desea pasar la variable 3 de vuelta a la página A es porque se movió de la pestaña 3 a la página B. Es decir, como queremos enviar la variable 3 desde la página B y volver a la página A y obtener la variable 3, por lo tanto, solo se crea la etiqueta div correspondiente a tab-3 con class = ‘tab’.

+) El código a continuación muestra solo ciertas pestañas. Este código ya está implementado en mi área local.
“`
let tabs = document.getElementsByClassName(‘tab’);
let cur_no = <%= curNo %>; // <%= curNo%> es la variable enviada por la página B. (aquí 3)

if (!cur_no) cur_no = 0; //predeterminado

for (let i = 0; i <tabs.length; i ++) {
tab[i].classlist.add(‘no tab’); // maneja pestañas invisibles 1 ~ 4
}

tab[cur_no].classlist.remove(‘no tab’); // mostrar solo la pestaña número ‘cur_no’. i=”” ++)=”” {=”” tab[i].classlist.add(‘no=”” tab’);=”” maneja=”” pestañas=”” invisibles=”” 1=”” ~=”” 4=”” }=”” tab[cur_no].classlist.remove(‘no=”” tab’);=”” mostrar=”” solo=”” la=”” pestaña=”” número=””></tabs.length; i ++) {
tab[i].classlist.add(‘no tab’); // maneja pestañas invisibles 1 ~ 4
}

tab[cur_no].classlist.remove(‘no tab’); // mostrar solo la pestaña número ‘cur_no’.>

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para pasar una variable en formato de cadena de consulta a la URL para que sea devuelta cuando se presiona el botón de retroceso del navegador, puede utilizar el método pushState o el método replaceState del objeto history en JavaScript.

    En su caso, como desea modificar la URL y enviar la variable desde la página B y detectar el evento de clic del botón de retroceso del navegador en la página B, puede utilizar el siguiente código:

    // Obtener la URL actual
const currentUrl = window.location.href;

// Modificar la URL añadiendo el parámetro de cadena de consulta
const newUrl = `${currentUrl}?variableName=${variableValue}`;

// Añadir la nueva URL al historial y pasar el valor de la variable como datos de estado
history.pushState({ variableName: variableValue }, null, newUrl);

// Detectar el evento de clic del botón de retroceso del navegador
window.addEventListener('popstate', function (event) {
    // Acceder a los datos de estado y extraer el valor de la variable
    const variableValue = event.state.variableName;

    // Redirigir a la página A y pasar el valor de la variable en la URL
    location.href = `URL de A/${variableValue}`;
});

    Puede colocar este código en la etiqueta de script de page B.ejs y modificar el variableName y variableValue según sus necesidades.

    Tenga en cuenta que el evento popstate se desencadena no solo por el botón de retroceso del navegador, sino también por el botón de avance y cualquier cambio en el historial mediante el método pushState o replaceState. Por lo tanto, debe verificar la propiedad event.persisted para asegurarse de que el evento sea causado específicamente por el botón de retroceso del navegador.

Comments are closed.