PHP与Mustache模板中JavaScript执行及重复执行规避方案咨询

针对你遇到的模板内脚本无法重复执行、eval违反CSP的问题，以下是几个实用的解决方案：

方案一：数据与逻辑分离，通过触发器执行 #

核心思路是把模板里的业务逻辑抽离到全局可信脚本中，模板仅传递渲染后的变量数据，再通过触发器触发逻辑执行，既符合CSP要求，又能灵活控制执行次数。

步骤： #

1. 修改Mustache模板：将原内联脚本替换为JSON数据块和触发器标记，避免直接在模板里写可执行脚本：

<div>My html {{myvariable}}</div>
<!-- 存储渲染后的变量数据 -->
<script type="application/json" id="script-data-{{uniqueID}}">
  {"myvariable": "{{myvariable}}"}
</script>
<!-- 触发器，标记需要执行的脚本逻辑ID -->
<div class="script-trigger" data-script-id="{{uniqueID}}" data-executed="false"></div>

2. 全局通用脚本：在页面<head>或全局JS文件中定义逻辑函数和触发器处理逻辑：

// 全局存储已执行的脚本ID（可选，若不需要重复执行则保留）
window.executedScriptIds = new Set();

// 对应模板逻辑的函数
function handleUniqueIDScript(data) {
  console.log(data.myvariable);
  // 这里写原脚本中的业务逻辑
}

// 处理新加载模板的触发器函数，每次API返回模板后调用该函数
function processNewTemplateScripts() {
  document.querySelectorAll('.script-trigger[data-executed="false"]').forEach(trigger => {
    const scriptId = trigger.dataset.scriptId;
    const dataElement = document.getElementById(`script-data-${scriptId}`);
    
    if (dataElement) {
      // 解析模板传递的变量数据
      const scriptData = JSON.parse(dataElement.textContent);
      // 根据ID调用对应逻辑函数
      switch(scriptId) {
        case 'uniqueID':
          handleUniqueIDScript(scriptData);
          break;
        // 可扩展其他脚本ID的逻辑
      }
      
      // 标记已执行，避免重复触发（若需要重复执行，可移除该行）
      trigger.setAttribute('data-executed', 'true');
      window.executedScriptIds.add(scriptId);
    }
  });
}

3. 模板加载后触发：当API返回渲染后的HTML并插入页面后，调用processNewTemplateScripts()即可执行对应逻辑。如果需要重复执行同一模板的逻辑，只需移除触发器的data-executed标记，或在加载新模板时生成新的触发器元素。

方案二：动态创建脚本标签执行内联代码 #

如果必须保留模板内的脚本结构，可通过解析HTML、动态创建脚本标签的方式执行代码，绕过直接插入HTML不执行脚本的问题，同时避免eval。

步骤： #

// 假设apiHtml是API返回的渲染后HTML字符串
const parser = new DOMParser();
const tempDoc = parser.parseFromString(apiHtml, 'text/html');

// 遍历所有脚本标签
tempDoc.querySelectorAll('script').forEach(scriptEl => {
  // 可选：若不需要重复执行，检查ID是否已执行
  if (scriptEl.id && window.executedScriptIds.has(scriptEl.id)) return;
  
  // 动态创建新的脚本标签
  const newScript = document.createElement('script');
  newScript.textContent = scriptEl.textContent;
  // 插入页面执行
  document.body.appendChild(newScript);
  // 执行后移除，避免冗余
  document.body.removeChild(newScript);
  
  if (scriptEl.id) window.executedScriptIds.add(scriptEl.id);
});

// 移除临时文档中的脚本标签，将剩余HTML插入目标容器
tempDoc.querySelectorAll('script').forEach(el => el.remove());
document.getElementById('target-container').appendChild(tempDoc.body.firstChild);

该方案的优势是无需大幅修改模板，但需确保CSP允许内联脚本（若CSP严格禁止unsafe-inline，方案一更合适）。

方案三：模板直接调用全局函数传递变量 #

将模板内的脚本简化为全局函数调用，变量作为参数传递，逻辑完全放在全局可信脚本中。

步骤： #

1. 修改Mustache模板：

<div>My html {{myvariable}}</div>
<script>
  // 调用全局函数，传递渲染后的变量
  window.runUniqueIDLogic('{{myvariable}}');
</script>

2. 定义全局函数：

window.runUniqueIDLogic = function(myvariable) {
  console.log(myvariable);
  // 业务逻辑
};

3. 模板加载后执行脚本：同方案二，需解析HTML并动态执行脚本标签内容，或通过触发器触发函数调用。

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