开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在InAppBrowser上显示UIPickerView (Cordova)

在 Cordova 中使用 InAppBrowser 来显示 UIPickerView 是一种常见的需求，可以通过以下步骤实现：

首先，确保已经安装了 Cordova 插件 cordova-plugin-inappbrowser。可以使用以下命令进行安装：

cordova plugin add cordova-plugin-inappbrowser

在你的 Cordova 项目中，创建一个按钮或者其他触发事件的元素，用于打开 InAppBrowser。例如，可以在 HTML 文件中添加以下代码：

<button onclick="openPicker()">打开 UIPickerView</button>

在 JavaScript 文件中，编写 openPicker() 函数来打开 InAppBrowser 并加载 UIPickerView。以下是一个示例代码：

function openPicker() {
  var inAppBrowserRef = cordova.InAppBrowser.open('picker.html', '_blank', 'location=no');
  
  inAppBrowserRef.addEventListener('loadstop', function() {
    // 在加载完成后，执行 JavaScript 代码来显示 UIPickerView
    inAppBrowserRef.executeScript({
      code: 'showPicker();'
    });
  });
}

创建一个名为 picker.html 的 HTML 文件，用于在 InAppBrowser 中显示 UIPickerView。在该文件中，可以使用 HTML、CSS 和 JavaScript 来创建和配置 UIPickerView。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>UIPickerView</title>
  <style>
    /* 样式配置 */
  </style>
</head>
<body>
  <div id="pickerContainer"></div>

  <script>
    function showPicker() {
      // 使用 JavaScript 代码创建和配置 UIPickerView
      // 可以使用第三方库或者自定义代码来实现 UIPickerView 的功能和样式
    }
  </script>
</body>
</html>

通过以上步骤，你可以在 Cordova 应用中使用 InAppBrowser 来显示 UIPickerView。根据具体需求，你可以根据自己的喜好和项目要求来自定义 UIPickerView 的样式和功能。

推荐的腾讯云相关产品：腾讯云移动应用分析（MTA），该产品提供了丰富的移动应用数据分析功能，可以帮助开发者深入了解用户行为和应用性能，优化应用体验。了解更多信息，请访问腾讯云移动应用分析官方网站：https://cloud.tencent.com/product/mta。

相关搜索:Cordova InAppBrowser插件在iOS上显示空白屏幕在createObjectURL InAppBrowser上打开Cordova Blob Inappbrowser cordova不显示顶部栏 Cordova InAppBrowser EventListeners在ios上不工作 Cordova InAppBrowser executeScript()在iOS中未触发回调 Cordova inAppBrowser :显示自定义标题，而不是页面的URL 如何在Inappbrowser Cordova上以文件形式处理下载或响应在iOS上的Cordova inAppBrowser中executeScript的执行不一致表单POST数据通过cordova inappbrowser在WKWebview中失败 Adsense广告不会显示在cordova webview上 Cordova InAppBrowser -无法显示PDF文件，因为在Android中没有内置的PDF浏览器。cordova admobpro广告在Android设备上不显示使用cordova在模拟器上显示白屏在UIToolBar上使用Done按钮关闭UIPickerView 通过HTML在Mobile Safari上实现UIPickerview UIPickerView在Android上看起来很像在cordova webview顶部显示UIButton 在IOS上使用cordova显示本地文件系统镜像 ionic cordova build --device --release ios在Cordova 9上失败无法在Cordova iOS上显示来自外部域的图像

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【移动端】cordova在app中打开外部链接——cordova-plugin-inappbrowser

_self：如果URL地址在WhiteList中，则用Cordova的WhiteList将其打开；

03

cordova插件封装android常用命令

删除插件： cordova plugin remove +插件名（cordova-plugin-inappbrowser 4.1.0 "InAppBrowser"）展示已经安装的插件列表： cordova plugin ls 安装插件： cordova plugin add cordova-plugin-inappbrowser 打包Android命令: debug包--cordova bulid android 正式包--cordova build --release android 卸载平台：

02

ionic 中 cordova-plugin-inappbrowser组件的使用

在上一篇文章中（使用Ionic3创建原生app系统入门）介绍了如何使用ionic构建一个Android app 项目,并生成apk安装包。

02

cordova插件之InAppBrowser

场景 Cordova插件InAppBrowser用于在移动端打开url链接使用步骤安装插件 cordova plugin add cordova-plugin-inappbrowser 使用插件方法 window.cordova.InAppBrowser.open("你要打开的url", '_system', 'location=no,hidden=yes'); 参数说明 _system:系统自带浏览器打开 _blank:app内webview打开 hidden：是否隐藏打开的url链接

02

cordova插件- Inappbrowser

添加插件 $ cordova plugin addcordova-plugin-inappbrowser 插件的使用 Methods cordova.InAppBrowser.open 2. Ex

04

cordova Android中webview加载第三方https链接中的http图片不显示解决方法

cordova生成的android app在引入第三方的https网址时候，里面有图片是http链接形式加载的，这样会导致此图片不能正常显示，如图：

Cordova插件使用——Themeablebrowser数据花式交互

Themeablebrowser是一个外部浏览器插件，它fork自inappbrowser，相比于后者，此插件的目的是提供一个可以与你的应用程序的主题相匹配的in-app-browser，以便给你的应用保持一致的外观和感觉。所以，除了一些主题化的配置外，核心部分使用参考inappbrowser文档。

04

构建具有用户身份认证的 Ionic 应用

使用 Okta 和 OpenID Connect (OIDC)，可以很轻松的在 Ionic 应用中添加身份认证，完全不需要自己实现。 OIDC 允许你直接使用 Okta Platform API 进行认证，本文的目的就是告诉你如何在一个 Ionic 应用中使用这些 API。我将演示如何使用 OIDC 重定向、Okta 的 Auth SDK 以及基于 Cordova 内嵌浏览器的 OAuth 进行登录；由于功能还在开发中，所以省略了用户注册。

00

【IOS 开发】基本 UI 控件详解 (UIDatePicker | UIPickerView | UIStepper | UIWebView | UIToolBar )

转载注明出处 : http://blog.csdn.net/shulianghan/article/details/50348982

04

iOS-UIPickerView详解iOS-UIPickerView详解UIPickerView的代理方法

iOS-UIPickerView详解 // pickView初始化并设置其大小，如果不设置其大小，默认大小为 320 * 216。 UIPickerView *pickView = [[UIPickerView alloc]initWithFrame:self.view.frame]; // 显示选中指示器，有一个透明的覆盖在选中航，默认是NO，iOS7 之后总是显示选中指示器，设置这个属性没有影响。 pickView.showsSelectionIndicator = YES; //在iOS 7之后可以自

06

构建具有用户身份认证的 Ionic 应用

序言：本文主要介绍了使用 Ionic 和 Cordova 开发混合应用时如何添加用户身份认证。教程简易，对于 Ionic 入门学习有一定帮助。因为文章是去年发表，所以教程内关于 Okta 的一些使用步骤不太准确，但是通过 Okta 的官网也可以找到对应的内容。另外，使用 npm 安装 Ionic starter 模板可能会有安装失败的情况，建议不要在这方面浪费太多时间，可以直接在 Ionic 的 GitHub 仓库中下载 starter 模板。原文：How to Sprinkle ReactJS i

05

【开源】慢速 UIPickerView 动画实现

【Github】https://github.com/OpenMarshall/SlowPickerView

02

在 Xamarin.iOS 项目中访问 ArcGIS 云端专题数据图层

本文介绍如何在 Xamarin.iOS 项目中使用使用 ArcGIS Server 云端专题数据，假设你已经准备好了 ArcGIS Client Runtime SDK for iOS 和 MonoTouch.ArcGIS 绑定项目。

02

iOS选择器视图控件(UIPickerView)使用方法总结

UIPickerView是iOS中的原生选择器控件，使用方便，用法简单，效果漂亮。

02

使用 Cordova 构建应用的流程

Cordova 应用程序有几个组件。下图展示了 Cordova 应用程序体系结构的高级视图。

01

开发Hybrid App的技术选型

如果我们把Hybrid App理解为运行在android或者ios以及其他移动终端设备上的应用，也可以叫做H5 APP，这种开发应用的模式结合web开发技术与Native开发的部分技术，通常也被称为混合开发模式。

03

iOS开发之城市选择器

城市选择器，借助于UIPickerView来实现，第一列为省份，第二列为第一列省份对应的城市或者区，数据放在plist中，plist结构如下图所示，第一层是一个Dictionary，每个省份对应的城市

08

[iOS] 圆形进度条及计时功能

用的贝塞尔曲线UIBezierPath来画，这个类支持画很多种形状，可以单独去尝试。

02

支付宝网页wap支付接入

vue封装成H5 app的时候我的思路是将承载页面放在webview中加载而不是直接window

03

iOS学习——UIPickerView的实现年月选择器

最近项目上需要用到一个选择器，选择器中的内容只有年和月，而在iOS系统自带的日期选择器UIDatePicker中却只有四个选项如下，分别是时间（时分秒）、日期（年月日）、日期+时间（年月日时分）以及倒计时。其中并没有我们所需要的只显示年月的选择器，在网上找了很多相关的资料，但是觉得都写得过于麻烦。因此，为了满足项目需求，自己用UIPickerView写了一个只显示年月的选择器界面，同时还可以控制我们的显示的最小时间。当然，如果要控制其他内容也都是可以的，无非就是在数据处理上多一些处理和控制。 typed

Flutter实现webview与原生组件组合滑动的示例代码

最近在用Flutter写一个新闻客户端, 新闻详情页中的内容需要用Flutter的本地Widget和WebView共同展示 . 比如标题/上方的视频播放器是用本地Widget展示, 新闻内容的富文本文字使用webview展示html, 这样就要求标题/视频播放器与webview可以组合滑动 .

02

RSSHelper正式开源

试过一些RSS订阅app，有些重要源无法解析，例如FEX周刊、奇舞周刊、国外站点等等。另外，对于没有提供RSS的网页，也没有办法订阅，所以决定自己搓一个：

05

UI篇-UIResponder之事件传递和响应精析

这篇文章只讨论触摸事件。对于触摸事件UIResponder内部提供了以下方法来处理事件：

03

【开源】用 UIPickerView 选择精确到街道的中国行政区划位置

如图，做了一个四列的 UIPickerView，可以滑动选择精确到街道的中国行政区划信息，并返回地址，使用简单，直接像平时使用 UIPickerView 一样，设置好 frame，添加进父视图就好了。

03

UIPickerView显示和隐藏的动画

- (void)ViewAnimation:(UIView*)view willHidden:(BOOL)hidden { [UIView animateWithDuration:0.3 animations:^{ if (hidden) { view.frame = CGRectMake(0, [UIScreen mainScreen].bounds.size.height, [UIScreen mainScreen].bounds.size.wi

03

ionic莫名其妙的“cordova/platform_metadata”

我的Cordova升级到8已经很久了，而且在此环境下原有的项目跑得好好的，所以别人说有问题需要把Corodva降级到7.1或者7.0时，我不置可否。

02

iOS开发之-cordova项目创建

1.选择创建项目的目录 $ cd desktop 这里选择的是桌面，可以根据自己实际情况选择目录 2. 创建项目 $ cordova create hello com.example.hello HelloWorld ParameterDescription Notes hello参数是必填将为你的项目生成一个hello目录 www子目录是应用程序的主页，以及各种资源(css,js,img)，遵循共同的web开发文件命名规范。这些资源将存储在设备上的本地文件系统，而不是远程服务。config.xm

06

Cordova-创建你的第一个App 原

1、下载和安装Node.js。安装完成后你可以在命令行中使用node 和npm（查看版本node -v ,npm-v）

03

iOS下JS与OC互相调用（七）--Cordova 基础

在介绍Cordova之前，必须先提一下PhoneGap。PhoneGap 是Nitobi软件公司2008年推出的一个框架，旨在弥补web 和iOS 之间的不足，使得web 和 iPhone SDK 之间的交互更容易。后来又加入了Android SDK 和BlackBerry SDK，再然后又陆续加入了更多的平台。但是在2011年，Nitobi公司被Adobe收购，PhoneGap也被提交到Apache Incubator。由于Adobe现在拥有PhoneGap商标，PhoneGap v2.0版产品就更名为Apache Cordova。据说Cordova是Nitobi团队当时坐落的街道名称，用此名来纪念Nitobi团队的贡献。Apache Cordova是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。

02

Cordova插件须知

ionic可以很方便的安装cordova插件，最新ionic-cli要求cordova插件里面有package.json和plugin.xml才能安装成功，如果缺失，请自行补上，而原来旧的cli不要求package.json文件（插件目录里的，不是ionic项目里的）。

03

【技巧】ionic3优雅解决启动前、后黑白屏问题

启动前黑白屏问题，仅存在于android，是android应用的通病，ionic表示这锅它不背。具体操作时，当我们点击桌面图标启动APP时，有时会闪一下黑色背景，有时黑色背景时间还比较长。原因是：

06

基于Vue+cordova开发webapp并调用Native功能实践

安装cordova，安装vue-cli: npm i cordova -g，npm i -g vue-cli 。

02

ionic和cordova初探--从安装到运行首个app

好多人说ionic好用，一直要推荐我用，我就不信了，来安装玩一下试试效果。实践出真知！安装过程各种坑，工具太多了，太麻烦了，差点放弃（还好坚持下来呢）。

01

让Android做出IOS的风格来！

我们在做webApp 开发的时候，经常会碰到下拉菜单，二级甚至三级菜单联动的需求。通常我们会用iscroll模拟个可以弹性滚动的选择框，然后每次根据选择自己写一些回调逻辑。

02

Cordova封装打包vue H5项目到Android平台详解

要在index.html中引入cordova.js，不然后续所有的插件都不能使用！

05

Cordova插件使用——Office文档在线预览那些事

第一种方式，有两种实现方法，一是使用在线的接口（如谷歌、微软……但前者被墙，后者付费使用，当然也可以自己部署个接口处理转换，不想特别折腾也可以用微软的office web apps），二是使用第三方的库，在客户端处理好再显示，但据我个别试用，效果不是很完美。

04

cordova与nodejs

安装nodejs建议使用nvm来进行安装因为nvm来切换nodejs的版本是一个非常方便有效的功能也可以通过npm来进行安装先简单分析一下三者之间的关联 nvm:nodeJs版本管理工具,管理nodejs版本和npm版本 nvm管理构建nodejs和对应的npm, npm管理对应nodejs的第三方插件

04

Cordova插件开发——滑动手势解锁（iOS篇）

第一次正儿八经的参与Cordova的项目，想写下些文字，以便日后需要的时候能够帮助自己快速回忆起来，同时也希望能够帮到需要的朋友。

01

Cordova封装打包vue H5项目到Android平台详解

要在index.html中引入cordova.js，不然后续所有的插件都不能使用！

ionic2 编译打包的坑，

Could not find an installed version of Gradle either in Android Studio, or on your system to install the gradle wrapper. Please include gradle in your path, or install Android Studio

03

cordova开发环境搭建

最近我在尝试了解跨平台技术的发展，首先则是想到了cordova。本文简单记录下cordova环境搭建的过程。

03

Vue3.0入门 + Vant3.0移动端实践（三）使用Cordova打包Android App

接着上面两节，把做成的h5小应用打包成android的app放置在手机上看看效果。

02

【开发指南】（六）Ionic3从目录结构理解开发

对比目前其它流行的js框架，个人觉得其分工明确、清晰好理解，我觉得就算一开始头脑一遍空白的新手，对他讲解过一次后都能有个大致印象。

01

Cordova（工具）- Config.xml详解

Config.xml是 cordova项目的一份全局性配置文件能够控制整个项目的一些全局性配置为了方便cordova CLI 的使用，config.xml放在了这里 , 其实就是项目根目录下

04

cordova学习四插件集成

4.1插件添加插件集成命令在项目的根目录比如myapp则是在../myapp这个目录下一般集成插件都是在github也可以是下载好的 cordova plugin add gitHub地址/自己文件夹路径使用插件应该注意的问题：看plugin.xml文件下对平台的支持，必须在其具备的环境下插件才能后正常运行，插件的使用法在github上作者一般都会示例 4.2插件移除插件移除命令：cordova plugin rm 插件名显

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭