2012-04-13 262 views
1

在jQuery手机中,我正在使用iframe。当您按下后退按钮(在应用程序或浏览器后退按钮中)时,iframe内容将消失。然后,当您再次按下后退按钮时,应用程序将切换到上一页。为什么会将iframe的历史记录添加到历史记录中

iFrame正在添加到历史记录中。我认为这是从未发生过的。

A jsFiddle已经创建,它以尽可能简单的形式说明了难题。

其中你会发现一个HTML片段,它创建了两个jQuery Mobile页面。在第一页上有一个链接可以转到第二页。在第二页上,有两个后退按钮(一个在标题上,一个在页面上作为按钮)以及一个用于重新加载的按钮。重现问题:

  • 从第1页按照链接到2
  • 页第2页上,单击按钮加载
  • 单击后面的按钮

你会注意到你做不是回到第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找到的代码)。

+0

它看起来像这个谜题已经存在了一段时间...另请参阅:https://issues.apache.org/jira/browse/CB-265这里是另一个有用的链接http://khaidoan.wikidot。 COM/IFRAME和浏览器的历史 – Kolban 2014-11-01 22:15:01

回答

0

我猜这是因为JQM以编程方式用replaceState操作历史。您可以阅读更多关于他们如何在ajax环境中跟踪历史的信息docs

请给我看一些代码或fiddle,我可能会给你一个更详细的答案。这似乎工作

0

一个答案(到目前为止)是试图通过改变其src属性,而是重新加载,将一个全新的元素来取代一个是以前在那里。逻辑来实现这一可能如下:

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

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

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