javascript - ejemplos - iframe responsive

IFrame Atrás

Question

Busqué mucho para deshacerme de este problema en Internet, pero no pude encontrar una solución específica a pesar del problema que se discute en detalles anteriormente.

La consulta es simple. Mi javascript agrega dinámicamente un iframe a la página web (que muestra un formulario de comentarios). El problema es que, "después de responder", ahora cuando el usuario hace clic en el botón "Atrás" del navegador, el iframe en lugar de la ventana del navegador se ve afectado, es decir, el cuestionario se muestra de nuevo. Quiero que el botón de retroceso del navegador se comporte normalmente.

Este comportamiento es realmente molesto y tengo problemas para solucionarlo.

Estoy usando Firefox.

Esperando las respuestas. Por favor, infórmeme si debería dar más detalles.

Gracias,

Answer 1

Su formulario tiene un botón de enviar, que publica la página en el servidor. El botón Atrás siempre enviará al usuario de vuelta al formulario independientemente de si usa un iframe o no. La forma ideal es notificar al usuario de una acción completada, en este caso agradecer al usuario los comentarios (usando un cuadro de alerta) y redirigir al usuario a la página de inicio o proporcionar un botón en la página que dice "Volver al inicio".

Answer 2

Firefox e IE efectivamente actúan como usted mencionó, pero Chrome no, y supongo que otros navegadores WebKit harían lo mismo. En Chrome, hacer clic en el botón Atrás lo llevará a donde desea ir (la URL anterior del cuadro principal). es decir, Chrome no agrega iframe a los cambios de URL en el historial del botón de retroceso.

Lamentablemente, no he encontrado la manera de obligar a IE y FF a replicar esto, así que usé el enfoque de publicación AJAX sugerido anteriormente por Arun.

Aquí está mi fuente iframe, que usa jQuery para publicar el formulario y reemplaza toda la página con el resultado de ese POST:

<form method="post" onsubmit="postForm(this);return false">
  ...
</form>

<script type="text/javascript">
function postForm(form) {
    $.post(form.action, $(form).serialize(), postCompleted);
}
function postCompleted(data) {
    $(''html'').html(data);
}
</script>

Esto funciona en todos los navegadores; hacer clic en el botón Atrás lo enviará de regreso a la URL anterior vista por el usuario final, en lugar de la forma inicial cargada dinámicamente en el iframe.

Answer 3

Encontré el mismo problema: uso un iframe creado dinámicamente para mostrar un "popup" en mi página, cuyo SRC apunta a otra página que tiene un formulario y un botón de envío. Después de enviar esa página, se utiliza una devolución de llamada JS para ocultar el iframe. Como explicó, esto provoca que se agregue una nueva entrada al historial (al menos en IE).

Pero descubrí que eliminar el elemento iframe del DOM (en lugar de ocultarlo) hace que se elimine la entrada del historial no deseado (probado en IE9). Que es lo que el usuario esperaría en esa situación.

Puedes observar esto tú mismo en IE9:

1. Abra el menú del botón Atrás (haga clic con el botón derecho en el botón Atrás): solo tiene una entrada para la página actual
2. Presione enviar en el iframe => el menú del botón Atrás muestra una entrada adicional para el iframe
3. Eliminar el iframe del DOM => el menú del botón Atrás ya no muestra esa entrada