Blazor JS互操作问题：在导入的JS文件中使用<script>标签失效

你遇到的问题核心是ES模块文件里的<script>标签不会被浏览器解析，直接写在JS模块里的引用自然无法生效。下面是几种可行的解决方法：

方法一：提前全局加载第三方库 #

在Blazor的入口文件中预先加载第三方JS库，让它成为全局可用的资源：

• 若你使用Blazor WebAssembly，修改wwwroot/index.html，把第三方库的<script>标签放在<script src="_framework/blazor.webassembly.js"></script>前后均可：

  <script src="thirdParty.js"></script>
  <script src="_framework/blazor.webassembly.js"></script>
  

• 若你使用Blazor Server，修改Pages/_Host.cshtml，同样添加第三方库的<script>标签即可。

完成后，你动态导入的JS模块就能直接调用第三方库的全局变量或函数，无需额外处理。

方法二：在JS模块中动态加载第三方库 #

如果必须在动态导入的JS里按需加载第三方库，可以通过代码动态创建<script>标签，确保库加载完成后再执行业务逻辑：

export async function MainFunction() {
  // 先确保第三方库已加载完成
  await ensureThirdPartyLoaded();
  // 这里调用第三方库的逻辑
  window.thirdParty.someFunction();
}

async function ensureThirdPartyLoaded() {
  // 检查是否已加载，避免重复请求
  if (window.thirdParty) return;

  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = 'thirdParty.js';
    script.async = true;
    script.onload = () => resolve();
    script.onerror = (err) => reject(err);
    document.head.appendChild(script);
  });
}

方法三：使用ES模块导入（限第三方库支持的情况） #

如果第三方JS库本身支持ES模块（比如明确导出了函数/对象），可以直接在你的JS模块里用import语句引用：

// 假设thirdParty.js是ES模块，导出了目标功能
import { someFunction } from './thirdParty.js';

export async function MainFunction() {
  someFunction();
}

注意这种方式要求第三方库必须是标准的ES模块，否则会出现加载错误。

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