ionic 插件 In App Browser 简单上手

In App Browser 是 ionic 的一个native插件,可以用来在app中打开一个“网页浏览器”,用途类似于 Native App 中的 webView,可以直接加载远程资源。例如,可以全屏加载一个单独的h5游戏,实现 ionic app 中嵌入其他h5游戏。

但是 In App Browser 在 ionic4 中的文档资料非常的少,仅有安装方法和一个简单的usage:https://ionicframework.com/docs/native/in-app-browser/。不过 ionic 的这个主要是对 cordova 做了一下 binding,所以直接看 cordova 的文档也很有参考价值:https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/。

下面举例嵌入h5游戏的步骤。

根据文档安装插件

1
2
ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

页面中打开url

1
2
3
4
5
6
7
import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

constructor(private iab: InAppBrowser) { }

...

const browser = this.iab.create('https://ionicframework.com/', '_blank', 'toolbar=no,location=no');

核心在于iab.create,用法可参考cordova.InAppBrowser.open

第二个参数指定网页的打开方式,默认为_self注意必须指定为_blank。因为如果使用_self,将会直接取代当前页面,这意味着之后本页面已经消失(可以用safari真机或模拟器调试),也就是说,本页的js全部都不能执行了,这样就失去了和游戏(链接)的交互能力,同时也无法返回。

第三个参数用于关闭工具栏和地址栏

与browser中的内容交互

没有找到类似app与webview之间的通信方式,只好曲线救国,使用executeScript函数,例如,以下代码可以读取browser中的localStorage数据:

1
2
const response = await browser.executeScript({ code: 'localStorage.getItem("foo")'});
console.log(response); // ["bar"]

当然,不借助localStorage,直接用全局变量应该也是可以的

从browser中返回主应用

在browser中的网页并没有办法关闭自身,只能通过外部关闭,因此需要用到上面的交互方式实现。

大致思路为,通过localStorage中约定的变量,外部定时读取其内容,条件满足时关闭:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const browser = this.iab.create(order.gameUrl, '_blank', 'toolbar=no,location=no');

browser.on('loadstop').subscribe(async event => {
await browser.executeScript({ code: 'localStorage.setItem("close", null)'});
closeLoop();
});

const closeLoop = async () => {
const response = await browser.executeScript({ code: 'localStorage.getItem("close")'});
if (response && response.length && response[0])) {
browser.close(); // 关闭browser
} else {
setTimeout(() => closeLoop(), 100);
}
};

注意,需要在loadstop事件之后执行

文章作者: 王思捷
文章链接: https://sijie.wang/2019/03/10/ionic-inappbrowser/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 我爱平铺