从 InAppBrowser 执行从 executeScript 调用的打字稿函数

Question

我正在实现 ionic cordova InAppBrowser 功能，其中我必须调用在 InAppBrowser“loadstop”事件之外编写的函数。我在这里想要的是在执行 loadstop 事件后立即调用 callBack() 函数。

我的虚拟代码是：

this.browser.on("loadstop").subscribe((event)=>{
this.browser.executeScript({code: if(document.getElementByID("ID").length > 1){function callBack();}})
});

callback(){
this.browser.hide();
}

Answer 1

您通过 executeScript() 注入的 code 是在 InappBrowser Webview 的范围内执行的，而不是 Cordova 应用程序的 Webview，因此在您的 Cordova 应用程序中看不到函数。另请注意，传递给 executeScript() 的 code 参数必须进行字符串化 Javascript，因为它将通过本机桥传递给 InappBrowser Webview。

因此，您可以通过两种方式实现回调：

首先，由于可以在 InappBrowser Webview 的上下文中同步评估是否调用回调的条件，因此您可以同步 return 使用当前 npm 版本的 DOM 查询的结果cordova-plugin-inappbrowser，例如：

callBack(){
    console.log("Typescript callback has been called");
    this.browser.hide();
}

this.browser.on("loadstop").subscribe((event)=>{
    this.browser.executeScript(
        {
            code: 'document.getElementByID("ID").length > 1;'
        },
        function(values){
            var result = values[0];
            if(result){
                callBack();
            }
        }
    );
});

但是，如果您的条件的结果需要异步 returned，上述方法将不起作用。相反，您可以使用 postMessage API 实现，由 this PR 添加到 cordova-plugin-inappbrowser 用于 Android 和 iOS 平台。它尚未发布到 npm 的版本中，因此您需要直接从 Github 存储库安装插件的 master 分支：

cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser

然后您可以像这样使用它：

callBack(){
    console.log("Typescript callback has been called");
    this.browser.hide();
}

this.browser.on("message").subscribe((event)=>{
    if(event.data.action === "callBack"){
        callBack();
    }
});

this.browser.on("loadstop").subscribe((event)=>{
    this.browser.executeScript(
        {
            code: '\
                setTimeout(function(){\
                    if(document.getElementByID("ID").length > 1){\
                        webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({\
                            action: "callBack"\
                        }));\
                    } \
                }, 250);\
            '
        }
    );
});

从 InAppBrowser 执行从 executeScript 调用的打字稿函数

Execute typescript functions called from executeScript from InAppBrowser

cordova

inappbrowser

ionic3