RadzenHtmlEditor添加带src的iframe时页面刷新问题求助

我在使用RadzenHtmlEditor开发程序时，通过自定义的「InsertExcel」命令插入包含src属性的iframe（生成代码如下），编辑器所在页面会自动刷新。如果操作后及时保存，iframe内容能留存；但如果操作稍慢，页面刷新后新增的iframe内容就会丢失。现在需要阻止添加该iframe时的页面刷新。

相关代码 #

主页面RadzenHtmlEditor代码

<RadzenHtmlEditor 
        @bind-Value="@CurrentPageContent" 
        Disabled="@editorDisabled" 
        Style="height: 77vh;" 
        Execute=@OnExecute
        @ref="editorRef">

    <RadzenHtmlEditorUndo />
    <RadzenHtmlEditorRedo />
    <RadzenHtmlEditorSeparator />
    <RadzenHtmlEditorBold />
    <RadzenHtmlEditorItalic />
    <RadzenHtmlEditorUnderline />
    <RadzenHtmlEditorStrikeThrough />
    <RadzenHtmlEditorSeparator />
    <RadzenHtmlEditorColor />
    <RadzenHtmlEditorBackground />
    <RadzenHtmlEditorRemoveFormat />
    <RadzenHtmlEditorAlignRight />
    <RadzenHtmlEditorAlignCenter />
    <RadzenHtmlEditorAlignLeft />
    <RadzenHtmlEditorJustify />
    <RadzenHtmlEditorBackground />
    <RadzenHtmlEditorFontName />
    <RadzenHtmlEditorFontSize />
    <RadzenHtmlEditorFormatBlock />
    <RadzenHtmlEditorIndent />
    <RadzenHtmlEditorOrderedList />
    <RadzenHtmlEditorUnorderedList />
    <RadzenHtmlEditorLink />
    <RadzenHtmlEditorUnlink />
    <RadzenHtmlEditorImage />
    <RadzenHtmlEditorSubscript />
    <RadzenHtmlEditorSuperscript />
    <RadzenHtmlEditorRemoveFormat />
    <RadzenHtmlEditorCustomTool CommandName="InsertImage" Icon="image" />
    <RadzenHtmlEditorCustomTool CommandName="InsertAudio" Icon="audio_file" />
    <RadzenHtmlEditorCustomTool CommandName="InsertVideo" Icon="video_file" />
    <RadzenHtmlEditorCustomTool CommandName="InsertExcel" Icon="table_view" />
    <RadzenHtmlEditorCustomTool CommandName="InsertPDF" Icon="picture_as_pdf" />
</RadzenHtmlEditor>

弹窗组件代码

<LayoutView Layout="typeof(DialogLayout)">
    <ChildContent>
        <div>
            
            <BlazorInputFile.InputFile OnChange="@(args => OnChange2(args))" class="form-control" accept="@((BookFileType == BookFileType.Audio ? "audio/*" : (BookFileType == BookFileType.Video ? "video/*" : (BookFileType == BookFileType.Image ? "image/*" : (BookFileType == BookFileType.Excel ? "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" : "application/pdf")))))">

            </BlazorInputFile.InputFile>            
            <RadzenProgressBar Value="@percentComplete" Max="100" ShowValue="true" Mode="ProgressBarMode.Determinate">
            </RadzenProgressBar>
        </div>
        <div class="mt-2 mb-2">
            <label>Media Width:</label>&nbsp;
            <RadzenNumeric Placeholder="Media Width" TValue="int" @bind-Value="imageWidth"
                           Disabled="@(BookFileType == BookFileType.Audio)">

            </RadzenNumeric>
        </div>
        <div>
            <label>Media Height:</label>&nbsp;
            <RadzenNumeric Placeholder="Media Height" TValue="int" @bind-Value="imageHeight"
                           Disabled="@(BookFileType == BookFileType.Audio || BookFileType == BookFileType.Video || BookFileType == BookFileType.Image)">

            </RadzenNumeric>
        </div>
    </ChildContent>
</LayoutView>

iframe生成代码

$"<iframe width='{imageWidth}px' height='{imageHeight}px' frameborder='0' scrolling='yes' src='{urlExcel}' {style}></iframe>"

解决办法 #

1. 正确处理编辑器命令，阻止默认行为

在OnExecute方法中处理「InsertExcel」命令时，使用编辑器的内置方法插入HTML，并调用PreventDefault()阻止可能触发的页面刷新：

@code {
    private RadzenHtmlEditor editorRef;

    async Task OnExecute(HtmlEditorExecuteEventArgs args)
    {
        if (args.CommandName == "InsertExcel")
        {
            // 打开弹窗获取插入参数
            var insertParams = await DialogService.OpenAsync<YourExcelInsertComponent>("插入Excel", new Dictionary<string, object>());
            
            if (insertParams != null)
            {
                // 构建iframe代码
                var iframeHtml = $"<iframe width='{insertParams.imageWidth}px' height='{insertParams.imageHeight}px' frameborder='0' scrolling='yes' src='{insertParams.urlExcel}' {insertParams.style}></iframe>";
                
                // 使用编辑器内置命令插入HTML，确保内容正确更新
                await editorRef.ExecuteCommandAsync(HtmlEditorCommands.InsertHtml, iframeHtml);
                
                // 阻止默认行为，避免页面刷新
                args.PreventDefault();
            }
        }
    }
}

2. 优化iframe的src路径与权限

• 确保urlExcel是服务器可访问的绝对路径或相对路径，避免使用本地文件路径（如C:\xxx.xlsx），这类路径可能触发浏览器导航行为导致页面刷新。
• 给iframe添加sandbox属性限制权限，防止其意外触发页面导航：

$"<iframe width='{imageWidth}px' height='{imageHeight}px' frameborder='0' scrolling='yes' src='{urlExcel}' sandbox='allow-same-origin allow-scripts' {style}></iframe>"

3. 避免不必要的组件重渲染

• 检查是否有全局状态变更或父组件的状态更新导致页面刷新，确保插入iframe后仅更新编辑器内容，不触发其他无关的状态变更。
• 如果使用双向绑定@bind-Value导致频繁重渲染，可以改为手动更新编辑器内容，减少不必要的页面刷新。

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