WebView2 - 使用 HtmlTextWriter 更新 innerHTML

问题描述

是否可以使用 WebView2 中的 ExecuteScriptAsync 方法设置/更新innerHTML，或者有其他方法可以解决吗？

我创建了以下方法来更新 DOM。它工作正常，除了innerHTML

private async Task UpdateElementAsync(string elementID,string property,string value)
{
      try
      {
          await this.navigation.CoreWebView2.ExecuteScriptAsync("document.getElementById('" + elementID + "')." + property + " = \'" + value + "\'");
      }
      catch (Exception ex)
      { MessageBox.Show(ex.Message); }
        
 }

我这样调用这个方法：

await UpdateElementAsync("DIV_ID","innerHTML",content);

"content" 是由 HTMLTextWriter 生成的字符串

更新：

innerHTML 不喜欢换行符 (\r\n)

innerHTML 更新工作： <button> test </button>

innerHTML 更新不起作用： <button> test </button>\r\n

解决方法

好的，如果您对忽略新行感到满意，那么您的评论就会起作用。但是，如果您希望在 html 中包含换行符，也可以这样做。

这里发生的事情有点像“迷失在翻译中”。您在 C# 中构建一个字符串，然后将其传输到 javascript。 Javascript 不喜欢文字字符串中间的换行符。这就是它失败的原因。

解决方法很简单，只需用双转义字符替换 literal 换行符（带一个转义符）。在您对 ExecuteScriptAsync 的调用上方添加此行：

value= value.Replace("\t","\\t").Replace("\r","\\r").Replace("\n","\\n");

现在 javascript 接受换行符，您将在 html 中获得换行符。

我想通了！

问题是我使用 HTMLTextWriter 渲染内容并生成新行……ExecuteScriptAsync 方法不知道如何解释 \r\n。我的解决方案是将 NewLine 的 HTMLTextWriter 属性设置为 string.Empty。

htmltextwriter webview2