ionic应用程序跳转其它网站地址实现（themeablebrowser）相当于WebView
背景介绍
可谓Android或者IOS中使用WebView给于了开发者大大的福利。那Ionic项目如何实现类似的功能呢？为了实现在ionic应用程序中调用其它网站地址，因此引出了以下的文章。注意：本文章适合简单使用若您需要更高级的开发建议进入官方网址研究（网址：点击打开链接）
插件简介（官网直译）：
这个插件是org.apache.cordova.inappbrowser的一个fork。它试图保留InAppBrowser的大部分功能。实际上，对于从InAppBrowser继承的功能的完整列表，请参阅InAppBrowser的文档。
此插件的目的是提供一个应用内浏览器，还可以配置为匹配您的应用程序的主题，以便为您的应用程序提供更加身临其境的外观和感觉，以及提供更一致的外观并跨平台感觉。
此插件通过调用在现有CordovaWebView顶部启动应用程序内视图
图片示例
给出几个示例图
示例一
内容正文：
1.插件的安装
cordova plugin add cordova-plugin-themeablebrowser
2.属性整体展示
cordova.ThemeableBrowser.open('http://apache.org','_blank', {
statusbar: {
color: '#ffffffff'
},
toolbar: {
height: 44,
color: '#f0f0f0ff'
},
title: {
color: '#003264ff',
showPageTitle: true
},
backButton: {
image: 'back',
imagePressed: 'back_pressed',
align: 'left',
event: 'backPressed'
},
forwardButton: {
image: 'forward',
imagePressed: 'forward_pressed',
align: 'left',
event: 'forwardPressed'
},
closeButton: {
image: 'close',
imagePressed: 'close_pressed',
align: 'left',
event: 'closePressed'
},
customButtons: [
{
image: 'share',
imagePressed: 'share_pressed',
align: 'right',
event: 'sharePressed'
}
],
menu: {
image: 'menu',
imagePressed: 'menu_pressed',
title: 'Test',
cancel: 'Cancel',
align: 'right',
items: [
{
event: 'helloPressed',
label: 'Hello World!'
},
{
event: 'testPressed',
label: 'Test!'
}
]
},
backButtonCanClose: true
}).addEventListener('backPressed',function(e) {
alert('back pressed');
}).addEventListener('helloPressed',function(e) {
alert('hello pressed');
}).addEventListener('sharePressed',function(e) {
alert(e.url);
}).addEventListener(cordova.ThemeableBrowser.EVT_ERR,function(e) {
console.error(e.message);
}).addEventListener(cordova.ThemeableBrowser.EVT_WRN,function(e) {
console.log(e.message);
});
3.属性介绍statusbar 仅适用于iOS7+。
color为RGBA Web十六进制格式设置iOS 7+的状态栏颜色。例如。#fff0f0ff。默认为白色。仅适用于iOS 7+。
toolbar
height设置工具栏的高度。默认为44。
color以RGBA网络十六进制格式设置浏览器工具栏颜色。例如。#fff0f0ff。默认为白色。另见image。
image将图像设置为标题模式下的浏览器工具栏背景。此属性引用了本机映像资源，因此它依赖于平台。
title
color以RGBA网络十六进制格式设置标题文本颜色。例如。#fff0f0ff。默认为黑色。
staticText设置标题的静态文本。此属性覆盖showPageTitle（见下文）。
showPageTitle当设置为true时，将显示当前网页的标题。
backButton
image设置后退按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
imagePressed在后退按钮处于按下状态下设置图像。此属性引用了本机映像资源，因此它依赖于平台。
align将按钮对齐到left或right。默认为left。
event当按下按钮时，将给定文本作为事件名称引发自定义事件。可选的。
forwardButton
image设置向前按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
imagePressed在其按下状态下设置正向按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
align将前进按钮对准left或right。默认为left。
event当按下向前按钮时，将给定文本作为事件名称引发自定义事件。可选的。
closeButton
image设置关闭按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
imagePressed在其按下状态下设置关闭按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
align对齐left或关闭按钮right。默认为left。
event当按下关闭按钮时，将给定文本作为事件名称引发。可选的。
menu
title单击菜单按钮时设置菜单标题。仅限iOS
cancel设置菜单取消按钮文本。仅限iOS
image设置菜单按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
imagePressed设置菜单按钮的图像处于其按下状态。此属性引用了本机映像资源，因此它依赖于平台。
event当按下菜单按钮时，将给定文本作为事件名称引发自定义事件。可选的。
align将菜单按钮对准left或right。默认为left。
items是菜单打开时要显示的项目列表
event定义当单击此菜单项时将被引发的事件名称。菜单事件的回调将接收一个包含以下属性的事件对象：url是浏览器中显示的当前URL，index是所选项目的索引items。
label定义菜单项标签文本。
customButtons是给定时将插入工具栏的对象列表。
image设置自定义按钮的图像。此属性引用了本机映像资源，因此它依赖于平台。
imagePressed将自定义按钮的图像设置为按下状态。此属性引用了本机映像资源，因此它依赖于平台。
align将自定义按钮对齐到left或right。默认为left。
event当按下自定义按钮时，将给定文本作为事件名称引发自定义事件。对自定义按钮事件的回调将接收到包含以下属性的事件对象：url是浏览器中显示的当前URL，index是所选按钮的索引customButtons。
backButtonCanClose当没有更多的返回时，允许返回按钮关闭浏览器。否则，返回按钮将被禁用。
disableAnimation当设置为true时，禁用浏览器显示和关闭动画。
fullscreen当设置为true，WebView将扩展到应用程序的完整高度，位于工具栏下方。该标志与透明工具栏颜色结合可能允许工具栏按钮浮动在WebView顶部。（记住，此插件支持RGBA颜色格式。）可选。
4.注意
1.所有属性都是可选的，几乎没有默认值。如果没有给出属性，则不会显示相应的UI元素。
2.所有的图像资源都引用了本机资源束。所以所有的图像都需要先导入本机项目。在Android的情况下，将查找图像名称R.drawable。例如。如果图像名称是hello_world，R.drawable.hello_world将被引用。您可能已经注意到，ThemedBrowser添加了可选菜单以及自定义按钮，您可以使用它们来响应一些简单的用户操作。
5.使用在任何平台
一次添加使用在所有平台（不推荐使用）。
对于任何支持的对象image和imagePressed属性，当您绝对无法导入本机源时，有一些后备属性可以使用，因为某些情况。
(\w+Button|menu|toolbar)
wwwImage就像是image加载来自Cordova的www目录的图像。当您无法导入本机资源时，这是一个后备解决方案。image尽可能使用财产。
wwwImagePressed就像是image加载来自Cordova的www目录的图像。当您无法导入本机资源时，这是一个后备解决方案。image尽可能使用财产。
wwwImageDensity当wwwImage和/或被wwwImagePressed给予时是需要的。由于这些图像没有从资源束加载，所以密度是未知的，因此密度需要由此属性设置。对应于iOS' @2x，@3x后缀。
例如：
cordova.ThemeableBrowser.open('http://apache.org','_blank', {
...
backButton: {
wwwImage: 'images/back.png',
wwwImagePressed: 'images/back_pressed.png',
wwwImageDensity: 2,
align: 'left',
event: 'backPressed'
}
...
});
6.对应平台添加图片资源
Android平台
找到图中的路径(ThemeableBrowser/plugins/cordova-plugin-themeablebrowser/src/android/res/drawable-xhdpi)，将png图标复制到如下路径中(platforms/android/res/drawable-xhdpi)。
一般放在此目录中即可，如需想要得到图标更好的拓展，自行创建不同的图标放在相应的位置。
示例截图
注意：图片中工具栏title字体有点小可以稍稍的改动。改动如下
找到图中位置，提现图中内容即可，内容如下：title.setTextSize(18);
IOS平台
IOS平台的添加稍稍有点麻烦，以下会截图一步一步来。
第一步 找到插件中图片路径
第二步 将第一步中的Resource文件夹复制在以下文件中（如果给文件夹存在则直接覆盖）
注意 “嵌套浏览器” 为APP名字
第三步 进入platform下的IOS项目中双击打开如下文件（即打开Xcode）
第四步 在再将图片文件拖拽到Xcode的如下目录中（注意次步很重要，如果忽略则没有返回按钮等）
第五步 点击运行到模拟器
按照以上的步骤走，就完成了。下面展示运行截图：
文章总结
自此，该教程结束；文中有大量的不足的地方欢迎留言指正，若有什么疑问的地方也可以大家一起探讨。整理文章不易，不喜勿喷。