1

我有一个具有不同域的 iframe,我可以通过使用 jQuery postMessage 插件与父或子通信来调整 iframe 的大小。但是,我有一个单页应用程序,它滚动完成一些步骤,然后通过 ajax 加载到结果页面中。在此结果页面上,有需要在父窗口中加载的产品链接。这也很好。我的问题是当用户单击后退按钮时,我想重新生成并显示结果,而不是页面的初始状态。在 Chrome 上,这工作正常,但在 Firefox 上却不行(当它在 iframe 中时,否则 url 直接工作)。Firefox 似乎忽略了我设置的哈希、cookie、pushState 等。我不知道如何解决这个问题,任何帮助将不胜感激。

首先,我想查看历史 API 是否可用,当我调用 app.getResults() 时,我会检查它是否可用,否则设置 location.hash = "results"。app.resultPageSetup(currentState) 以我喜欢的方式很好地加载,因为它跳过了用于获取对象的 ajax 调用,因为我已经将它保存在状态中。

var isHistory = function() {
 return !!(window.history && history.pushState);
};
//This "if" is for a different part of the app. Just ignore.
if ($('.not_container2').length) {
  setTimeout(function() {
    app.setFrameHeight("2500");
  }, 1000);
} else {
  if ( isHistory() === true  ) {
    var currentState = history.state;
    history.pushState('', '', '#steps');
    if (currentState !== null ) {
      $('.container').hide();
      $('.container2').show();
      app.resultPageSetup(currentState);
      app.resultPageComplete();
    } else {
      $('.container').show();
      $('.container2').hide();
      setTimeout(function() {
        if ($('.container').length){
          app.setFrameHeight("610");
        } else if ($('.not_container2').length) {
          app.setFrameHeight("2500");
        }
      }, 1000);
    }
  } else {
    //Firefox ignores this stuff. Chrome works. Doing without a cookie at all would be nice
    if (location.hash === "#results" && $.cookie("results") === "true") {
      $('.container').hide();
      $('.container2').show();
      app.getResults();
  } else if (location.hash === "") {
    $('.container').show();
    $('.container2').hide();
    $.cookie("results", null);
    setTimeout(function() {
      if ($('.container').length){
      app.setFrameHeight("610");
      } else if ($('.not_container2').length) {
        app.setFrameHeight("2500");
      }
    }, 1000);
  }
 }
}

以下是链接:父级是http://www.hhgregg.com/productfinder/tv(选择第一个选项),iframe 源是http://hhgregg-finders.gst.api.igodigital.com

我也可以通过在父节点上设置哈希来利用 $.postMessage,但我也遇到了麻烦。这是那里的一般想法:

$(function() {

  var iframe = $('#baseFrame');
  var h;
  var saved_state = "igo_steps";

  $.receiveMessage(function(e){
   var data = e.data.split("|");
   var height = data[0];
   var state = data[1];

   if (!isNaN(height)) {
    h = height;
   } else {
    h = "610";
   }
   iframe.attr("height", h);

   if (saved_state !== state) {
    window.location.hash = state;
    $.postMessage(window.location.hash, '*', document.getElementById("baseFrame").contentWindow);
   }
 }, 'http://hhgregg-finders.gst.api.igodigital.com');
});
4

0 回答 0