perf(IFrame): improve performance and reduce rendering time (#5522)

* feat: 优化性能减少因此数据推送

* refactor: 更改文档注释为英语

* refactor: 更新渲染逻辑

* chore: bump version 9.4.5

* chore: bump version 9.4.5-beta01

Author: ArgoZhang

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.4.4</Version>
+    <Version>9.4.5-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/IFrame/IFrame.razor.cs

@@ -6,30 +6,30 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// Frame 组件封装 Html iframe 元素
+/// Frame component encapsulates the Html iframe element
 /// </summary>
 public partial class IFrame
 {
     /// <summary>
-    /// 获得/设置 Frame 加载网页路径
+    /// Gets or sets the URL of the webpage to be loaded in the Frame
     /// </summary>
     [Parameter]
     public string? Src { get; set; }
 
     /// <summary>
-    /// 获得/设置 需要传递的数据
+    /// Gets or sets the data to be passed
     /// </summary>
     [Parameter]
     public object? Data { get; set; }
 
     /// <summary>
-    /// 获得/设置 Frame 加载页面传递过来的数据
+    /// Gets or sets Frame loads the data passed by the page
     /// </summary>
     [Parameter]
     public Func<object?, Task>? OnPostDataAsync { get; set; }
 
     /// <summary>
-    /// 获得/设置 页面加载完毕后回调方法
+    /// Gets or sets Callback method after the page is loaded.
     /// </summary>
     [Parameter]
     public Func<Task>? OnReadyAsync { get; set; }
@@ -40,6 +40,16 @@ public partial class IFrame
 
     private object? _lastData;
 
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _lastData = Data;
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -59,17 +69,22 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, nameof(TriggerPostData));
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Interop, new
+    {
+        Data,
+        TriggerPostDataCallback = nameof(TriggerPostData),
+        TriggerLoadedCallback = nameof(TriggerLoaded)
+    });
 
     /// <summary>
-    /// 推送数据方法
+    /// Method to push data
     /// </summary>
     /// <param name="data"></param>
     /// <returns></returns>
     public Task PushData(object? data) => InvokeVoidAsync("execute", Id, data);
 
     /// <summary>
-    /// 由 JavaScript 调用
+    /// Called by JavaScript
     /// </summary>
     /// <param name="data"></param>
     /// <returns></returns>
@@ -83,7 +98,7 @@ public async Task TriggerPostData(object? data)
     }
 
     /// <summary>
-    /// 由 JavaScript 调用
+    /// Called by JavaScript
     /// </summary>
     /// <returns></returns>
     [JSInvokable]

src/BootstrapBlazor/Components/IFrame/IFrame.razor.js

@@ -1,16 +1,20 @@
 import Data from "../../modules/data.js"
 
-export function init(id, invoke, callback) {
+export function init(id, invoke, options) {
+    const { data, triggerPostDataCallback, triggerLoadedCallback } = options;
     const handler = e => {
-        invoke.invokeMethodAsync(callback, e.data)
+        invoke.invokeMethodAsync(triggerPostDataCallback, e.data)
     }
     Data.set(id, handler)
 
-    window.addEventListener('message', handler);
     const frame = document.getElementById(id);
 
     frame.onload = () => {
-        invoke.invokeMethodAsync("TriggerLoaded");
+        invoke.invokeMethodAsync(triggerLoadedCallback);
+        window.addEventListener('message', handler);
+        if (data) {
+            frame.contentWindow.postMessage(data);
+        }
     }
 }