ionic2使用ThemeableBrowser插件实现app内打开外部链接

ThemeableBrowser插件主要是用于app内打开新浏览器或者说嵌入一个浏览器到app内,这个插件很好用,不过有个缺点,就是在android下无法控制状态栏的颜色,ios下可以控制,其他的都非常不错,很适合用于在app内打开外部链接,这个插件延续了InAppBrowser插件
为什么要使用这个插件,主要原因是ionic2官方也很好的支持了这款插件。
1、在ionic中使用
先安装以下ionic插件

ionic cordova plugin add cordova-plugin-themeablebrowser
npm install --save @ionic-native/themeable-browser

2、首先在app.module.ts引入此插件

import { ThemeableBrowser, ThemeableBrowserObject } from '@ionic-native/themeable-browser';

在providers: []中加入ThemeableBrowser,如下

providers: [
...
ThemeableBrowser,
...
]

3、在需要使用的地方再次引入此插件,比如我再openurl.ts这个组件中引入

import { Component, OnInit } from '@angular/core';
import { ThemeableBrowser, ThemeableBrowserObject } from '@ionic-native/themeable-browser';
export class jobInfo implements OnInit{
 private options = {  
//这里我仅仅定义了状态栏颜色(ios下有效)和关闭按妞,以及工具条的颜色和标题颜色
        statusbar: {  
        color: '#008B8B'
        },  
        toolbar: {  
        height: 44,  
        color: '#008B8B'  
        },  
        title: {  
        color: '#ffffff',  
        showPageTitle: true  
        },
        closeButton: {  
        image: 'close',  
        imagePressed: 'close_pressed',  
        align: 'left',  
        event: 'closePressed'  
        },
        backButtonCanClose: true  
    };  
 constructor(private themeableBrowser: ThemeableBrowser){
 }
 goBrowser(url){
        let web_url='http://www.egtch.com'
        let browser: ThemeableBrowserObject = this.themeableBrowser.create(web_url, '_self',
this.options);
    }

如果需要更多工具(比如返回、前进、自定义按妞等),请到插件官方查看!
http://ionicframework.com/docs/native/themeable-browser/
https://github.com/initialxy/cordova-plugin-themeablebrowser

发表评论

电子邮件地址不会被公开。 必填项已用*标注