如何在本地HTML中调用外部JS文件中带特定参数的指定函数？

下面两种方案都能满足你的需求，可根据偏好选择：

方案一：自定义属性自动执行（最接近你的伪代码） #

这种方式和你想要的写法几乎一致，只需给共用脚本添加符合HTML规范的自定义属性，再在共用脚本里加一段自动处理逻辑：

1. 修改~/static/helper-funcs.js，在脚本末尾添加以下代码：

// 自动执行指定的函数调用
document.addEventListener('DOMContentLoaded', () => {
  // 找到所有带data-funcs属性的script标签
  const targetScripts = document.querySelectorAll('script[data-funcs]');
  targetScripts.forEach(script => {
    const funcCalls = script.getAttribute('data-funcs');
    if (funcCalls) {
      try {
        // 执行指定的函数代码
        eval(funcCalls);
      } catch (err) {
        console.error('函数执行失败:', err);
      }
    }
  });
});

2. 在你的HTML文档中这样引用脚本：

<script src="~/static/helper-funcs.js" data-funcs="foo('string1', 'string2'); bar()"></script>
<p>Here the document itself begins...</p>

这里用data-funcs而非你伪代码里的funcs，是因为HTML要求自定义属性必须以data-开头，避免和原生属性冲突。

注意：因为用了eval，公开环境使用需谨慎，但本地文档自用完全没问题；如果你的函数依赖页面DOM元素，DOMContentLoaded事件能确保DOM加载完成后再执行函数。

方案二：单独添加调用脚本（更简洁安全） #

这种方式不需要修改共用脚本，直接在加载完共用脚本后，单独写一段脚本调用需要的函数：

<script src="~/static/helper-funcs.js"></script>
<script>
  // 按需调用带参数的函数
  foo('string1', 'string2');
  bar();
</script>
<p>Here the document itself begins...</p>

这个方案没有使用eval，安全性更高，写法直观，本地使用非常方便。

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