firefox - 在FF中的iframe中使用 "history.back"运行的Ember应用程序中 "replaceWith"的奇怪行为

Question

更新:这不是Ember的错误，而是Firefox的错误。参见https://bugzilla.mozilla.org/show_bug.cgi?id=301307。赏金到期后，我将删除此问题(除非有人提出解决方法)。

我有一个在iframe中运行的Ember应用程序。页面A链接到页面B，页面B链接到使用'Route＃replaceWith'实现的页面C，因此B不会保留在历史记录堆栈中。页面C具有调用history.back()的链接，该链接应返回页面A。它确实返回页面A，但是在Firefox 中，仅在重新加载页面之后。没有理由重新加载页面，并且在Chrome中未观察到此行为。除非应用程序在iframe中运行，否则也不会发生此行为。

这是应用程序:

// router.js
var Router = Ember.Router.extend({location:'hash'});
Router.map(function() { 'abc'.split('').forEach(x => this.route(x));});
export default Router;

// a/route.js
export default Ember.Route.extend({actions:{b:function(){this.transitionTo('b');}}});

// a/template.js
This is A.
<a href="#" {{action 'b'}}>Goto B!</a>

// b/route.js
import Ember from 'ember';
export default Ember.Route.extend({ actions: { link: function() { this.replaceWith('c'); } } });

// b/template.js
This is B.
<a href="#" {{action 'link'}}>GOTO C (no history entry)</a>

// c/route.js
export default Ember.Route.extend({ actions: { back: function() { history.back(); } } });

// c/template.hbs
This is C
<a href="#" {{action 'back'}}>Go back</a>

如果我将B中的 replaceWith更改为 transitionTo，将C中的 history.back()更改为 history.go(-2)，则一切正常，并且不会发生重载。但这不是可行的解决方案，因为浏览器的后退按钮还必须将用户从C带回到A。

我正在使用 locationType: 'hash'，无法轻松更改此设置。 locationType: 'history'不会发生此问题。

我能想到为什么Firefox在尝试返回A时可能会重新加载页面的唯一原因是由于更积极的缓存管理。如果这确实是问题所在，那么我想知道是否有某种方法可以告诉Firefox放宽并从缓存中将页面带回到历史记录中，而不是再次返回服务器。

仅供引用，这是一个全新的Ember小应用程序，运行着堆栈中所有内容的最新版本。

任何和所有想法表示赞赏。

Answer 1

保留哈希位置类型并解决Firefox错误的一种方法是，通过扩展内置的Ember HashLocation并重写replaceURL函数以使用history.replaceState而不是location.replace，来实现自定义HashLocation实现。

HashWithFFWorkaroundLocation = Ember.HashLocation.extend({
  implementation: 'hash-with-ff-workaround',

  replaceURL(path) {
    var history = this.get('history') || window.history;

    var useFixOnlyForFF = true; // Use the fix only in Firefox?
    var isFF = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

    var useFix = useFixOnlyForFF && isFF || !useFixOnlyForFF;

    if (useFix && 'object' === typeof history && 'function' === typeof history.replaceState)
    {
        var state = { path: path };
        history.replaceState(state, null, '#' + path);
    }
    else
    {
        // Next line is the original implementation which triggers a bug in Firefox
        // See: https://bugzilla.mozilla.org/show_bug.cgi?id=301307
        this.get('location').replace('#' + path);
    }

    this.set('lastSetUrl', path);
  }
});

然后，使用初始化程序将自定义实现注册为新的位置类型

Ember.Application.initializer({
  name: 'hash-with-ff-workaround-location',

  initialize: function(container, application) {
    // register the custom implementation for locationType: hash-with-ff-workaround
    application.register('location:hash-with-ff-workaround', HashWithFFWorkaroundLocation);
  }
});

在将以上代码添加到项目中之后，您需要在现有代码中更改的唯一一行是

// router.js
var Router = Ember.Router.extend({ location: 'hash-with-ff-workaround' });

您通常可以调用 this.replaceWith('c');。

这是jsFiddle演示: http://jsfiddle.net/Ma3x/hs39vbqg/6/

在jsFiddle中，我启用了所有路由步骤的详细日志记录。如果您查看控制台输出，则可以看到，使用“后退/前进”按钮或history.back/forward时，按正常情况从c向a过渡到a，然后跳过b向前过渡到c。