1

我正在测试Turbolinks是否可以帮助我们的 Web 应用程序看起来更快一些，表现得“几乎像”单页应用程序。

由于我们已经对所有链接的所有点击都有一种“主钩子”，我设置data-turbolinks="false"了<body>然后将我们的点击处理程序更改为调用 Turbolinks：

function goToUrl(url) {
  // some controls here, and then ...

  Turbolinks.visit(url);
}

我还禁用了缓存并将根设置为/：

<meta name=\"turbolinks-cache-control\" content=\"no-cache\">
<meta name=\"turbolinks-root\" content=\"/\">

但是，我注意到它总是执行标准的页面更改，而不是它的“魔法”。

如果我从控制台调用该方法，也会发生同样的情况，没有显示错误或警告，但页面正常加载，而不是使用 Turbolinks“魔法”。

它唯一有效的时候是访问根地址 ( "/") 时。

除了简单地使用该方法之外，是否涉及更多配置visit()？

编辑：

经过进一步测试，我注意到，当调用Turbolinks.visit(url)似乎“失败”时，通过发出正常的页面导航，它在记录时返回一个像这样的对象，如下所示：

Object {
  absoluteURL: "URL WHERE I TRIED TO NAVIGATE",
  requestURL: "SAME AS ABOVE"
}

当我测试正确加载的唯一地址时，我得到了一个不同的对象：

turbolinks:visit {
  target: HTMLDocument → /,
  isTrusted: false,
  eventPhase: 0,
  bubbles: true,
  cancelable: false,
  defaultPrevented: false,
  composed: false,
  timeStamp: 1492781909168000,
  cancelBubble: false,
  originalTarget: HTMLDocument → /,
  explicitOriginalTarget: HTMLDocument → /
}

在第一种情况下，它看起来像一个普通的对象，而第二种看起来更像是一个事件；但是，这无助于确定导致其无法正常工作的问题。

4

1 回答 1

5

最后我发现原因是我们所有的链接都指向 PHP 文件，例如，并且 Turbolinks 有一个检查，如果链接有扩展名，/folder/index.php?p=1&x=2它必须是或之一。htmhtmlxhtml

所以我尝试用另一个函数覆盖该函数，如下所示：

Turbolinks.Location.prototype.isHTML = function() {
    return this.getExtension().match(/^(?:|\.(?:htm|html|xhtml|php))$/);
};

这样做之后，它开始按预期工作。

于 2017-04-21T15:23:16.423 回答