在Xamarin Forms中从HtmlWebViewSource控件读取HTML值

Question

在Xamarin Forms中从HtmlWebViewSource控件读取HTML值

5

我们有一个使用HTML生成动态问卷的Web和移动应用程序。这使我们能够创建各种各样的问题（文本框，下拉菜单，日期，单选按钮）。我们目前正在使用Xamarin Forms重新构建我们的应用程序，并希望重用生成此问卷的现有代码。此外，并非我们需要的所有控件都在Xamarin中实现。

我已经成功在Xamarin中使用WebView生成问卷。这个方法完美地工作。当用户提交问卷时，我可以从WebView中检索HTML。问题是HTML不显示用户输入的任何响应。例如，如果用户在其中一个文本字段中键入了响应，则无法在从WebView控件返回的HTML中找到该响应。

以下是我如何创建HTML问卷的方式。

StringBuilder htmlString = new StringBuilder();
//build up my HTML string here
htmlString.Append("<div>.....");

var htmlWebView = new HtmlWebViewSource { Html = htmlString.ToString() };
WebView.Source = htmlWebView;

在提交按钮的点击事件中，我像这样从 WebView 控件中检索HTML。

var webViewSource = WebView.Source;
var htmlString = (string) WebViewSource.GetValue(HtmlWebViewSource.HtmlProperty);

我可以上传并检索来自 WebView 的HTML。但是我如何返回用户的响应？

更新

我可以向我的 WebView 的HTML添加非常简单的Javascript函数，如下所示。这个函数只返回100。

private static string GetJavascriptFunction()
{
    StringBuilder htmlString = new StringBuilder();
    htmlString.Append("<html>");
    htmlString.Append("<body>");
    htmlString.Append("<script type=\"text/javascript\">");
    htmlString.Append("function getValue() {");
    htmlString.Append("return 100;");
    htmlString.Append("}");
    htmlString.Append("</script>");
    return htmlString.ToString();
}

以下正确调用函数可以返回100。

string result = await WebView.EvaluateJavaScriptAsync("getValue()");

然而，如果我想让Javascript进行任何类型的DOM操作，它总是返回null。

private static string GetJavascriptFunction()
{
    StringBuilder htmlString = new StringBuilder();
    htmlString.Append("<html>");
    htmlString.Append("<body>");
    htmlString.Append("<script type=\"text/javascript\">");
    htmlString.Append("function getValue() {");
    htmlString.Append("return document.body.innerHTML;");
    htmlString.Append("}");
    htmlString.Append("</script>");
    return htmlString.ToString();
}

现在它返回null。

是否有任何方法使用Javascript从WebView控件中返回HTML的值？

- DomBurf

我认为你不理解HTML的工作原理。除非你也使用JavaScript来实际设置HTML中的值，否则这些值永远不会在HTML本身中。随便打开一个互联网上的表格，并使用开发者工具进行检查，当你输入信息时，这些值是不会被更新的。如果你想要这样做，你需要编写一些JavaScript代码，以便在用户输入时更新HTML。 - Gerald Versluis

我们的当前网页/移动应用程序正在使用JavaScript读取响应，因为我们直接访问HTML。在WebView控件中是否有类似的方法可以实现？ - DomBurf

我认为你可以通过 WebView 从 JavaScript 触发 C# 方法，因此你应该能够创建一些东西来获取值。 - Gerald Versluis

好的，谢谢。让我看看那个。 - DomBurf

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DomBurf · Accepted Answer

经过几次失败尝试，我已经成功让这个工作起来了。以下是我实现的用于从WebView中检索用户响应的函数。

private async Task<string> GetValueFromTextbox(string controlId)
{
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').value;");
}
private async Task<string> GetValueFromCheckbox(string controlId)
{
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById('{controlId}').checked;");
}
private async Task<string> GetValueFromRadioButton(string controlname)
{
    return await WebView.EvaluateJavaScriptAsync($"document.querySelector(\'input[name=\"{controlname}\"]:checked\').value;");
}
private async Task<string> GetValueFromDropdownn(string controlId)
{
    return await WebView.EvaluateJavaScriptAsync($"document.getElementById(\'{controlId}\').options[document.getElementById(\'{controlId}\').selectedIndex].text;");
}