JQuery 移动版，交替图像中断"Back"按钮

Question

对于JQuery Mobile网站，我需要一个新的图像来加载页面导航。图像仅显示在主屏幕上。

例如，您可以加载m.smellyeggs.com，该网站将image_A.png作为顶部横幅。选择菜单项1，然后按返回键，此时image_B.jpg显示为顶部横幅。

我可以用cookie让它工作。我得到一个潜在图像的数组，然后使用cookie遍历数组。这适用于页面重新加载，但页面的任何缓存加载（例如href="/"或在手机或浏览器中使用"Back"）都不会调用javascript。因此，图像实际上不会交替。

var images = new Array(); 
<% banner_mobile_uris( controller.conference ).each do |url| %>
  images.push( "<%= url %>" );
<% end %>
inc_banner_cookie();
load_banner();

为了解决这个问题，我使用了以下代码，它删除了图像，每当加载主页时都会强制刷新图像。

$( 'a' ).live( 'click', function( ev ){
  var banner = $('#m_banner').load(htm_file);
  banner.empty().remove();
});

此代码将从任何后续页面导航中删除"返回"按钮

这是不能接受的！关于更好的方法有什么建议吗？除非绝对必要，否则我宁愿不执行自己的"返回"按钮。

感谢您的阅读（希望能有所帮助）。

Answer 1

答案在于使用pageinit检测JQuery Mobile页面加载成功。。。

$(document).on('pageinit', function(){
    inc_banner_cookie();
    load_banner();
});

这不会禁用后退按钮。并在任何类型的页面导航上重新加载图像。几乎任何类型。。。

事实证明，当AJAX重定向发生时，这个appraoch是脆弱的，随后的pageinit可能无法工作。请参阅我关于这个问题的问题。