WKWebView的evaluateJavaScript返回类型异常排查：自定义渲染器中JS添加HTML样式报WKErrorDomain Code5错误

问题描述 #

我在自定义渲染器中通过JavaScript向HTML添加样式，代码如下：

string jsScript = "var style = document.createElement('style'); style.innerHTML = 'body {-webkit-text-size-adjust: none;}'; document.getElementsByTagName('head')[0].appendChild(style);";
var res = await Control.EvaluateJavaScriptAsync(new NSString(jsScript));

执行后收到错误：

Error Domain=WKErrorDomain Code=5 "JavaScript execution returned a result of an unsupported type" UserInfo={NSLocalizedDescription=JavaScript execution returned a result of an unsupported type}

实际样式已经成功添加，但返回类型有问题，请问哪里操作有误？

解决方案 #

这个问题我之前也碰到过，核心原因是WKWebView的EvaluateJavaScriptAsync方法只能处理特定类型的返回值——比如字符串、数字、布尔值、null，或者可序列化为JSON的对象，但DOM元素不在支持范围内。

你当前的JavaScript代码最后执行的是document.getElementsByTagName('head')[0].appendChild(style)，这个方法的返回值是你刚添加的<style> DOM元素，而WKWebView无法处理这种类型的返回结果，所以抛出了错误——尽管样式添加的操作本身已经成功完成。

解决办法很简单，只需要让你的JavaScript代码返回一个WKWebView支持的类型即可：

1. 返回null（推荐，不需要返回值时）
   修改jsScript，在末尾加上return null;：

string jsScript = "var style = document.createElement('style'); style.innerHTML = 'body {-webkit-text-size-adjust: none;}'; document.getElementsByTagName('head')[0].appendChild(style); return null;";

2. 返回状态字符串
   如果需要确认操作完成，可以返回一个标识字符串，比如return 'style-added';：

string jsScript = "var style = document.createElement('style'); style.innerHTML = 'body {-webkit-text-size-adjust: none;}'; document.getElementsByTagName('head')[0].appendChild(style); return 'style-added';";

这样修改后，JavaScript执行的返回值就是WKWebView支持的类型，错误会消失，同时样式添加的功能依然正常工作。

内容的提问来源于stack exchange，提问作者testing