Cordova插件内置浏览器:如何在Cordova Webview中使用Cordova？

Question

1. 我在App https://ionicframework.com/docs/native/in-app-browser中安装了插件

文档在这里：https://github.com/apache/cordova-plugin-inappbrowser

1. 动态地，我在这个目录中创建了一个HTML页面: this.file.dataDirectory
2. 我试着像这样在网页上加载这个页面：

导入

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

构造函数

constructor(private iab: InAppBrowser) {}

我的代码

const browser = this.iab.create( this.webview.convertFileSrc( this.file.dataDirectory + 'jojo/index.html' ) );

一切都很好，没有问题。我的页面jojo/index.html可以加载。

页面在Cordova WebView中加载。

如果我没有出错，因为我没有设置“目标”值(值仍然是"_self")，那么我的页面jojo/index.html将加载到WebView中。对吧？

参考资料：

​

​

所以..。在我的页面上，我想使用离子函数(或cordova函数)。

我怎么能这么做？

PS:我已经检查过这个主题了：在InAppBrowser中使用cordova插件，这是另一种情况。它们的目标是"_blank"，因此它们在InAppBrowser中是打开的。

我的配置

这是我的配置：

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.4.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/jojo/Library/Android/sdk)
   ios-deploy        : 2.0.0
   NodeJS            : v11.10.0 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

非常感谢你的帮助。

Answer 1

您不能从InAppBrowser窗口直接访问任何Cordova函数。相反，您需要在InAppBrowser和Cordova WebView之间使用(仅？)方法，即message事件处理程序。

看看这篇文章介绍如何使用message窗口实现message事件处理程序。在本例中，您从IAB向WebView发送一条关闭消息，指示Cordova关闭IAB，但您可以更改该消息并发送任何您想要的消息，以便在WebView端执行不同的操作。

这是来自WebView端的示例代码：

function openInAppBrowser() {
    // Open URL
    var open_url = 'http://www.sampleurl.com/sample.htm';
    inAppBrowserRef = cordova.InAppBrowser.open(open_url, '_blank', 'clearcache=yes,clearsessioncache=yes,location=yes,hardwareback=no,zoom=no');
    // Add event listener to close the InAppBrowser
    inAppBrowserRef.addEventListener('message', messageCallBack);
};

function messageCallBack(params) {
    // Close the InAppBrowser if we received the proper message
    if(params.data.action == 'close') {
        inAppBrowserRef.close();
    }
};

有关InAppBrowser端的JS代码，请参阅本文，并根据您的需要对其进行修改。

注意，您必须使用inappbrowser插件的3.1.0dev版本才能使此事件处理程序工作。