1

在 jQuery mobile 中，我使用的是 iframe。当您按下后退按钮（在应用程序或浏览器的后退按钮中）时，iframe 内容会消失。然后，当您再次按下后退按钮时，应用程序将转换到上一页。

iFrame 正在被添加到历史记录中。我认为这不应该发生。

创建了一个jsFiddle，以尽可能简单的形式说明这个难题。

在其中，您将找到一个 HTML 片段，该片段创建了两个 jQuery Mobile 页面。在第一页有一个链接可以转到第二页。在第二页上，有两个返回按钮（一个在页眉上，一个在页面上作为按钮），还有一个用于重新加载的按钮<iframe>。要重现问题：

  • 从第 1 页跟随链接到第 2 页
  • 在第 2 页上，单击按钮以加载<iframe>
  • 单击任一后退按钮

您会注意到您没有返回到第 1 页。

这是HTML：

<div data-role="page">
    <p>This is page 1</p> <a href="#page2">Go to page 2</a>
</div>

<div data-role="page" id="page2">
    <div data-role="header" data-add-back-btn="true">
         <h1>Page 2</h1>
    </div>
    <p>This is page 2</p>
    <p>What follows is the iFrame</p>
    <iframe id="i1" width="500" src="http://www.ibm.com"></iframe>
    <p>This button issues a programmatic back</p>
    <button id="backButton">Go Back</button>
    <p>This button loads new content into the iframe</p>
    <button id="reloadButton">Reload iFrame</button>
</div>

这是JavaScript

$(function () {
    $("#backButton").click(function () {
        jQuery.mobile.back();
    });
    $("#reloadButton").click(function() {
        $("#i1").attr("src", "http://www.microsoft.com?x=" + Math.random());
    });
});

（这是您将在 jsFiddle 中找到的代码）。

4

2 回答 2

0

我猜这是因为 JQM 使用replaceState以编程方式操纵历史。您可以在文档中阅读有关他们如何在 ajax 环境中跟踪历史记录的更多信息

给我一些代码或小提琴，我可能会给你一个更详细的答案。

于 2012-04-14T04:57:27.680 回答
0

一个似乎有效的答案（到目前为止）不是尝试重新加载<iframe>via 更改其src属性，而是插入一个全新的<iframe>元素来替换以前存在的元素。实现这一点的逻辑可能如下所示：

$("#frameLocation").html('<iframe id="i1" width="500" src=' + newURL + '"></iframe>');

一个相应的jsFiddle显示它工作是可用的。

这已经在 Chrome 38.0 和 Internet Explorer 11.0 上进行了测试。

于 2014-11-01T22:31:18.040 回答