Question

我正在测试是否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 → /
}

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

Answer 1

最后我发现原因是我们所有的链接都是PHP文件，例如/folder/index.php?p=1&x=2，而Turbolinks检查了哪个，如果链接有扩展名，它必须是htm，html或xhtml。

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

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

这样做之后就开始按预期工作了。

Turbolinks总是像往常一样加载页面

1 个答案: