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

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

霞舞

发布： 2025-10-02 19:52:01

原创

507人浏览过

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

本文将探讨如何在用户点击按钮后重新执行JavaScript脚本，特别是在需要根据用户交互动态更新页面行为或内容时。一个常见的场景是动态改变页面的语言，本文将以切换语言为例，提供详细的步骤和代码示例。

首先，我们需要理解为什么需要重新执行脚本。通常，外部脚本在页面加载时执行一次，如果脚本依赖于页面初始状态，而后续用户交互改变了这些状态，就需要重新执行脚本以适应新的环境。

实现步骤：

监听按钮点击事件: 使用JavaScript的addEventListener方法监听按钮的点击事件。当按钮被点击时，触发相应的事件处理函数。
```
const changeLangElement = document.querySelector('#changeLangElement');

changeLangElement.addEventListener('click', () => {
  // 在这里执行后续操作
});
```
登录后复制

更新<html>标签的lang属性: 在事件处理函数中，根据用户的选择更新<html>标签的lang属性。这有助于浏览器和搜索引擎正确识别页面的语言。

let currentLang = 'fr'; // 初始语言
changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === 'fr' ? 'en' : 'fr';
  document.documentElement.lang = currentLang;
  // 在这里执行后续操作
});

登录后复制

重新加载脚本: 关键步骤是重新加载脚本。由于浏览器通常会缓存脚本，直接修改src属性可能不会立即生效。一个常用的方法是动态创建一个新的<script>标签，并将其添加到页面中，从而强制浏览器重新加载脚本。

易森网络企业版
如果您是新用户，请直接将本程序的所有文件上传在任一文件夹下，Rewrite 目录下放置了伪静态规则和筛选器，可将规则添加进IIS，即可正常使用，不用进行任何设置；(可修改图片等)默认的管理员用户名、密码和验证码都是：yeesen系统默认关闭，请上传后登陆后台点击“核心管理”里操作如下:进入“配置管理”中的&ld

0

查看详情
```
changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === 'fr' ? 'en' : 'fr';
  document.documentElement.lang = currentLang;

  // 移除旧的脚本
  const oldScript = document.getElementById('consentementCookiesScript');
  if (oldScript) {
    oldScript.remove();
  }

  // 创建新的脚本
  const newScript = document.createElement('script');
  newScript.id = 'consentementCookiesScript';
  newScript.src = 'https://static.desjardins.com/fw/cookie/scriptCookie.js';
  document.head.appendChild(newScript);
});
```
登录后复制

处理翻译 (可选): 如果页面包含需要翻译的文本，可以使用translatePage函数或其他翻译方法来更新页面内容。

function translatePage(lang) {
  // 实现翻译逻辑，例如根据lang参数更新页面文本
  console.log(`Translating page to ${lang}`);
}

changeLangElement.addEventListener('click', () => {
  currentLang = currentLang === 'fr' ? 'en' : 'fr';
  document.documentElement.lang = currentLang;
  translatePage(currentLang); // 调用翻译函数

  // 移除旧的脚本
  const oldScript = document.getElementById('consentementCookiesScript');
  if (oldScript) {
    oldScript.remove();
  }

  // 创建新的脚本
  const newScript = document.createElement('script');
  newScript.id = 'consentementCookiesScript';
  newScript.src = 'https://static.desjardins.com/fw/cookie/scriptCookie.js';
  document.head.appendChild(newScript);
});

登录后复制

完整示例代码：

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Dynamic Script Reload</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';

    function translatePage(lang) {
      // 实现翻译逻辑，例如根据lang参数更新页面文本
      console.log(`Translating page to ${lang}`);
    }

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

      // 移除旧的脚本
      const oldScript = document.getElementById('consentementCookiesScript');
      if (oldScript) {
        oldScript.remove();
      }

      // 创建新的脚本
      const newScript = document.createElement('script');
      newScript.id = 'consentementCookiesScript';
      newScript.src = 'https://static.desjardins.com/fw/cookie/scriptCookie.js';
      document.head.appendChild(newScript);
    });
  </script>
</body>
</html>

登录后复制

注意事项：