turbolinks:load 事件适用于本地计算机，不适用于 Heroku
turbolinks:load event works on local machine not on Heroku
我正在将 Webpacker 与 Rails 6 一起使用。turbolinks:load 事件在本地正常工作，但在部署到 Heroku 时却无法正常工作。我通过将 'ready.js' 文件导入我的应用程序文件夹来使用标准 jquery $(document)on.('turbolinks:load' ()=>{})。在事件处理程序中添加控制台日志在我的计算机上有效，但在部署的应用程序上无效。
我正在将代码粘贴到我的 application.js 文件中的 packs 文件夹中。 application.html.erb 形成布局文件夹和 ready.js 文件。我对为什么这行不通一无所知。我已经搞砸了大约一个星期但没有成功。我已经尝试过在 application.js 文件中只包含 turbolinks:load 事件侦听器。我也刚刚尝试做一个简单的 console.log 没有其他代码，以确保没有其他东西可能会阻止代码。即使是最简单的情况仍然无法正常工作。我还清除了位于 cloudflare 后面的我的站点的缓存，并清除了 Heroku 的构建缓存。
如果有任何帮助，我将不胜感激。如果我一直遇到我不想做的问题，我接下来的步骤就是不使用 turbolinks。
aplication.html.erb:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160236437-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-160236437-1');
</script>
<%if content_for?(:title)%>
<title>ᐈ <%= yield(:title) %></title>
<%else%>
<title> Home On Call | Quality Local Contractors</title>
<%end%>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', :defer => "defer" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= "<link rel='canonical' href='#{yield(:canonical)}'/>".html_safe if content_for?(:canonical)%>
<meta name="description" content="<%=yield(:meta_description)%>"/>
<meta name="robots" content="<%=yield(:robots)%>"/>
<meta property="og:title" content="<%=yield(:og_title)%>"/>
<meta property="og:description" content="<%=yield(:og_description)%>"/>
<meta property='og:image' content="<%=yield(:og_image)%>"/>
<meta property="og:url" content="<%=request.url%>"/>
<meta property="og:site_name" content="Home On Call" />
<meta property="og:type" content="business.business"/>
<meta property="business:contact_data:locality" content="<%=yield(:locality_town)%>"/>
<meta property="business:contact_data:region" content="<%=yield(:locality_state)%>"/>
<%# <meta property="business:contact_data:postal_code" content="07604"/> %>
<meta property="business:contact_data:country_name" content="USA"/>
<meta property="business:contact_data:website" content="https://www.homeoncall.com/"/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%=yield(:title)%>"/>
<meta name="twitter:description" content="<%=yield(:meta_description)%>" />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= favicon_link_tag 'favicon/favicon.ico' %>
<%= favicon_link_tag "favicon/apple-touch-icon.png", rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag "favicon/android-chrome-192x192.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "192x192" %>
<%= favicon_link_tag "favicon/android-chrome-512x512.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "512x512" %>
<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "Organization",
"name" : "HomeOnCall",
"alternateName" : "Home On Call",
"url" : "https://www.homeoncall.com/",
"contactPoint": [
{ "@type": "ContactPoint",
"telephone": "+1-201-675-6069",
"contactType": "Customer Service"},
{"@type": "ContactPoint",
"email": "info@homeoncall.com",
"contactType": "Customer Service"}],
"sameAs" : [ "https://www.facebook.com/HomeOnCall"]
}
</script>
</head>
<body id="page-top">
<%= render "layouts/nav"%>
<%= render "layouts/flash"%>
<%= render "layouts/header"%>
<%= yield %>
<%= render "layouts/footer"%>
<%= render "layouts/admin"%>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" >
</body>
</html>
application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import './src/application.scss'
import './ready'
import fontawesome from './fontawesome'
fontawesome()
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
ready.js
import greyscale from './greyscale';
import easing from './easing';
console.log("OUTSIDE DOCUMENT READY")
$(document).on('ready turbolinks:load', function () {
console.log("INSIDE DOCUMENT READY")
greyscale();
easing();
// Multi Step Lead Form.
$("#next-1").click(function (e) {
e.preventDefault();
$("#second").show();
$("#first").hide();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
});
$("#next-2").click(function (e) {
e.preventDefault();
$("#third").show();
$("#second").hide();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#next-3").click(function (e) {
e.preventDefault();
$("#fourth").show();
$("#third").hide();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
$("#next-4").click(function (e) {
e.preventDefault();
$("#fifth").show();
$("#fourth").hide();
$("#progressBar").css("width", "100%");
$("#progressText").text("Step - 5");
});
$("#prev-2").click(function (e) {
e.preventDefault();
$("#second").hide();
$("#first").show();
$("#progressBar").css("width", "20%");
$("#progressText").text("Step - 1");
})
$("#prev-3").click(function (e) {
e.preventDefault();
$("#third").hide();
$("#second").show();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
})
$("#prev-4").click(function (e) {
e.preventDefault();
$("#fourth").hide();
$("#third").show();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#prev-5").click(function (e) {
e.preventDefault();
$("#fifth").hide();
$("#fourth").show();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
// Modal toggle
$('#myModal').modal();
// Show characters left for meta description.
$('#meta-word-text').keyup(function(e){
var numWords = $.trim($("#meta-word-text").val()).split("").length;
$('#meta-word-label').text(`Characters left ${120-numWords}`)
})
// FAQ Collapse
$(".collapsible-item").click(function(e){
$(e.target).siblings().toggle()
$(this).toggleClass("active")
})
});
事情是这样的：
- 每当我单击 link 时，我的注销都会触发“INSIDE DOCUMENT READY”。
- 当 link 在不应该的情况下被点击时，网站闪烁并重新加载。
在网络选项卡中查看时，应用程序包由 Rocket 加载程序（一种用于加速 JS 的 Cloudflare 工具）异步加载。
当点击 link 时，turbolinks 执行了 xhr 调用，它在 rocket loader 启动之前工作了一小段时间。从站点排序的底部删除 rocket loader 脚本修复了它，尽管应用程序包当时没有正确加载。
问题出在 Cloudflare 的 Rocketloader 和 Turbolinks 上。在这个 link (https://docs.deadlinefunnel.com/en/articles/4160226-how-to-disable-cloudflare-rocket-loader) 之后，我在 Cloudflare 仪表板中禁用了火箭装载机，世界上一切都很好。
非常感谢我的朋友 Steffan H，他找到了这个问题的根源。
吸取教训。不要点击你在 Cloudflare 上看到的每个按钮，并承诺在没有彻底测试首先发生的事情的情况下加速你的网站。
我正在将 Webpacker 与 Rails 6 一起使用。turbolinks:load 事件在本地正常工作，但在部署到 Heroku 时却无法正常工作。我通过将 'ready.js' 文件导入我的应用程序文件夹来使用标准 jquery $(document)on.('turbolinks:load' ()=>{})。在事件处理程序中添加控制台日志在我的计算机上有效，但在部署的应用程序上无效。
我正在将代码粘贴到我的 application.js 文件中的 packs 文件夹中。 application.html.erb 形成布局文件夹和 ready.js 文件。我对为什么这行不通一无所知。我已经搞砸了大约一个星期但没有成功。我已经尝试过在 application.js 文件中只包含 turbolinks:load 事件侦听器。我也刚刚尝试做一个简单的 console.log 没有其他代码，以确保没有其他东西可能会阻止代码。即使是最简单的情况仍然无法正常工作。我还清除了位于 cloudflare 后面的我的站点的缓存，并清除了 Heroku 的构建缓存。
如果有任何帮助，我将不胜感激。如果我一直遇到我不想做的问题，我接下来的步骤就是不使用 turbolinks。
aplication.html.erb:
<!DOCTYPE html>
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-160236437-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-160236437-1');
</script>
<%if content_for?(:title)%>
<title>ᐈ <%= yield(:title) %></title>
<%else%>
<title> Home On Call | Quality Local Contractors</title>
<%end%>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload', :defer => "defer" %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= "<link rel='canonical' href='#{yield(:canonical)}'/>".html_safe if content_for?(:canonical)%>
<meta name="description" content="<%=yield(:meta_description)%>"/>
<meta name="robots" content="<%=yield(:robots)%>"/>
<meta property="og:title" content="<%=yield(:og_title)%>"/>
<meta property="og:description" content="<%=yield(:og_description)%>"/>
<meta property='og:image' content="<%=yield(:og_image)%>"/>
<meta property="og:url" content="<%=request.url%>"/>
<meta property="og:site_name" content="Home On Call" />
<meta property="og:type" content="business.business"/>
<meta property="business:contact_data:locality" content="<%=yield(:locality_town)%>"/>
<meta property="business:contact_data:region" content="<%=yield(:locality_state)%>"/>
<%# <meta property="business:contact_data:postal_code" content="07604"/> %>
<meta property="business:contact_data:country_name" content="USA"/>
<meta property="business:contact_data:website" content="https://www.homeoncall.com/"/>
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="<%=yield(:title)%>"/>
<meta name="twitter:description" content="<%=yield(:meta_description)%>" />
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= favicon_link_tag 'favicon/favicon.ico' %>
<%= favicon_link_tag "favicon/apple-touch-icon.png", rel: 'apple-touch-icon', type: 'image/png' %>
<%= favicon_link_tag "favicon/android-chrome-192x192.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "192x192" %>
<%= favicon_link_tag "favicon/android-chrome-512x512.png", rel: 'android-chrome-icon', type: 'image/png', sizes: "512x512" %>
<script type="application/ld+json">
{ "@context" : "http://schema.org",
"@type" : "Organization",
"name" : "HomeOnCall",
"alternateName" : "Home On Call",
"url" : "https://www.homeoncall.com/",
"contactPoint": [
{ "@type": "ContactPoint",
"telephone": "+1-201-675-6069",
"contactType": "Customer Service"},
{"@type": "ContactPoint",
"email": "info@homeoncall.com",
"contactType": "Customer Service"}],
"sameAs" : [ "https://www.facebook.com/HomeOnCall"]
}
</script>
</head>
<body id="page-top">
<%= render "layouts/nav"%>
<%= render "layouts/flash"%>
<%= render "layouts/header"%>
<%= yield %>
<%= render "layouts/footer"%>
<%= render "layouts/admin"%>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" >
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet" >
</body>
</html>
application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
import 'bootstrap'
import './src/application.scss'
import './ready'
import fontawesome from './fontawesome'
fontawesome()
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
ready.js
import greyscale from './greyscale';
import easing from './easing';
console.log("OUTSIDE DOCUMENT READY")
$(document).on('ready turbolinks:load', function () {
console.log("INSIDE DOCUMENT READY")
greyscale();
easing();
// Multi Step Lead Form.
$("#next-1").click(function (e) {
e.preventDefault();
$("#second").show();
$("#first").hide();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
});
$("#next-2").click(function (e) {
e.preventDefault();
$("#third").show();
$("#second").hide();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#next-3").click(function (e) {
e.preventDefault();
$("#fourth").show();
$("#third").hide();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
$("#next-4").click(function (e) {
e.preventDefault();
$("#fifth").show();
$("#fourth").hide();
$("#progressBar").css("width", "100%");
$("#progressText").text("Step - 5");
});
$("#prev-2").click(function (e) {
e.preventDefault();
$("#second").hide();
$("#first").show();
$("#progressBar").css("width", "20%");
$("#progressText").text("Step - 1");
})
$("#prev-3").click(function (e) {
e.preventDefault();
$("#third").hide();
$("#second").show();
$("#progressBar").css("width", "40%");
$("#progressText").text("Step - 2");
})
$("#prev-4").click(function (e) {
e.preventDefault();
$("#fourth").hide();
$("#third").show();
$("#progressBar").css("width", "60%");
$("#progressText").text("Step - 3");
});
$("#prev-5").click(function (e) {
e.preventDefault();
$("#fifth").hide();
$("#fourth").show();
$("#progressBar").css("width", "80%");
$("#progressText").text("Step - 4");
});
// Modal toggle
$('#myModal').modal();
// Show characters left for meta description.
$('#meta-word-text').keyup(function(e){
var numWords = $.trim($("#meta-word-text").val()).split("").length;
$('#meta-word-label').text(`Characters left ${120-numWords}`)
})
// FAQ Collapse
$(".collapsible-item").click(function(e){
$(e.target).siblings().toggle()
$(this).toggleClass("active")
})
});
事情是这样的：
- 每当我单击 link 时，我的注销都会触发“INSIDE DOCUMENT READY”。
- 当 link 在不应该的情况下被点击时，网站闪烁并重新加载。
在网络选项卡中查看时，应用程序包由 Rocket 加载程序（一种用于加速 JS 的 Cloudflare 工具）异步加载。
当点击 link 时，turbolinks 执行了 xhr 调用，它在 rocket loader 启动之前工作了一小段时间。从站点排序的底部删除 rocket loader 脚本修复了它，尽管应用程序包当时没有正确加载。
问题出在 Cloudflare 的 Rocketloader 和 Turbolinks 上。在这个 link (https://docs.deadlinefunnel.com/en/articles/4160226-how-to-disable-cloudflare-rocket-loader) 之后，我在 Cloudflare 仪表板中禁用了火箭装载机，世界上一切都很好。
非常感谢我的朋友 Steffan H，他找到了这个问题的根源。
吸取教训。不要点击你在 Cloudflare 上看到的每个按钮，并承诺在没有彻底测试首先发生的事情的情况下加速你的网站。