Ionic--调用手机自带的浏览器

问题:打开应用时,出现倒计时的广告页面。点击这个广告,无效果。

解决方法:

  一、进入该项目目录,安装插件。

       ionic plugin add cordova-plugin-inappbrowser

       插件详情:https://www.npmjs.com/package/cordova-plugin-inappbrowser

  二、给广告效果添加点击事件。

       如:

          $scope.open=function () {

               window.open('http://baidu.com', '_blank', 'location=yes');

           }

 

   三、参考资料:

      1.资料地址https://www.npmjs.com/package/cordova-plugin-inappbrowser

      2.   window.open(url, target, options);

         2.1  url:声明了要在窗口中显示的文档的 URL地址。

         2.2  target:

                   _blank -- 在新窗口中打开链接 

                   _self -- 在当前窗体打开链接,此为默认值

                   _system:在系统的Web浏览器中打开。

         2.3  options:

                   可选,默认为: location=yes

            如:

               window.open('http://baidu.com', '_blank', 'location=yes');

 

2.3.1 所有的平台都支持以下值:

location:设置为yes或no,打开InAppBrowser地址栏中打开或关闭。

                 hidden:设置为yes以创建浏览器和加载页面,但没有表现出来。该loadstop事件触发时加载完成。省略或设置为no(默认值)让浏览器打开并正常加载。

 

 如:

window.open('http://baidu.com', '_blank', 'hidden=yes');

 

     2.3.2 仅适用于Android

 clearcache:设置为yes有浏览器的cookie缓存中清除打开新的窗口前。

                  clearsessioncache:设置为yes有会话cookie缓存中清除打开新的窗口前。

                  zoom:设置为yes,以显示Android浏览器的缩放控制,设置为不隐藏起来。默认值是yes。

 hardwareback:设置为yes使用手机后退按钮通过InAppBrowser历史向后导航。如果没有前一页面,所述InAppBrowser将关闭。默认值是肯定的,所以如果你想后退按钮直接关闭InAppBrowser则必须将其设置为no。

mediaPlaybackRequiresUserAction:设置为yes,以防止HTML5的音频或视频自动播放(默认为无)。    

2.3.3 仅适用于iOS

closebuttoncaption:设置为一个字符串作为完成按钮的标题来使用。请注意,您需要自己本地化此值。

                  disallowoverscroll:设置为YES或NO(缺省值为NO)。开启/关闭的UIWebViewBounce属性。

                  clearcache:设置为yes有浏览器的cookie缓存中清除打开新的窗口前。

                  clearsessioncache:设置为yes有会话cookie缓存中清除打开新的窗口前。

                  toolbar:设置为yes或no打开工具栏或关闭InAppBrowser(默认为yes)

                  enableViewportScale:设置为yes或no通过元标记防止结垢视(默认为no)。

                  mediaPlaybackRequiresUserAction:设置为yes,以防止HTML5的音频或视频自动播放(默认为no)。

                  allowInlineMediaPlayback:设置为yes或no,允许在线HTML5的媒体播放,浏览器窗口,而不是特定于设备的播放界面内显示。该HTML的视频元素还必须包括WebKit的playsinline属性(默认为no)

                  keyboardDisplayRequiresUserAction:设置为yes或no当表单元素通过JavaScript  focus() 调用(默认为yes)接收焦点打开键盘。

                  suppressesIncrementalRendering:设置为yes或no等到所有新视图的内容被渲染(默认为no)之前收到。

                  presentationstyle: 设置为pagesheet(它的宽度是固定的768点,在iPad竖屏情况下则全屏呈现), formsheet (它的是固定的540x620点,无论是横屏还是竖屏情况下呈现尺寸都不会变化。)或者 fullscreen(全屏状态,是默认呈现样式,iPhone只能全屏呈现。),设置演示风格(默认为 fullscreen).

                  transitionstyle:设置为fliphorizontal、crossdissolve或coververtical设置过渡方式(默认为coververtical)。

                 toolbarposition:设置顶部或底部(默认为底部)。原因工具栏是在窗口的顶部或底部。

 

              2.3.4 仅适用于Windows

 

 fullscreen: 设置为yes 就会创建一个没有边框的浏览器控件,请注意,如果指定 location=no的话,也就没有呈现给用户关闭选项卡窗口的控制。

 

转载于:https://my.oschina.net/lwenhao/blog/1517803

要在 Ionic-Angular 应用程序中打开手机的图库并在页面中显示图像,可以使用 Cordova 插件 "cordova-plugin-filechooser" 和 "cordova-plugin-filepath"。 首先,在终端中进入 Ionic-Angular 项目的根目录,运行以下命令来安装这两个插件: ``` ionic cordova plugin add cordova-plugin-filechooser npm install --save @ionic-native/file-chooser ionic cordova plugin add cordova-plugin-filepath npm install --save @ionic-native/file-path ``` 然后,在你的组件中导入 `FileChooser` 和 `FilePath`: ```typescript import { FileChooser } from '@ionic-native/file-chooser/ngx'; import { FilePath } from '@ionic-native/file-path/ngx'; ``` 接下来,在组件的构造函数中注入 `FileChooser` 和 `FilePath`: ```typescript constructor( private fileChooser: FileChooser, private filePath: FilePath ) {} ``` 在你的页面中添加一个按钮,当用户点击该按钮时,调用 `openGallery` 方法来打开图库: ```html <ion-button (click)="openGallery()">打开图库</ion-button> ``` 在组件中实现 `openGallery` 方法: ```typescript async openGallery() { try { const uri = await this.fileChooser.open(); const filePath = await this.filePath.resolveNativePath(uri); this.imageSrc = filePath; } catch (e) { console.error(e); } } ``` 在这个方法中,我们使用 `FileChooser` 来打开图库并返回图像的 URI。然后,我们使用 `FilePath` 来将 URI 转换为本地文件路径。最后,我们将图像路径赋值给 `imageSrc` 变量,以便在页面中显示。 在页面中添加一个 `img` 元素来显示图像: ```html <img [src]="imageSrc"> ``` 现在,当用户点击 "打开图库" 按钮时,将会打开图库并选择一个图像。选中的图像将会显示在页面上的 `img` 元素中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值