使用 Chrome Ember.js 打开 URL 时无法使 HTML 锚工作

Question

我有以下简单的 ember 应用程序（只有一个 application.hbs 文件）。

这里我有几个锚点，希望用户点击其中一个并到达页面的那个部分（很像 wikipedia 中使用的）。

问题来了。如果我单击顶部的其中一个链接，它就会起作用。但是，如果我在 Chrome 中并输入锚点 url（即 localhost:4200/#midnight_love），URL 将加载 Ember 应用程序，但会失败跳到锚点。我发现这只发生在 Chrome 中，并且该站点将跳转到 Firefox 和 Internet Explorer 中的锚点。如果您只是 copy/paste 进入 ember 应用程序的 application.hbs，则下面给出了重现此问题所需的所有代码。

另请注意，如果我将这段代码简单地粘贴到 HTML 文件中，那么这段完全相同的代码将适用于所有浏览器。

Application.hbs

<ul>
<li><a href="#Early_career">1 <span class="toctext">Early career</span></a></li>
<li><a href="#Initial_success">2 <span class="toctext">Initial success</span></a></li>
<li><a href="#What's_Going_On_and_subsequent_success">3 <span class="toctext"><i>What's Going On</i> and subsequent success</span></a></li>
<li><a href="#Last_Motown_recordings_and_European_exile">4 <span class="toctext">Last Motown recordings and European exile</span></a></li>
<li><a href="#Midnight_Love">5 <span class="toctext"><i>Midnight Love</i></span></a></li>
</ul>

<h2><span id="Early_career">Early_career</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Initial_success"></span>Initial_success</h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="What's_Going_On_and_subsequent_success">What's_Going_On_and_subsequent_success</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Last_Motown_recordings_and_European_exile">Last_Motown_recordings_and_European_exile</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="">Foo</span></h2>
<h2><span id="Midnight_Love">Midnight_Love</span></h2>

Answer 1

将window.location替换为window.location.hash，将下面的代码粘贴到您的 controller/application.js

import Controller from '@ember/controller';
import $ from 'jquery';

export default Controller.extend({
  init() {
    this._super(...arguments);
    $(document).ready( function( ) {
      if (window.location.hash)
        window.location = window.location.hash;
    });
  }
})

使用 Chrome Ember.js 打开 URL 时无法使 HTML 锚工作

Cannot get HTML anchors to work when opening URL with Chrome Ember.js

html

javascript

anchor

ember.js