feat(IFrame): add OnReadyAsync callback (#5350)

* chore: bump version 9.3.1-beta11 * refactor: 更改回调函数名称 * feat: 增加 TriggerLoaded 回调方法 * feat: 更新加载逻辑
dotnetcore · Feb 12, 2025 · 9ee6ea5 · 9ee6ea5
1 parent b2c410a
commit 9ee6ea5
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 20 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.3.1-beta10</Version>
+    <Version>9.3.1-beta11</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/IFrame/IFrame.razor.cs b/src/BootstrapBlazor/Components/IFrame/IFrame.razor.cs
@@ -28,6 +28,12 @@ public partial class IFrame
     [Parameter]
     public Func<object?, Task>? OnPostDataAsync { get; set; }
 
+    /// <summary>
+    /// 获得/设置 页面加载完毕后回调方法
+    /// </summary>
+    [Parameter]
+    public Func<Task>? OnReadyAsync { get; set; }
+
     private string? ClassString => CssBuilder.Default("bb-frame")
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
@@ -53,7 +59,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(CallbackAsync));
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerPostData));
 
     /// <summary>
     /// 推送数据方法
@@ -68,11 +74,24 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <param name="data"></param>
     /// <returns></returns>
     [JSInvokable]
-    public async Task CallbackAsync(object? data)
+    public async Task TriggerPostData(object? data)
     {
         if (OnPostDataAsync != null)
         {
             await OnPostDataAsync(data);
         }
     }
+
+    /// <summary>
+    /// 由 JavaScript 调用
+    /// </summary>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task TriggerLoaded()
+    {
+        if (OnReadyAsync != null)
+        {
+            await OnReadyAsync();
+        }
+    }
 }
diff --git a/src/BootstrapBlazor/Components/IFrame/IFrame.razor.js b/src/BootstrapBlazor/Components/IFrame/IFrame.razor.js
@@ -6,24 +6,19 @@ export function init(id, invoke, callback) {
     }
     Data.set(id, handler)
 
-    window.addEventListener('message', handler)
-}
+    window.addEventListener('message', handler);
+    const frame = document.getElementById(id);
 
-export function execute(id, data) {
-    const frame = document.getElementById(id)
-    if (frame) {
-        if (frame.loaded) {
-            frame.contentWindow.postMessage(data)
-        }
-        else {
-            frame.onload = () => {
-                frame.loaded = true
-                frame.contentWindow.postMessage(data)
-            }
-        }
+    frame.onload = () => {
+        invoke.invokeMethodAsync("TriggerLoaded");
     }
 }
 
+export async function execute(id, data) {
+    const frame = document.getElementById(id);
+    frame.contentWindow.postMessage(data);
+}
+
 export function dispose(id) {
     const handler = Data.get(id)
     Data.remove(id)

diff --git a/test/UnitTest/Components/IFrameTest.cs b/test/UnitTest/Components/IFrameTest.cs
@@ -8,7 +8,7 @@ namespace UnitTest.Components;
 public class IFrameTest : BootstrapBlazorTestBase
 {
     [Fact]
-    public void Frame_Ok()
+    public async Task Frame_Ok()
     {
         var postData = false;
         var cut = Context.RenderComponent<IFrame>(pb =>
@@ -27,10 +27,26 @@ public void Frame_Ok()
             pb.Add(a => a.Data, new { Rows = new List<string>() { "1", "2" } });
         });
 
-        cut.InvokeAsync(async () =>
+        await cut.InvokeAsync(async () =>
         {
-            await cut.Instance.CallbackAsync(new List<string> { "2", "3" });
+            await cut.Instance.TriggerPostData(new List<string> { "2", "3" });
             Assert.True(postData);
         });
+
+        var loaded = false;
+        cut.SetParametersAndRender(pb =>
+        {
+            pb.Add(a => a.OnReadyAsync, () =>
+            {
+                loaded = true;
+                return Task.CompletedTask;
+            });
+        });
+
+        await cut.InvokeAsync(async () =>
+        {
+            await cut.Instance.TriggerLoaded();
+        });
+        Assert.True(loaded);
     }
 }