Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

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

Posted on 2017年7月8日 by king2088

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

发表评论 取消回复

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

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 9月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
252627282930  
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme