执行js代码报错了

Question

///隐藏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();
},

Answer 1

CrazyCodeBoy 2024-06-29 13:55:57

需求：我们的需求是希望在打开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'来隐藏这个元素；
操作方式可以参考下面的截图：

• 提问者 噗通爱学习 #1

  用这个没问题，建义更新一下课件，不然其他同学又入坑了///隐藏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);
    }
  }

• CrazyCodeBoy 回复 提问者 噗通爱学习 #2

  嗯呢，课程源码已更新。

• 悠悠小憨 回复 CrazyCodeBoy #3

  回复 CrazyCodeBoy：用了这个还是没反应。加上Future.delayed延迟800就可以了但效果一般。客服样式也乱了

点开查看后面1条评论