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.
最后我发现原因是我们所有的链接都指向 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))$/);
};
Run Code Online (Sandbox Code Playgroud)
这样做之后,它开始按预期工作。
| 归档时间: |
|
| 查看次数: |
156 次 |
| 最近记录: |