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

Mat*_*ari 1 javascript hyperlink single-page-application turbolinks turbolinks-5

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

由于我们已经在所有链接上的所有点击上有了一种“主钩”,我设置data-turbolinks="false"<body>然后更改了我们的点击处理程序以调用 Turbolinks:

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

  Turbolinks.visit(url);
}
Run Code Online (Sandbox Code Playgroud)

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

<meta name=\"turbolinks-cache-control\" content=\"no-cache\">
<meta name=\"turbolinks-root\" content=\"/\">
Run Code Online (Sandbox Code Playgroud)

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

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

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

Is there some more configuration involved, than simply using the visit() method?

EDIT:

After further testing, I noticed that, when the call to Turbolinks.visit(url) seems to "fail", by issueing a normal page navigation instead, it returns an object like that when logged is like this:

Object {
  absoluteURL: "URL WHERE I TRIED TO NAVIGATE",
  requestURL: "SAME AS ABOVE"
}
Run Code Online (Sandbox Code Playgroud)

When I test the only address which is loaded correctly, I get a different object instead:

turbolinks:visit {
  target: HTMLDocument ? /,
  isTrusted: false,
  eventPhase: 0,
  bubbles: true,
  cancelable: false,
  defaultPrevented: false,
  composed: false,
  timeStamp: 1492781909168000,
  cancelBubble: false,
  originalTarget: HTMLDocument ? /,
  explicitOriginalTarget: HTMLDocument ? /
}
Run Code Online (Sandbox Code Playgroud)

In the first case, it seems like a plain object, while the second looks more like an event instead; however this does not help in identify the issue which causes it not to work properly.

Mat*_*ari 5

最后我发现原因是我们所有的链接都指向 PHP 文件,例如/folder/index.php?p=1&x=2,Turbolinks 会检查是否有扩展名,如果链接有扩展名,它必须是htm,htmlxhtml.

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

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

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