我有一个具有不同域的 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');
});