如何在Blazor的Razor页面中添加外部JS脚本（集成Stripe支付）

方法一：全局添加（适合全应用使用Stripe的场景） #

根据你的Blazor应用类型，在根页面中直接插入Stripe脚本标签：

• Blazor WebAssembly：打开wwwroot/index.html，在</body>标签前添加：

  <script src="https://js.stripe.com/v3/"></script>
  

• Blazor Server：打开Pages/_Host.cshtml，同样在</body>标签前插入上述脚本。

这种方式会在应用启动时加载脚本，全局可直接调用Stripe API，无需额外处理加载时机。

方法二：组件级按需加载（仅在需要的组件中加载） #

如果你想避免全局加载脚本，可通过JS互操作动态创建并加载脚本，步骤如下：

1. 在你的隔离JS模块（比如wwwroot/js/stripe-helpers.js）中添加加载函数：

   export function loadStripeScript() {
     // 检查脚本是否已加载，避免重复插入
     if (document.querySelector('script[src="https://js.stripe.com/v3/"]')) {
       return Promise.resolve();
     }
   
     return new Promise((resolve, reject) => {
       const script = document.createElement('script');
       script.src = 'https://js.stripe.com/v3/';
       script.async = true;
       script.onload = () => resolve();
       script.onerror = () => reject(new Error('Stripe脚本加载失败'));
       document.body.appendChild(script);
     });
   }
   
   // 可额外添加初始化Stripe的函数
   export function initStripe(publishableKey) {
     return Stripe(publishableKey);
   }
   

2. 在Blazor组件中调用上述模块：

   @inject IJSRuntime JS
   @implements IAsyncDisposable
   
   @code {
     private IJSObjectReference _stripeModule;
   
     protected override async Task OnInitializedAsync() {
       // 导入JS模块
       _stripeModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/stripe-helpers.js");
       // 等待Stripe脚本加载完成
       await _stripeModule.InvokeVoidAsync("loadStripeScript");
       // 初始化Stripe实例
       var stripeInstance = await _stripeModule.InvokeAsync<object>("initStripe", "你的Stripe公钥");
       // 后续可使用stripeInstance调用支付相关API
     }
   
     public async ValueTask DisposeAsync() {
       // 释放JS模块引用
       if (_stripeModule != null) {
         await _stripeModule.DisposeAsync();
       }
     }
   }
   

注意事项 #

• 动态加载脚本时，必须通过Promise等待脚本加载完成后再调用Stripe API，否则会出现Stripe is not defined的错误。
• Blazor Server中需注意组件生命周期，确保脚本在客户端渲染完成后再执行相关操作。
• 不建议直接在Razor组件中静态插入<script>标签，因为Blazor的DOM更新机制可能导致脚本无法正常执行。

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