动态修改语言后重新执行 JavaScript 脚本-js教程-PHP中文网

动态修改语言后重新执行 JavaScript 脚本

DDD

发布： 2025-10-02 20:31:00

原创

181人浏览过

动态修改语言后重新执行 javascript 脚本

动态修改网页语言后，如果页面上的某些 JavaScript 脚本依赖于当前的语言设置，那么仅仅修改 document.documentElement.lang 属性是不够的。你需要重新执行这些脚本，以使其适应新的语言环境。一种常见的场景是，脚本根据 lang 属性的值来加载不同的资源或显示不同的文本。

以下是一种实现方法，它通过移除并重新添加 <script> 标签来强制脚本重新执行：

核心思路：

获取 <script> 标签。
移除该标签。
创建一个新的 <script> 标签，并设置相同的属性（src、id 等）。
将新的 <script> 标签添加到 <head> 中。

示例代码：

立即学习“Java免费学习笔记（深入）”；

图改改

在线修改图片文字

455

查看详情

function reloadScript(scriptId) {
  const script = document.getElementById(scriptId);
  if (!script) {
    console.error(`Script with id "${scriptId}" not found.`);
    return;
  }

  const newScript = document.createElement('script');
  newScript.src = script.src;
  newScript.id = script.id;

  // Copy other attributes if needed
  for (let i = 0; i < script.attributes.length; i++) {
    const attr = script.attributes[i];
    if (attr.name !== 'src' && attr.name !== 'id') {
      newScript.setAttribute(attr.name, attr.value);
    }
  }

  // Remove the old script
  script.parentNode.removeChild(script);

  // Append the new script to the head
  document.head.appendChild(newScript);
}

// 示例：在点击按钮后重新加载脚本
const changeLangElement = document.getElementById('changeLangElement');

changeLangElement.onclick = function() {
  let currentLang = document.documentElement.lang;
  currentLang = currentLang === "fr" ? "en" : "fr";
  //translatePage(currentLang); // 假设translatePage函数负责翻译页面上的其他内容
  document.documentElement.lang = currentLang;

  // 重新加载脚本
  reloadScript('consentementCookiesScript');
};

登录后复制

代码解释：

reloadScript(scriptId) 函数接收要重新加载的脚本的 ID 作为参数。
它首先获取具有指定 ID 的 <script> 元素。
然后，创建一个新的 <script> 元素，并设置其 src 和 id 属性与原始脚本相同。
循环遍历原始脚本的所有属性，并将它们复制到新脚本中，除了 src 和 id 属性之外。
移除原始脚本。
最后，将新脚本添加到 <head> 元素中。
在 changeLangElement.onclick 事件处理程序中，在修改 lang 属性之后，调用 reloadScript() 函数来重新加载指定的脚本。

注意事项：

确保你的脚本 ID 是唯一的，并且在页面上存在。
如果你的脚本依赖于其他脚本，你可能需要按照正确的顺序重新加载它们。
这种方法会强制脚本重新执行，可能会导致一些性能开销。如果脚本的初始化过程比较耗时，可以考虑使用其他更优化的方法，例如在脚本内部监听 lang 属性的变化，并根据新的语言设置更新脚本的行为。
translatePage(currentLang) 函数需要根据你的具体需求实现，它应该负责翻译页面上的其他内容，例如文本和标签属性。

总结：

通过移除并重新添加 <script> 标签，我们可以有效地强制 JavaScript 脚本在新的语言环境下重新执行。这种方法简单易懂，适用于大多数需要根据语言设置动态更新脚本的场景。但是，需要注意性能开销，并根据具体情况选择更优化的解决方案。

以上就是动态修改语言后重新执行 JavaScript 脚本的详细内容，更多请关注php中文网其它相关文章！