如何在按钮点击后重新执行 JavaScript 脚本-js教程-PHP中文网

如何在按钮点击后重新执行 JavaScript 脚本

碧海醫心

发布： 2025-10-02 20:10:01

原创

747人浏览过

如何在按钮点击后重新执行 javascript 脚本

引言

本文将介绍如何在网页中实现点击按钮后重新执行 JavaScript 脚本的功能，特别是针对需要根据页面语言动态调整行为的脚本。我们将通过监听按钮点击事件，修改 HTML 语言属性，并重新加载或执行脚本的方式，确保脚本能够根据最新的语言设置正确运行，从而提供更好的用户体验。

解决方案

当需要根据用户交互（例如点击按钮）来改变页面语言，并重新执行依赖于该语言设置的 JavaScript 脚本时，可以采用以下步骤：

监听按钮点击事件： 首先，需要获取到按钮元素，并为其添加一个点击事件监听器。

const changeLangElement = document.querySelector('#changeLangElement');

changeLangElement.addEventListener('click', () => {
  // 在这里编写点击事件处理逻辑
});

登录后复制

修改 HTML 语言属性： 在点击事件处理函数中，首先需要更新 <html> 标签的 lang 属性，以反映当前的语言设置。

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

changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === "fr" ? "en" : "fr"; // 切换语言
  document.documentElement.lang = currentLang; // 更新 lang 属性
  translatePage(currentLang); // (如果存在)翻译页面内容
  // 重新执行脚本的逻辑将在下一步添加
});

登录后复制

重新执行脚本： 重新执行脚本的方法有多种，具体取决于脚本的加载方式和内容。

Booltool

常用AI图片图像处理工具箱

140

查看详情

如果脚本是一个函数： 如果脚本主要包含一个或多个函数，可以直接在点击事件处理函数中调用这些函数。

changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === "fr" ? "en" : "fr";
  document.documentElement.lang = currentLang;
  translatePage(currentLang);
  // 假设 scriptCookie.js 中定义了一个名为 initializeScript 的函数
  initializeScript();
});

登录后复制

如果脚本需要重新加载： 如果脚本在加载时执行了一些初始化操作，并且这些操作需要根据新的语言设置重新执行，则需要重新加载脚本。一种方法是移除现有的 <script> 标签，然后创建一个新的 <script> 标签并将其添加到页面中。

changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === "fr" ? "en" : "fr";
  document.documentElement.lang = currentLang;
  translatePage(currentLang);

  const script = document.getElementById('consentementCookiesScript');
  const scriptSrc = script.src;
  script.remove(); // 移除旧的 script 标签

  const newScript = document.createElement('script');
  newScript.id = 'consentementCookiesScript';
  newScript.src = scriptSrc;
  document.head.appendChild(newScript); // 添加新的 script 标签
});

登录后复制

注意： 这种方法可能会导致页面闪烁，因为脚本会被重新下载和执行。为了避免闪烁，可以考虑使用第一种方法（如果适用）。

示例代码

下面是一个完整的示例代码，演示了如何在点击按钮后重新加载 JavaScript 脚本：

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>动态语言切换</title>
  <script id="consentementCookiesScript" src="https://static.desjardins.com/fw/cookie/scriptCookie.js"></script>
</head>
<body>

  <div id="toolbar" class="toolbar">
    <div id="changeLangElement" style="color: white">Français</div>
  </div>

  <script>
    const changeLangElement = document.querySelector('#changeLangElement');
    let currentLang = 'fr';

    changeLangElement.addEventListener('click', () => {
      currentLang = currentLang === "fr" ? "en" : "fr";
      document.documentElement.lang = currentLang;
      // translatePage(currentLang); // 翻译页面内容 (如果存在)

      const script = document.getElementById('consentementCookiesScript');
      const scriptSrc = script.src;
      script.remove();

      const newScript = document.createElement('script');
      newScript.id = 'consentementCookiesScript';
      newScript.src = scriptSrc;
      document.head.appendChild(newScript);
    });

    // 模拟 translatePage 函数
    function translatePage(lang) {
      console.log(`页面已翻译为 ${lang}`);
    }
  </script>

</body>
</html>

登录后复制

注意事项

避免重复加载： 确保只在必要时重新加载脚本。频繁的重新加载会影响性能和用户体验。
处理异步操作： 如果脚本包含异步操作（例如 AJAX 请求），请确保在重新加载脚本后正确处理这些操作。
脚本依赖： 如果脚本依赖于其他脚本或资源，请确保在重新加载脚本后这些依赖项仍然可用。
缓存： 浏览器可能会缓存脚本。为了确保每次都加载最新的脚本，可以添加一个时间戳作为查询参数到脚本的 URL 中。例如： newScript.src = scriptSrc + '?t=' + Date.now();