涡轮链接始终像往常一样加载页面



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

由于我们已经在所有链接上的所有点击上都有一种"主钩子",所以我在<body>上设置了data-turbolinks="false",然后将我们的点击处理程序更改为调用 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 → /
}

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

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

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

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

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

最新更新