ドメインが異なる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');
});