如何解析runJavaScriptReturningResult返回的对象以提取字符串值？

核心原因 #

你的JS表达式可能未返回预期的字符串，或是WebView将返回值包装成了非字符串类型的对象；另外如果DOM元素不存在，表达式会抛出错误，导致返回值异常。

解决方案 #

方案1：在JS层面确保返回字符串并添加容错处理 #

修改JS代码，用try/catch和可选链处理元素不存在的情况，确保始终返回字符串：

Future<void> _injectJavascript(BuildContext context) async {
    final ret = await controller.runJavaScriptReturningResult('''
        try {
            const statusElem = document.getElementsByClassName("status-col")[1]?.childNodes[0]?.childNodes[0];
            return statusElem ? `${statusElem.innerHTML}: ${statusElem.title}` : "";
        } catch(e) {
            return "";
        }
    ''');
    FFAppState().paymenturlappstate = ret as String;
    return;
}

方案2：Dart端处理Web场景下的JS原生对象 #

如果是Flutter Web应用，WebView返回的可能是JS原生对象，需用dart:js包转换：

1. 导入依赖包：

import 'dart:js' as js;

2. 处理返回值：

Future<void> _injectJavascript(BuildContext context) async {
    final ret = await controller.runJavaScriptReturningResult(
        'document.getElementsByClassName("status-col")[1].childNodes[0].childNodes[0].innerHTML + ": " + document.getElementsByClassName("status-col")[1].childNodes[0].childNodes[0].title');
    final resultStr = js.JsObject.fromBrowserObject(ret).toString();
    FFAppState().paymenturlappstate = resultStr;
    return;
}

方案3：用JSON序列化强制返回字符串 #

将JS结果用JSON.stringify包裹，在Dart端解析后去除引号：

Future<void> _injectJavascript(BuildContext context) async {
    final ret = await controller.runJavaScriptReturningResult('''
        JSON.stringify(
            document.getElementsByClassName("status-col")[1].childNodes[0].childNodes[0].innerHTML + ": " + document.getElementsByClassName("status-col")[1].childNodes[0].childNodes[0].title
        )
    ''');
    FFAppState().paymenturlappstate = ret.toString().replaceAll('"', '');
    return;
}

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