Question

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

例如，您加载m.smellyeggs.com，其中有image_A.png作为顶部横幅。您选择菜单项1，然后按回来，现在image_B.jpg显示为顶部横幅。

我能够使用cookies让它工作。我获得了一系列潜在的图像，然后使用cookie来遍历数组。这适用于页面重新加载，但页面的任何缓存加载（例如href =“/”或在移动设备或浏览器中使用“返回”）都不会调用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很脆弱，后续的pageinits可能无法正常工作。见my question concerning this issue.

JQuery Mobile，交替图像打破“后退”按钮

1 个答案: