如何在 WebView Windows 10 UWP 中调用 javascript？答案

【问题标题】：How to invoke javascript in WebView Windows 10 UWP?如何在 WebView Windows 10 UWP 中调用 javascript？
【发布时间】：2016-11-20 19:37:17
【问题描述】：

我正在尝试在 WebView 中加载 javascript 以进行一些计算并以字符串形式获取输出。我尝试使用以下代码

string htmlFragment = "<html><head><script type='text/javascript'>" +
                    "function doubleIt(incoming){ " +
                    "  var intIncoming = parseInt(incoming, 10);" +
                    "  var doubled = intIncoming * 2;" +
                    "  document.body.style.fontSize= doubled.toString() + 'px';" +
                    "  return doubled.toString());" +
                    "};" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";
            htmlView.NavigateToString(htmlFragment);
            htmlView.LoadCompleted += async(s1,e1) =>
              {
                  string result = await htmlView.InvokeScriptAsync("eval", new string[] { "doubleIt(25)" });
                  Debug.WriteLine(result);
              };

更新我现在可以根据答案中提供的帮助轻松加载简单的 javascript。但是现在当javascript中有多个函数时我遇到了问题，我遇到了一个异常。我正在尝试以下代码

string htmlFragment = @"<html><head><script type='text/javascript'>" +
                    "function a(){return 10;};" +
                    "function b(){return 20;};" +
                    "function c(){return 30;};" +
                    "return (a()*b()*c());" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";

请提出建议。

【问题讨论】：

How to invoke javascript functions in a WebView in Universal Windows App的可能重复
@Kinani 我也用过，但不知道为什么它的值是空的。
您需要摆脱 window.external.notify 并实际返回您的值

标签： javascript c# webview uwp windows-10-universal

【解决方案1】：

这个特性的文档真的很差。我花了一些时间才弄清楚如何在 UWP 中调用 Javascript WebView

当您第一次查看函数调用webView.InvokeScriptAsync(string,string[]) 时，您的第一反应是他们希望函数名作为第一个参数，然后函数参数作为字符串数组。 (mainly because the MSDN documentation says this)

参数

脚本名称

类型：System.String [.NET] |平台::字符串 [C++]

要调用的脚本函数的名称。

参数

类型：System.String[] [.NET] |平台::数组 [C++]

一个字符串数组将参数打包到脚本函数中。

但是，这是错误的，会导致数小时的头部撞击。真的，他们想要的是第一个参数中的单词“eval”，然后是函数的字符串数组，或者您希望评估的命令

   var value = await webViewer.InvokeScriptAsync("eval", 
      new string[] 
      { 
        "functionName(functionParams)" 
      });

我已经使用 Microsoft API 工作了几年，现在我确信这不是使用此功能的预期方式，而且有点像 hack。不幸的是，如果你想使用 JavaScript，这是我知道目前唯一可行的方法。

【讨论】：

我根据您的建议进行了尝试，但仍然将值设为空。我在LoadCompleted 事件中更新了我的代码。你能推荐一下吗？
摆脱 window.notify 并实际返回您的值
感谢它现在正在工作。你能建议为什么由于 window.notify，它会导致问题吗？
整个 WebViewer 控件非常笨拙，我不知道为什么它不起作用。对不起
你可以检查Update这个问题吗？

【解决方案2】：

安东尼，尝试检查您自己的建议：

 await webViewer.InvokeScriptAsync("eval", 
  new string[] 
  { 
    "functionName(functionParams)" 
  });

或：

await webViewer.InvokeScriptAsync(functionName, new string[]{ functionParameters });

与 Microsoft 建议的一样，只是您将函数名称限制为一个（“eval”） - 没有必要。相信我，您可以使用任何函数名称，就像我现在使用 UWP 和之前使用 Windows Phone 混合应用程序一样。

【讨论】：

【解决方案3】：

这个问题已经 4 年了，但我来看看为什么你得到一个空字符串。

在您的示例中，JavaScript 中的函数返回整数，而预期值是字符串类型。

通过修改这些函数并返回这样的字符串：

string htmlFragment = @"<html><head><script type='text/javascript'>" +
                    "function a(){return '10';};" +
                    "function b(){return '20';};" +
                    "function c(){return '30';};" +
                    "</script></head><body>" +
                    "<div id = 'myDiv'>I AM CONTENT</div></body></html>";

我们在回来的路上得到了很好的结果。

【讨论】：