由于Turbolinks导致屏幕返回时，rails js脚本代码无法运行

vc9ivgsu 于 2022-09-21 发布在 jQuery

关注(0)|答案(1)|浏览(126)

在我的Rails应用程序中，部分视图中有一个JS脚本

const f2s = window.document.createElement("script");
   f2s.defer = true;
   (f2s.src = "https://face2.oktium.com/face2widget.js"),
   (f2s.onload = function () {
   new window.Oktium(face2params).init();
   new window.Oktium(face2paramsMobile).init();
 }),
 document.head.appendChild(f2s);

当第一次加载页面时，它工作得很好，但当从后面或具有相同代码的另一个页面再次加载时，它就不工作了。我怎么才能用涡轮连杆实现这一点呢？

jquery

来源：https://stackoverflow.com/questions/73168578/rails-js-script-code-not-working-while-screen-back-due-to-turbolinks

1条答案

按热度按时间

y3bcpkx11#

来自Turbolinks Docs

使用脚本元素

您的浏览器会自动加载并计算初始页面加载中出现的任何<script>元素。

当您导航到新页面时，Turbolinks会在新页面的<head>中查找当前页面中不存在的任何<script>元素。然后，它将它们附加到当前的<head>，在那里它们被浏览器加载和计算。您可以使用它来按需加载其他JavaScript文件。

Turbolinks在每次呈现页面时都会计算页面的<body>中的<script>元素。您可以使用内联正文脚本来设置每页的JavaScript状态或引导客户端模型。若要安装行为或在页面更改时执行更复杂的操作，请避免使用脚本元素，而使用turbolinks:load事件。

如果不希望Turbolinks在渲染后对<script>元素求值，请使用data-turbolinks-eval="false"对其进行注解。请注意，此注解不会阻止您的浏览器在初始页面加载时计算脚本。

加载您的应用程序的JavaScript包

始终确保使用文档的<head>中的<script>元素加载应用程序的JavaScript包。否则，Turbolinks将在每次页面更改时重新加载捆绑包。

<head>
  ...
  <script src="/application-cbd3cd4.js" defer></script>
</head>

如果出于性能原因，传统上将应用程序脚本放在<body>的末尾，请考虑改用<script defer>属性。它具有广泛的浏览器支持，并允许您将您的脚本保存在<head>中，以便与Turbolinks兼容。

您还应该考虑将资产打包系统配置为对每个脚本进行指纹识别，以便在其内容发生变化时拥有一个新的URL。然后，您可以使用data-turbolinks-track属性在部署新的Java捆绑包时强制重新加载整个页面。

您可以将JS脚本 Package 在head中的script标记内的这样的处理程序中

<script defer>
  document.addEventListener('turbolinks:load', () => {
    // your code here
  })
</script>

在Rails中也有如何动态添加一些标签的机制，您可以在layout/application中添加<head>

<%= yield(:face2) %>

然后在您的特定视图中

<% content_for(:face2) do %>
  <script defer src="https://face2.oktium.com/face2widget.js" data-turbolinks-eval="false"></script>

  <script>
    document.addEventListener('turbolinks:load', () => {
      new window.Oktium(face2params).init()
      new window.Oktium(face2paramsMobile).init()
    })
  </script>
<% end %>

赞(0）回复(0）举报 2022-09-21

我来回答

由于Turbolinks导致屏幕返回时，rails js脚本代码无法运行

1条答案

使用脚本元素

加载您的应用程序的JavaScript包

相关问题

热门标签

最新问答