WebView Not Working in Cocos Creator 3.8.2 – setOnJSCallback & setJavascriptInterfaceScheme Not Triggering

Cocos Creator
1

Hello everyone,

I am using Cocos Creator 3.8.2 and facing issues with the WebView component. The following functions do not seem to work:

  1. setOnJSCallback(callback) – This does not trigger when a JavaScript event is sent from the WebView.
  2. setJavascriptInterfaceScheme(scheme) – Even after setting a custom scheme, it does not register properly, and any attempt to trigger it results in an error:
Failed to launch '<scheme>://<data>' because the scheme does not have a registered handler.

Has anyone successfully used setOnJSCallback and setJavascriptInterfaceScheme in Cocos Creator 3.8.2?
Is there an alternative approach, or is this a known issue?

Any guidance would be appreciated!
@Tom_k

2

You can follow this tutorial: Tutorial: Interaction and hierarchy of WebView internal pages
I have implemented this mechanism successfully based on it

3

By following this tutorial, WebView is working fine in the browser but not running properly on mobile devices in Cocos Creator 3.8.2, even though it was working in Cocos Creator 2.4.7.

4

Would you mind posting your webview code here?
Last time I ran into this problem was because my scheme name contained uppercase letters.

5 
//Code of WebViewController for cocos 3.8.2

@property(cc.WebView)
  webview: cc.WebView = null;
  scheme: string = "rgmrwebcall";

onLoad() {
 
    WebViewController.instance = this;

       this.node.active = false;
  }

openWebView(url: string){
NetworkManager.getInstance().network.node.on(
      "closewebview",
      this.OnCloseWebView,
      this
    );
    this.urlToCall = url;
    var self = this;
    function jsCallback(target, urlReceived) {
      // The return value here is the URL value of the internal
      // page, you need to parse the data you need.
      Logs.print("jsCallback "+urlReceived)
      var dataEncoded = urlReceived.replace(self.scheme + "://", ""); // str === 'a=1&b=2'
      let dataDecoded: string = decodeURIComponent(dataEncoded);
      let deeplinkArrayStr: string = dataDecoded.replace("data=", "");
      this.OnCloseWebView();
      // Code to close the webview
     }

          this.webview.setJavascriptInterfaceScheme(this.scheme);
              this.webview.setOnJSCallback(jsCallback);
}


onWebFinishLoad(sender, event) {
  try {
    Logs.print("onWebFinishLoad");
    let webview: cc.WebView = this.getComponentInChildren(cc.WebView);

    var loadStatus = "";
    if (event === cc.WebView.EventType.LOADED) {
      // if(!cc.sys.isBrowser)
        if(!NetworkManager.getInstance().network.IsVariantAAR())
      {
      loadStatus = " is loaded!";

      this.urlToCall = NetworkManager.getInstance().network.replaceDataInAPiCalls(
        this.urlToCall
      );
      Logs.print(" first web 1  " + this.urlToCall);
webview.evaluateJS(
        'Open("' +
          this.urlToCall +
          '","' +
          cc.sys.localStorage.getItem(GameConst.userLoginToken) +
          '")'
      );
this.node.width = 576;
            this.node.height = 1024;
     
    } else if (event === cc.WebView.EventType.LOADING) {
      loadStatus = " is loading!";
    } else if (event === cc.WebView.EventType.ERROR) {
      loadStatus = " load error!";
      // this.webview.node.active=false;
      this.node.active = false;
}
}

OnCloseWebView() {
      NetworkManager.getInstance().network.node.off(
        "closewebview",
        this.OnCloseWebView,
        this
      );
      this.node.destroy();
}

//In logs: event is throwing error on click of the button
6

Are you migrating code from Cocos Creator 2.4+ ? in Cocos Creator 3.0+, namespace cc no longer exists

7

Yes, I am using an alias:

import * as cc from 'cc';

So, I am importing all necessary components from ‘cc’, and everything else is working fine except for the WebView issue.

Issue Details:

  • WebView is opening properly on the device, so it’s not a loading issue.
  • However, when clicking the close button, there is an error in the event handler.
  • Also, setOnJSCallbackis not getting called, even though the URL starts with the same scheme set under setJavascriptInterfaceScheme.

Any insights on why setOnJSCallback might not be triggering in Cocos Creator 3.8.2? It was working fine in 2.4.7.