Nunjucks+Express搭建站点页面跳转后Prismic获取的script无法加载

问题根因 #

你遇到的是无刷新客户端导航的典型问题：站点大概率启用了PJAX、Turbo或自定义的无刷页面切换逻辑，跳转页面时只会替换主体区域的DOM，浏览器不会自动执行新插入DOM中的外部<script>标签。只有整页刷新时浏览器会全量解析执行页面所有脚本，因此出现刷新生效、跳转失效的情况。

解决方案 #

通用方案（兼容所有导航逻辑） #

把静态脚本标签改为动态加载，每次页面切换完成后主动触发脚本执行：

1. 调整详情页Nunjucks模板，用自定义属性存储脚本地址，不直接写静态script标签：

---
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]}}" data-ac-script="{{item.primary.sumo_form_id}}">
</div>

2. 在全局通用JS文件中添加加载逻辑，同时监听整页加载和无刷新导航完成事件：

function loadACForm() {
  const formWrap = document.querySelector('[data-ac-script]');
  // 页面没有表单或脚本已加载就跳过
  if (!formWrap || formWrap.dataset.loaded) return;

  const script = document.createElement('script');
  script.src = formWrap.dataset.acScript;
  script.charset = 'utf-8';
  script.onload = () => {
    formWrap.dataset.loaded = 'true';
  };
  document.body.appendChild(script);
}

// 整页刷新时执行
document.addEventListener('DOMContentLoaded', loadACForm);
// 无刷新导航完成时执行，根据你用的工具选对应的事件即可
// document.addEventListener('turbo:load', loadACForm); // 用Turbo的情况
// document.addEventListener('pjax:complete', loadACForm); // 用PJAX的情况
// 自定义切换逻辑直接在内容替换完成后调用loadACForm()即可

简易方案（适配特定框架） #

如果你用的是Turbo类框架，不需要改JS，直接给script标签加框架识别的执行标记即可：

<script src="{{item.primary.sumo_form_id}}" type="text/javascript" charset="utf-8" defer data-turbo="eval"></script>

内容的提问来源于stack exchange，提问作者Trushar Narodia