IFrame Schaltfläche Zurück

Question

Ich habe viel im Internet gesucht, um dieses Problem loszuwerden, konnte aber keine spezifische Lösung finden, obwohl das Problem bereits ausführlich diskutiert wurde.

Die Anfrage ist einfach. Mein Javascript fügt dynamisch einen Iframe in die Webseite ein (der ein Feedback-Formular anzeigt). Das Problem ist, dass "nach dem Beantworten", wenn der Benutzer nun auf die Zurück-Taste des Browsers klickt, der Iframe statt des Browserfensters betroffen ist, d.h. der Fragebogen wird wieder angezeigt. Ich möchte, dass sich der Browser-Back-Button normal verhält.

Dieses Verhalten ist wirklich ärgerlich, und ich habe große Schwierigkeiten, es zu beheben.

Ich verwende firefox.

Ich freue mich auf die Antworten. Bitte teilen Sie mir mit, ob ich weitere Einzelheiten angeben sollte.

Merci,

Answer 1

Ihr Formular hat eine Schaltfläche zum Absenden, mit der die Seite an den Server übertragen wird. Die Schaltfläche "Zurück" führt den Benutzer immer zum Formular zurück, unabhängig davon, ob Sie einen iframe verwenden oder nicht. Ideal ist es, den Benutzer über eine abgeschlossene Aktion zu benachrichtigen, in diesem Fall dem Benutzer für sein Feedback zu danken (mit einem Benachrichtigungsfeld) und ihn zur Startseite zurückzuleiten oder auf der Seite eine Schaltfläche mit der Aufschrift "Zurück zur Startseite" bereitzustellen.

Answer 2

Firefox und IE verhalten sich in der Tat so, wie Sie es erwähnt haben, Chrome jedoch nicht, und ich würde vermuten, dass andere WebKit-Browser dasselbe tun würden. In Chrome, klicken Sie auf die Schaltfläche "Zurück" landen Sie, wo Sie gehen wollen (die vorherige URL des übergeordneten Rahmens). d.h. Chrome nicht hinzufügen iframe URL Änderungen in der Schaltfläche "Zurück" Geschichte.

Leider habe ich keine Möglichkeit gefunden, IE und FF zu zwingen, dies zu replizieren, also habe ich den oben von Arun vorgeschlagenen AJAX-Post-Ansatz verwendet.

Hier ist meine iframe Quelle, die jQuery verwenden, um das Formular zu posten, und ersetzen Sie die ganze Seite mit dem Ergebnis dieser 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>

Dies funktioniert in allen Browsern; wenn Sie auf die Schaltfläche "Zurück" klicken, gelangen Sie zur vorherigen URL, die der Endbenutzer gesehen hat, und nicht zum ursprünglichen Formular, das dynamisch in den Iframe geladen wurde.

Answer 3

Ich bin auf das gleiche Problem gestoßen: Ich verwende einen dynamisch erstellten iframe, um ein "Popup" auf meiner Seite anzuzeigen, dessen SRC auf eine andere Seite verweist, die ein Formular und eine Schaltfläche zum Absenden enthält. Nach dem Absenden dieser Seite wird ein JS-Callback verwendet, um den Iframe auszublenden. Wie Sie erläutert haben, wird dadurch ein neuer Eintrag in den Verlauf eingefügt (zumindest im IE).

Aber ich habe herausgefunden, dass Das Entfernen des iframe-Elements aus dem DOM (anstatt es auszublenden) führt dazu, dass der unerwünschte Verlaufseintrag entfernt wird. (getestet mit IE9)! Das ist das, was der Benutzer in dieser Situation erwarten würde.

Sie können dies selbst im IE9 beobachten:

1. Öffnen Sie das Menü der Zurück-Schaltfläche (klicken Sie mit der rechten Maustaste auf die Zurück-Schaltfläche): Sie haben nur einen Eintrag für die aktuelle Seite
2. Drücken Sie im Iframe auf "Submit" => das Back-Button-Menü zeigt einen zusätzlichen Eintrag für den Iframe
3. Entfernen Sie den iframe aus dem DOM => das Menü des Zurück-Buttons zeigt diesen Eintrag nicht mehr an