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