turbolinks:load 事件在本地机器上工作而不是在 Heroku 上
Posted
技术标签:
【中文标题】turbolinks:load 事件在本地机器上工作而不是在 Heroku 上【英文标题】：turbolinks:load event works on local machine not on Heroku 【发布时间】：2020-11-19 16:13:34 【问题描述】：我正在使用带有 Rails 6 的 Webpacker。turbolinks:load 事件在本地正常工作，但在部署到 Heroku 时不能正常工作。我通过将“ready.js”文件导入我的应用程序文件夹来使用标准 jquery $(document)on.('turbolinks:load' ()=>)。在事件处理程序中添加控制台日志适用于我的计算机，但不适用于已部署的应用程序。
我将代码粘贴到我的 application.js 文件中，该文件位于 packs 文件夹中。 application.html.erb 形成 layouts 文件夹和 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")
)
);
【问题讨论】：
【参考方案1】：这就是发生的事情：
每当我点击链接时，我的注销提示“INSIDE DOCUMENT READY”就会触发。 当不应该点击链接时，网站闪烁并重新加载。在网络选项卡中查看应用程序包时，Rocket loader（加速 JS 的 Cloudflare 工具）异步加载了应用程序包。
当点击一个链接时，turbolinks 调用了 xhr，它在 Rocket loader 启动之前工作了一小会儿。从网站底部删除 Rocket loader 脚本可以修复它，尽管应用程序包当时没有正确加载。
问题出在 Cloudflare 的 Rocketloader 和 Turbolinks 上。我通过此链接 (https://docs.deadlinefunnel.com/en/articles/4160226-how-to-disable-cloudflare-rocket-loader) 在 Cloudflare 仪表板中禁用了火箭装载机，一切顺利。
向我的朋友 Steffan H 大声疾呼，他找到了这个问题的根源。
经验教训。不要在没有彻底测试首先发生的情况的情况下点击您在 Cloudflare 上看到的每个按钮，并承诺加快您的网站速度。
【讨论】：
是的，我确实做了同样的事情。也吸取了教训！谢谢你救了我一个下午。 :)以上是关于turbolinks:load 事件在本地机器上工作而不是在 Heroku 上的主要内容，如果未能解决你的问题，请参考以下文章