【问题标题】:IFrame Back buttonIFrame 后退按钮
【发布时间】:2025-11-24 03:25:01
【问题描述】:

我在互联网上搜索了很多以摆脱这个问题,但尽管之前已经详细讨论了这个问题,但我找不到具体的解决方案。

查询很简单。我的 javascript 动态地将 iframe 添加到网页(显示反馈表)。问题是,“回答后”,现在当用户单击浏览器的后退按钮时,iframe 而不是浏览器窗口会受到影响,即再次显示调查表。我希望浏览器后退按钮正常运行。

这种行为真的很烦人,我很难解决这个问题。

我正在使用火狐。

期待回复。如果我应该提供更多详细信息,请通知我。

谢谢,

【问题讨论】:

    标签: javascript firefox iframe


    【解决方案1】:

    您的表单有一个提交按钮,用于将页面发布到服务器。无论您是否使用 iframe,后退按钮都会将用户返回到表单。理想的方法是通知用户完成的操作,在这种情况下感谢用户的反馈(使用警告框)并将用户重定向到主页或在页面中提供一个按钮说“返回主页”。

    【讨论】:

    • 同意这一点,任何改变这种背部行为的东西都会让用户感到困惑。
    • 我将提供更多上下文:该脚本是可在公共域网站上运行的扩展的一部分。我已经有一个“返回上一页”链接,但我仍然希望后退按钮能够像我在帖子中所写的那样起作用。我想以某种方式从浏览器历史记录中分离或删除 iframe 历史记录,但我不确定是否可以这样做?
    • 唯一的方法是使用 AJAX 将表单值发布到服务器。这样您就可以避免回帖,并且后退按钮只会将您带到上一页。但这涉及到相当多的 javascript 编码,以将数据发布到服务器,然后在您获得有效响应后隐藏表单字段。为 Ajax 使用 jQuery 会让您更轻松一些。但我怀疑你是否可以删除浏览器历史记录。
    【解决方案2】:

    Firefox 和 IE 确实像您提到的那样,但 Chrome 没有,我猜其他 WebKit 浏览器也会这样做。 在 Chrome 中,单击“后退”按钮会将您带到您想去的地方(父框架的前一个 URL)。即 Chrome 不会在后退按钮历史记录中添加 iframe URL 更改。

    遗憾的是,我没有办法强制 IE 和 FF 复制这一点,所以我使用了 Arun 上面建议的 AJAX 发布方法。

    这是我的 iframe 源代码,它使用 jQuery 发布表单,并将整个页面替换为该 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>
    

    这适用于所有浏览器;单击“返回”按钮会将您返回到最终用户看到的上一个 URL,而不是 iframe 中动态加载的初始表单。

    【讨论】:

      【解决方案3】:

      我遇到了同样的问题:我使用动态创建的 iframe 在我的页面上显示“弹出窗口”,其 SRC 指向具有表单和提交按钮的另一个页面。提交该页面后,使用 JS 回调隐藏 iframe。正如您所解释的,这会导致将新条目添加到历史记录中(至少在 IE 上)。

      但我发现从 DOM 中删除 iframe 元素(而不是隐藏它)会导致不需要的历史记录条目被删除(在 IE9 上测试)!这是用户在这种情况下所期望的。

      你可以在 IE9 上自己观察:

      1. 打开返回按钮菜单(右键单击返回按钮):当前页面只有一个条目
      2. 在 iframe 中按提交 => 后退按钮菜单显示 iframe 的一个额外条目
      3. 从 DOM 中删除 iframe => 后退按钮菜单不再显示该条目

      【讨论】:

      • 我遇到了这个,为了进一步完善这个答案,我发现如果我不指定 iframe 的 src,直到加载父页面之后,奇怪的返回行为不会发生。