WebView2

Question

是否可以在 WebView2 中使用 ExecuteScriptAsync 方法 set/update 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

Answer 1

好的，如果您愿意忽略新行，那么您的评论就可以了。但是，如果您希望在 html 中使用换行符，这也是可能的。

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

解决方案很简单，只需将 literal 换行符（一次转义）替换为双转义字符即可。在您对 ExecuteScriptAsync:

的调用上方添加此行

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

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

Answer 2

我想出来了！

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

WebView2 - 使用 HtmlTextWriter 更新 innerHTML

WebView2 - Update innerHTML using HtmlTextWriter

htmltextwriter