执行js代码报错了

来源：12-6 基于H5容器实现我的页面

噗通爱学习

2024-06-28

///隐藏H5登录页的返回键
void _handleBackForbid() {
const jsStr =
"var element = document.querySelector('.animationComponent.rn-view'); element.style.display = 'none';";
if (widget.backForbid ?? false) {
controller.runJavaScript(jsStr);
}
}
报错信息：
[ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: PlatformException(FWFEvaluateJavaScriptError, Failed evaluating JavaScript., A JavaScript exception occurred (WKErrorDomain:4:{WKJavaScriptExceptionLineNumber: Unsupported Type: 1, WKJavaScriptExceptionMessage: TypeError: null is not an object (evaluating 'element.style'), WKJavaScriptExceptionSourceURL: Unsupported Type: https://m.ctrip.com/webapp/myctrip/, NSLocalizedDescription: A JavaScript exception occurred, WKJavaScriptExceptionColumnNumber: Unsupported Type: 77}), null)
#0      WKWebViewHostApiImpl.evaluateJavaScriptForInstances (package:webview_flutter_wkwebview/src/web_kit/web_kit_api_impls.dart:1167:7)
<asynchronous suspension>
#1      WebKitWebViewController.runJavaScript (package:webview_flutter_wkwebview/src/webkit_webview_controller.dart:462:7)
<asynchronous suspension>

我自己写的js不会报错，但是浏览器执行会隐藏，但是在app里面就不会隐藏

jsCode = ;

函数都是写在这里的
onPageFinished: (String url) {
  _handleBackForbid();
},

写回答

1回答

CrazyCodeBoy

2024-06-29

需求：我们的需求是希望在打开H5我的页面的时候隐藏掉左侧的返回按钮。

实现思路：

1. 通过观察H5我的页面的返回按钮的样式为.animationComponent.rn-view ；
2. 所以通过查找页面中具有类名 .animationComponent.rn-view 的元素，然后通过将它的style.display 设置为 'none'来隐藏这个元素；

///隐藏H5登录页的返回键
void _handleBackForbid() {
  const jsStr =
      "var element = document.querySelector('.animationComponent.rn-view'); element.style.display = 'none';";
  if (widget.backForbid ?? false) {
    controller.runJavaScript(jsStr);
  }
}

存在的兼容问题：
有的页面的返回按钮的样式不是 .animationComponent.rn-view ，那么这个时候element就为空，就会出现元素找不到的异常。

解决办法：
对element做判空处理，如果不为空在执行element.style.display = 'none'。优化后的代码如下：

///隐藏H5登录页的返回键
void _handleBackForbid() {
  const jsStr =
      "var element = document.querySelector('.animationComponent.rn-view'); if(element != null) element.style.display = 'none';";
  if (widget.backForbid ?? false) {
    controller.runJavaScript(jsStr);
  }
}

另外：如果想隐藏的H5返回键不支持怎么办？
可以按照上面因此H5我的页面的思路，在Chrome上打开这个H5页面，然后通过开发者模式找到通过查找页面中的返回按钮的样式class的元素，然后通过将它的style.display 设置为 'none'来隐藏这个元素；
操作方式可以参考下面的截图：