turbolinks導(dǎo)致js代碼只能運(yùn)行一次的解決辦法

本站使用的是Rails框架開發(fā)的,并且有第三方的js. 其中有一個(gè)回到頂部的功能,部署時(shí)發(fā)現(xiàn)回到頂部的按鈕只能成功運(yùn)行一次,當(dāng)瀏覽到其他頁面后立即失效.本能反應(yīng)應(yīng)該是turbolinks的坑.

首先想到的是禁用turbolinks

在application.js 中刪去

//= require turbolinks

然后在apploication.html.erb中刪去

'data-turbolinks-track': 'reload'

問題完美解決.

但從另一方面來考慮,既然Rails中引入turbolinks,是為了加快頁面的打開速度,如果直接棄用豈不是很可惜

于是去turbolinks的github看文檔

turbolinks

turbolinks用

document.addEventListener("turbolinks:load", function() {

})

替換了JQuery中的

$(document).ready(function(){

})

因此只需要把第三方j(luò)s的回到頂部的功能拎出來這樣寫即可

turbolinks-load

這樣問題也解決了

仔細(xì)分析了一下這個(gè)問題的原因

1. $(document).ready 依賴于 DOMContentLoaded 事件

2. Turbolinks 接管頁面后換頁不會(huì)產(chǎn)生 DOMContentLoaded,所以換頁之后 $(document).ready 無效

3. Turbolinks 提供了 turbolinks:load 取代 $(document).ready

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容