Rails 内联 javascript 和 turbolinks答案

【问题标题】：Rails inline javascript and turbolinksRails 内联 javascript 和 turbolinks
【发布时间】：2019-05-23 02:57:04
【问题描述】：

我需要在我的应用程序中嵌入一个使用以下代码的外部表单：

<script type="text/javascript" src="https://company.formsite.com/forms/js.php/form_name"></script>

代码放置在视图中，仅在页面刷新后加载，而不是在首次访问时加载。我确定这与 Turbolinks 有关，但如何通过外部资源解决此问题？

我已经调查过：

<script type="text/javascript" data-turbolinks-track="true" src="https://company.formsite.com/forms/js.php/form_name"></script>
<script type="text/javascript" data-turbolinks="false" src="https://company.formsite.com/forms/js.php/form_name"></script>

但是没有运气。

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-5

【解决方案1】：

来自docs....

您的浏览器会自动加载和评估任何元素出现在初始页面加载时。

当您导航到新页面时，Turbolinks 会查找任何新页面中不存在于当前页面中的元素页。然后它将它们附加到加载它们的当前位置并由浏览器评估。您可以使用它来加载其他按需提供 JavaScript 文件。 Turbolinks 每次都会评估页面中的元素呈现页面。您可以使用内联正文脚本来设置每页 JavaScript 状态或引导客户端模型。要安装行为，或者当页面发生变化时执行更复杂的操作，避免脚本元素并改用 turbolinks:load 事件。

实际上，您可以只将脚本放在正文标记中。

如果它是更复杂的东西，或者可能是外部形式，你的意思是 iframe 之类的东西，我过去曾为 trustpilot 做过以下工作。诚然，这不是一种形式，但它可能会帮助你。

在head标签中，我放了

<head>
  <!-- TrustBox script -->
  <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
  <!-- End Trustbox script -->
</head>

然后在body里面，我有一个div

  <div  id='trustpilot' class="trustpilot-widget" data-locale="en-UK" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="58dd0d0a0000ff00059f84bc" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5">
    <a href="https://uk.trustpilot.com/review/company" target="_blank">Trustpilot</a>
  </div>

最后，我使用 Turbolinks 事件侦听器来激活 iframe。

document.addEventListener("turbolinks:load", function () {
    // find trustpilot header
    var trustpilotHeader = document.getElementById('trustpilot-header');
    if (trustpilotHeader) {
        window.Trustpilot.loadFromElement(trustpilotHeader);
    } else {
       // handle element not found
        return;
    }

    var trustpilot = document.getElementById('trustpilot');
    if (trustpilot) {
        window.Trustpilot.loadFromElement(trustpilot);
    } else {
                  // handle element not found
        return;
    }
});

【讨论】：

【解决方案2】：

我最终在我的标题中添加了以下条件。不确定是否有更好的方法，但它为我解决了我的问题。

<head>
  <% if current_page?(controller: 'controller_name', action: 'page_name') %>
    <meta name="turbolinks-visit-control" content="reload">
  <% end %>
</head>

【讨论】：

【解决方案3】：

我通过为使用内联脚本的页面禁用 Turbolink 解决了一个类似的问题。来自doc：

可以通过注释链接或在每个链接的基础上禁用 Turbolinks 其任何具有 data-turbolinks="false" 的祖先。
<a href="/" data-turbolinks="false">Disabled</a>

<div data-turbolinks="false">
  <a href="/">Disabled</a>
</div>
禁用 Turbolinks 的链接将由浏览器。

【讨论】：