WebView2 - 使用 HtmlTextWriter 更新 innerHTML答案

【问题标题】：WebView2 - Update innerHTML using HtmlTextWriterWebView2 - 使用 HtmlTextWriter 更新 innerHTML
【发布时间】：2021-07-03 14:05:39
【问题描述】：

是否可以在 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);

“内容”是由 HTMLTextWriter 生成的字符串

更新：

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

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

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

【问题讨论】：

标签： webview2 htmltextwriter

【解决方案1】：

好的，如果您对忽略新行感到满意，那么您的 cmets 就可以工作了。但是，如果您希望在 html 中包含换行符，这也是可能的。

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

解决方案很简单，只需将literal 换行符（一个转义符）替换为双转义符即可。将此行添加到您对 ExecuteScriptAsync 的调用上方：

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

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

【讨论】：

没错。我使用HTMLTextWriter 来渲染内容，默认情况下它正在添加新行。在我开始使用WebView2 编程之前，这并没有导致WebBrowser 出现问题。我的解决方案是将NewLine 属性设置为string.Empty。

【解决方案2】：

我想通了！

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

【讨论】：