从一页导航到另一页后脚本未加载
Posted
技术标签:
【中文标题】从一页导航到另一页后脚本未加载【英文标题】：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>
【问题讨论】：
输出是什么样子的？ 【参考方案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 是服务器端模板。因此，一旦它们在前端初始化，并且如果我们在父路由之外添加了脚本，那么如果我们在没有重定向的情况下更改为新页面（页面刷新），它将不会被初始化。所以在这种情况下，这将很有用
【讨论】：
以上是关于从一页导航到另一页后脚本未加载的主要内容，如果未能解决你的问题，请参考以下文章