webview2 - WebView2 - 使用 HtmlTextWriter 更新 innerHTML

Question

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

我创建了以下方法来更新 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

score 1 · Accepted Answer

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

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

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

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

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

score 1 · Accepted Answer

我想通了！

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

webview2 - WebView2 - 使用 HtmlTextWriter 更新 innerHTML

2 回答 2

Related

Reference