Question

在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中找到的代码）。

Answer 1

我猜这是因为JQM用replaceState以编程方式操纵历史记录。您可以在docs

中详细了解他们如何在ajax环境中跟踪历史记录

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

Answer 2

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

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

显示相应的jsFiddle可用。

已经在Chrome 38.0和Internet Explorer 11.0上测试过。

为什么iframe的历史会被添加到历史记录中

2 个答案: