从一页导航到另一页后脚本未加载答案

【问题标题】：script not loading after navigate from one page to another page nunjucks从一页导航到另一页后脚本未加载
【发布时间】：2021-12-18 18:19:04
【问题描述】：

我正在使用 nunjucks 和 express 创建网站，它的博客网站之王和来自 prismic 的内容。当用户从博客列表页面导航到任何博客详细信息页面，导航到详细信息页面后，我想为活动 Campane 表单加载一个脚本文件。将从 prismic 获取脚本 URL，我想在 HTML 文件中执行该脚本。

刷新详细信息页面时它可以工作，但从一个页面导航到另一个页面时它不工作。

这是我网站的一些示例代码

    ---
layout: _layout.njk
permalink: "/{{ post.blogType }}/{{ post.uid }}/"
pagination:
    alias: post
    data: posts
    size: 1
    addAllPagesToCollections: true
---

{% set params = item.primary.sumo_form_id.split("=") %}
        <div class="_form_{{params[1]}}">
        </div>
        <script src="{{item.primary.sumo_form_id}}" type="text/javascript" charset="utf-8" defer>
        </script>

【问题讨论】：

输出是什么样子的？

标签： javascript node.js express nunjucks eleventy

【解决方案1】：

花了这么多时间后，我找到了解决方案。这不是正确的解决方案，但它现在正在工作。

您使用 recapcha 的页面。（njk 文件）

<div 
    id="recaptcha"
    data-callback="recaptchaOnload"
    data-sitekey="SITE_KEY"
    data-size="invisible"
    class="g-recaptcha"> 
</div>

index.njk

<head>
<script>
setInterval(()=>{
    recaptchaOnload(); // function calls every 20 Seconds.
}, 20000)

function recaptchaOnload() {
  try {
    if (document.getElementsByClassName("g-recaptcha").length > 0) {
      // Whenever route changes this function is going to check for id="g-recaptcha".
      // if its found recapcha code renders 
      grecaptcha.render("recaptcha", {
        sitekey: "SITE_KEY",
        callback: function () {
          console.log("recaptcha callback");
        },
      });
    }
  } catch (e) {
    return;
  }
}
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=recaptchaOnload&render=explicit' async defer>
</head>

问 - 为什么我必须使用这个功能？

A - nunjucks 是服务器端模板。因此，一旦它们在前端初始化，并且如果我们在父路由之外添加了脚本，那么如果我们在没有重定向的情况下更改为新页面（页面刷新），它将不会被初始化。所以在这种情况下，这将很有用

【讨论】：