Cordova App无法接收InAppBrowser WebView通过postMessage发送的消息

我使用Cordova + Facebook社交登录插件 + InAppBrowser加载自己的WordPress网站，网站内有一个登录按钮，希望用户点击该按钮时，从WordPress页面向Cordova App发送消息，触发Cordova端的Facebook登录。尝试了多种方法（包括更换不同版本的cordova-plugin-inappbrowser），均无法接收到消息，求指导。

我的配置代码 #

config.xml

<access origin="*" />
<access origin="https://example.com/*" />
<content src="index.html" />
<allow-intent href="https://*/*" />
<allow-navigation href="https://*/*" />
<preference name="cordovaWebviewEngine" value="CDVWKWebViewEngine" />
<plugin name="cordova-plugin-wkwebview-engine" spec="~1.2.2" />
<plugin name="cordova-plugin-inappbrowser" spec="~6.0.0" />
<plugin name="cordova-plugin-advanced-http" spec="^3.2.0" />
<plugin name="cordova-plugin-facebook-connect" spec="~3.2.0">
    <variable name="APP_ID" value="*******************" />
    <variable name="APP_NAME" value="*********************" />
</plugin>

index.js

document.addEventListener('deviceready', function() {

    // Declare ref variable in a broader scope
    var ref;

    ref = cordova.InAppBrowser.open('https://example.com/', '_blank', 'location=no');

    // Listen for messages from the WebView (in the Cordova app)
    ref.addEventListener('message', function(event) {

        // Problem: Does not receive any message from SEND MESSAGE PART
        console.log("Received message from WebView:"+ JSON.stringify(event));

        // Check if the action is 'facebook_login'
        if (event.data && event.data.action === 'facebook_login') {
            console.log("Triggering Facebook login...");
            triggerFacebookLogin();
        }
    });

    // Ensure that ref is available before trying to use it
    ref.addEventListener('loadstop', function() {
        // Inject jQuery
        ref.executeScript({
            code: `
                if (typeof jQuery === 'undefined') {
                    var script = document.createElement('script');
                    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js';
                    document.head.appendChild(script);
                }
            `
        }, function() {
            // Run jQuery code after jQuery is injected
            ref.executeScript({
                code: `
                    if (typeof jQuery === 'function') {
                        jQuery(document).ready(function() {
                            jQuery("body").on("click", ".login_button", function () {
                                
                                /* SEND MESSAGE PART */
                                /* Click action on button can fire as usual */
                                /* All the below codes are tried but not receiving any message at the cordova parent EventListener from this webview*/
                                /* Also tried to inject these code directly to the wordpress's javascript file, not working as well */
                                
                                window.parent.postMessage({ action: 'facebook_login' }, 'https://example.com/');
                                window.postMessage({ action: 'facebook_login' }, 'https://example.com/');
                                ref.postMessage({ action: 'facebook_login' }, 'https://example.com/');

                                window.parent.postMessage({ action: 'facebook_login' }, '*');
                                window.postMessage({ action: 'facebook_login' }, '*');
                                ref.postMessage({ action: 'facebook_login' }, '*');

                                                
                                var message = 'this is the message';
                                var messageObj = {my_message: message};
                                var stringifiedMessageObj = JSON.stringify(messageObj);
                                window.postMessage(stringifiedMessageObj, "*");
                                window.parent.postMessage(stringifiedMessageObj, "*");
                            });
                        });
                    }
                `
            });
        });
    });
});

解决方法 #

• 修正消息发送API：由于使用WKWebView引擎，InAppBrowser的消息传递不能用标准window.postMessage，必须使用WKWebView专属的webkit.messageHandlers.cordova_iab.postMessage接口。把注入脚本里的发送代码替换为：

  jQuery("body").on("click", ".login_button", function () {
      if (window.webkit?.messageHandlers?.cordova_iab) {
          window.webkit.messageHandlers.cordova_iab.postMessage({ action: 'facebook_login' });
      }
  });
  

• 验证脚本执行时机：在按钮点击事件里添加日志，确认代码确实被触发：

  console.log("Login button clicked, attempting to send message...");
  

• 排查兼容性问题：执行cordova plugin list确认所有插件（尤其是inappbrowser和wkwebview-engine）已正确安装，无版本冲突。

• 调试辅助：

  • iOS端用Safari开发者工具连接设备，查看InAppBrowser的控制台输出，排查脚本错误；
  • 确认WordPress页面没有内容安全策略（CSP）限制webkit.messageHandlers的调用。

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