首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在InApp浏览器中显示的Web App上调用Cordova插件

Cordova插件通常只能在Cordova应用的主WebView中使用,而不能在InAppBrowser中使用。这是因为InAppBrowser是一个独立的WebView,它没有加载Cordova环境。

然而,你可以使用一些间接的方法来实现这个功能。例如,你可以在主WebView中监听InAppBrowser的事件,然后在事件处理器中调用Cordova插件。以下是一个例子:

代码语言:javascript
复制
var ref = cordova.InAppBrowser.open('http://apache.org', '_blank', 'location=yes');

ref.addEventListener('loadstop', function() {
    // 在InAppBrowser加载完毕后调用Cordova插件
    cordova.plugins.somePlugin.someFunction();
});

在这个例子中,我们首先打开了一个InAppBrowser,然后添加了一个loadstop事件监听器。当InAppBrowser加载完毕后,事件处理器会被调用,然后我们在事件处理器中调用了Cordova插件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Hybrid App 应用开发 5 个必备知识点复习

三者大致关系如下: [关系图] 1.2 Web App Web App,即移动端网站,一般指的是基于 Web 应用,基于浏览器运行,无需下载安装,基本可以说是触屏版网页应用。...优点: 学习和开发成本较低,可以跨平台,调试方便; Hybrid 开发模式下,由原生提供统一 API 给 JS 调用,实际主要逻辑由 HTML 和 JS 完成,最终放在 webview 显示,...,既不像原生那么好调试,也不像纯web那种调试; 三、Cordova 插件原理是什么 Cordova 插件就是一些附加代码用来提供原生组件 JavaScript 接口,它允许你 App 可以使用原生设备能力...Cordova iOS 实现原理: [cordova] 3.1 工作流程 Cordova 发起对原生请求: cordova.exec(successCallback, failCallback...gap_exec 的话,则认为是 Cordova 通信请求,直接拦截,拦截后就可以通过分析请求数据,分发到不同插件类(CDVPlugin 类子类)方法: [iOS] Cordova 优先使用这种方式

2.2K00

【Hybird】274-Hybird App 应用开发 5 个必备知识点复习

三者大致关系如下: 1.2 Web App Web App,即移动端网站,一般指的是基于 Web 应用,基于浏览器运行,无需下载安装,基本可以说是触屏版网页应用。...一般 Hybrid 跨平台最少可以跨三个平台: Android App ,iOS App ,普通 webkit 浏览器。...,也不像纯web那种调试; 三、Cordova 插件原理是什么 Cordova 插件就是一些附加代码用来提供原生组件 JavaScript 接口,它允许你 App 可以使用原生设备能力,超越了纯粹...Cordova iOS 实现原理: 3.1 工作流程 Cordova 发起对原生请求: cordova.exec(successCallback, failCallback, service,...gap_exec 的话,则认为是 Cordova 通信请求,直接拦截,拦截后就可以通过分析请求数据,分发到不同插件类(CDVPlugin 类子类)方法Cordova 优先使用这种方式,

1.3K30

基于React-Native0.55.4语音识别项目全栈方案

调用Web API多媒体采集接口需要特定Web API多媒体接口是WebRTC技术PC端实现,由于多媒体采集涉及到用户隐私,所以浏览器调用这个接口需要在安全域下才能被调起,安全域是指以下三类...2.1 WebView 方案: 一个app单页面全屏放置一个WebView组件,然后加载https方式部署web应用。 理由: 手机浏览器无法支持情况下,只能寄希望于WebView。...cordova基本原理是将一般UI层操作和功能放在WebView里实现,需要调用移动设备硬件或原生接口时,均通过添加cordova插件形式来实现,每一个cordova版本都会横跨支持若干个Android...另外,cordova是拥有crosswalk插件,可以直接以插件形式,cordova项目打包时加入crosswalk,有相关需求读者可以以一试,尤其是团队里没有Android开发人员也没有专门设计人员时候...测试结果: 笔者曾在使用cordova3.3时候就融入过crosswalk,也通过cordova插件成功调用过底层GPS,摄像头及其他一些原生组件,当时是为了适配Android4.4版本。

3.6K30

使用 Cordova 构建应用流程

Web App 这是应用程序代码驻留部分。...cordova-plugin-app-version 该插件可以获取设备信息版本号 cordova-plugin-inappbrowser 在你应用程序显示有用文章、视频和网络资源。...在这个函数,我们调用插件API提供 navigator.camera 全局对象。如果拍摄成功,数据将被发送到 onSuccess 回调函数,如果没有,将显示带有错误信息警报。...>, []); 这将从 WebView 向 Android 本地端封送一个请求,通过 args 数组传递附加参数,有效地调用服务类 action 方法。...运行以下命令重建应用程序,并在特定平台模拟器查看它: $ cordova emulate android 接下来使用 cordova emulate 命令刷新模拟器映像以显示最新应用程序,现在可以主屏幕启动

4.2K11

开发Hybrid App技术选型

技术开发 Web Appweb应用,网页三剑客html+css+js Native App开发依旧是移动应用主导,但如今Native App或多或少会嵌入一些web页面,诸如淘宝、京东等APP,所以如今真正意义原生应用又该如何去定义呢...webview 使用是手机自带浏览器内核,一般来说,手机厂家在内置浏览器时候都会对其内核做一定修改,所以webview渲染内容可能或有些差异,但是这基本不影响APP开发。...Hybrid App只有一套美术UI情况下应当如何处理以适配不同机型呢? 媒体查询、百分比,或是直接使用web端常用单位px、em、rem以及vh、vw,都是常用适配方案。...,chrome浏览器,默认font-size值为16px:即16px=1rem getComputedStyle(document.getElementsByTagName("html")[0...文件夹存放诸如android、ios等各端文件; node-modules文件夹自然是依赖各个模块 config.xml是项目的配置文件,你添加插件将会在里面显示,如状态栏插件,你可以添加更多插件

2.5K30

跨平台开发框架和工具集锦

(一)Web App网页 智能机还没有出来之前,其实就有适用于手机端网页了。Web App其实不算是严格意义App,我觉得应该把它称作网页端自适应移动版更合适。...PWA是Google主推一项技术标准,FireFox,Chrome以及一些基于Blink浏览器已经支持渐进式Web应用了,Edge对渐进式Web应用支持正在开发,Apple公司也表示Safari...浏览器支持PWA。...)最常用本地API调用,然后以统一Javascript API形式提供给Web开发者调用。...Cordova自带丰富命令操作,使用命令行可以创建类似于Web App页面,浏览器查看我们创建项目,同时如果我们使用命令行将项目移动端编译运行,也是可行,这也是Cordova项目很独特地方

3.9K30

混合应用开发框架Cordova源码学习总结

,当前行业应用主要是开发周期相对长,采用WEBVIEW方式来开发,通用基础则框架基础,则能缩短UI开发时间,提升交付效率;但对WEBVIEW开发应用体验提升,是我们当前需要解决最大问题...APP开发框架,旨在让开发者使用HTML、JavaScript、CSS等Web API开发跨平台移动平台应用程序;主要提供了用JavaScripte访问移动平台API能力;Ionic则是可以使用HTML5...依托Android原生WebView,Cordova库有源码,并提供了可扩展JS和本地库之间互相调用插件功能,便于后续扩展开发;但从WebView之间切换性能优化来看,体验不如原生应用,仅适合单页面的展示类应用...使用MUI框架,可以简单方便开发出高性能APP,同时MUI也可以自动适应没有HTML5+环境普通浏览器,降低为普通WEB APP。...从MUI提供SDK来看,前端控件非常全,能满足常用行业应用开发;但需要依托HTML5+规范能力,否则会降低为普通WEB APP; 缺点:MUI Android SDKlib库只有jar包,对于不支持

85110

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

应用实现是通过web页面,默认本地文件名称是是index.html,这个本地文件应用CSS,JavaScript,图片,媒体文件和其他运行需要资源。应用执行在原生应用包装WebView。...简单来说就是:使用Cordova这个框架可以让你支持混合应用开发,把h5web应用打包成各种平台上能跑类似原生应用体验。且它还提供了一些访问平台设备插件或api,方便使用js访问到硬件功能。...Hybrid App(混合模式移动应用)兼具“Native App良好用户交互体验优势”和“Web App跨平台开发优势”所以很流行。...第四步,浏览器运行 cordova run : cordova run 5.第五步,打包apk安卓运行,生成安卓包 cordova platform add android (前提条件:电脑已有...\wrapper\dists 系统变量 变量名输入 GRADLE_HOME 然后继续在下方系统变量中找到Path变量,点击编辑-编辑文本,Path变量值后面添加;%GRADLE_HOME

2.2K21

几款移动跨平台App开发框架比较

; 继承自 Cordova,可以使用 Cordova 插件; Ionic可以在网络运行任何地方运行 – iOS,Android,浏览器,电子,PWA等; 浏览器支持; 缺点: Angular JS...学习路线陡峭; Ionic 框架相比于原生 Cordova 有所差异,Cordova 某些官方插件可能不适用于Ionic; React Native 优点: 能够Javascript和React基础获得完全一致开发体验...就是针对不同平台需要些多套代码; Cordova 优点: 开源免费,社区生态成熟,插件丰富; 支持离线场景应用; 开发工具选择空间大; iOS和Android基本可以共用代码,纯web思维,开发速度快...跨平台更多;(一套代码,多端发行;优雅一个项目里调用不同平台特色功能!)...例如,用Wex5开发,或者Wex5体系中使用外部组件,都很难复用; Model:容易混淆,传统意义model只是提供数据模型操作,但是wex5model有点乱用,中间不但夹杂有业务逻辑,还混合了视图操作

7.3K20

【开发指南】(六)Ionic3从目录结构理解开发

ionic命令行生成为原始静态html页面,并存放在www目录(见上图所示),也就是说www开发过程是不需要理,可以任意删除。...当我们想部署网页时,只需把www目录拷贝到网站服务器即可;当我们想打包app时,命令行执行打包指令会生成一个调用浏览器插件原生项目,同时把www目录拷贝到项目中,浏览器插件入口网页指向wwwindex.html...一些需要原生需求目的,或者基于性能要求目的,ionic提供了很方便调用原生(利用Cordova使用接口,包含配置和扩展,那就是第一张图里其它目录角色(黑色粗体为重要项): hooks:cordova...插件(通过ionic cordova plugins ls查看,通过ionic cordova plugins add/remove 插件名或路径来添加/删除); resources :android...而压缩打包混淆等都是ionic框架内部处理了,所以我们只需专注于页面的实现,那最最简单开发步骤就是,pages里面新建一个页面,写好逻辑,然后app.module.ts添加配置即可。

2.7K10

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

如果你需要开发原生功能,使用 web 技术是无法实现,但是有些原生插件可以实现。 Ionic Native 是这些插件精选集。 我第一次使用 Ionic 是 2013 年底。...你可以使用 Chrome 设备模式查看应用程序 iPhone 6 效果。 ? 使用 Ionic serve 命令特点是它会在浏览器显示编译错误,而不是(有时会隐藏)开发控制台。...为了自动激活键盘,你需要告诉 Cordova 没有用户交互情况下显示键盘是可以。你可以根路径 config.xml 添加以下代码。...app/pages/login/login.html,用一个 包裹 ,为了只浏览器运行时显示登录表单。...这意味着你可以将 Ionic app 部署成 web app (不是移动端 app) ,它可以离线 支持 service workers 浏览器 运行。

23.8K00

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

如果你需要开发原生功能,使用 web 技术是无法实现,但是有些原生插件可以实现。 Ionic Native 是这些插件精选集。 我第一次使用 Ionic 是 2013 年底。...你可以使用 Chrome 设备模式查看应用程序 iPhone 6 效果。 ? 使用 Ionic serve 命令特点是它会在浏览器显示编译错误,而不是(有时会隐藏)开发控制台。...为了自动激活键盘,你需要告诉 Cordova 没有用户交互情况下显示键盘是可以。你可以根路径 config.xml 添加以下代码。...app/pages/login/login.html,用一个 包裹 ,为了只浏览器运行时显示登录表单。...这意味着你可以将 Ionic app 部署成 web app (不是移动端 app) ,它可以离线 支持 service workers 浏览器 运行。

23.2K50

搞定混合开发面试,这一篇就够了!

上面的定义是百度百科官话,用白话文翻译就:所谓hybridApp就是app嵌入web页面 兴起原因 之所以Hybrid App会兴起并且红极一时, 其实段移动互联网产业一种偶然。...Hybrid App像刺客一样,Native AppWeb App混战之时,偶然间移动应用开发领域占有了一席之地。(引用百度) 优势和劣势 一张图说明问题: ?...Cordova 主要提供三种能力: 前端代码与原生代码通信能力; 原生插件机制; 跨平台打包能力。 cordova是一个移动应用开发框架,你基于这个东西可以用网页代码作出APP。...衍生应用开发平台 针对 Cordova 存在问题,一些厂商给出了一种优化方案,并且给出友好文档,但是本质还是 Cordova 基础做了以下几点改进: 以云平台方式管理项目,整个开发周期除了写代码以外都能在平台上实现...其实JSBridge说白了就是去除了各大混合开发平台封装一条龙服务,而只保留了web和Native通信部分,去appwebview嵌入web,来解决原生端解决不了问题,比如:原生无法解析富文本

2.5K20

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

URL参数为浏览器跳转地址;   2. target参数有三种:      _self:如果URL地址WhiteList,则用CordovaWhiteList将其打开;      _blank...:直接在App中将其地址打开;      _system:则是用手机默认浏览器将新页面打开;   3. options参数包含以下信息:      location:设置为yes或no来打开或关闭插件...locationbar;      hidden:设置为yes则加载出页面但不显示;设置为no则正常加载页面;     Android独有属性:     zoom:设置为yes则显示缩放浏览器页面的按钮...,设置为no则不显示缩放按钮;     hardwareback:设置为yes则调用Android返回键回到前一界面,设置为no则返回键为退出浏览器页面;     iOS独有属性:     closebuttoncaption...Android返回键功能);     keyboardDisplayRequiresUserAction:设置为yes或者no来控制打开键盘时是否通过JavaScript调用focus()接收焦点,默认为

1.9K30

移动开发跨平台技术演进

Web App Web App是指基于Web应用,运行于网络和标准浏览器,相当于一个网页然后加一个App壳。...2014年HTML5标准规范制定完成,在网络舆论Web App大有取代Native App气势,但Web App有以下缺点,使得它始终是“主角心,配角命” : 性能低,操作体验不好 无法调用原生...API,很多功能无法实现, 依赖于网络,网速慢时体验很差,并且没有离线功能,优化不好的话会消耗流量 只能做为一个临时入口,用户留存率低 Web App基础,又出现了几个进化者,这里主要介绍PWA...3.1 Cordova 说到Cordova,不得不提到他前身PhoneGap,PhoneGap面向Web开发人员,通过使用HTML、CSS和Javascript构建跨平台App。...5.png Cordova同样使用WebView来展示界面,插件Cordova不可或缺一部分,Apache Cordova维护了名为Core Plugins插件,这些核心插件App提供访问设备功能

3.2K20

写给前端工程师看,移动应用选型指南

它好像是某种程度上说,只有你应用是用原生 Android 和 原生 iOS 代码编写时,它才能算是一个移动应用——你用 JavaScript 写应用,怎么能算得上是移动 APP 应用呢?...自那以后,有相当多移动 APP 应用是使用 Web 来开发——据混合应用开发框架 Ionic 官网显示,已经有超过 400 万个应用使用 Ionic 来构建。...诸如 Ionic 这样框架,不仅封装了不同系统 UI,还提供了 ngCordova 方案——封装第三方原生插件。...如旧 Android 设备(PS:Android 4.4 以下版本)浏览器,其性能比较低,并且不兼容一些标准,如不支持 SVG。...浏览器自带 JavaScript 引擎效率低 DOM 操作效率低,导致页面卡顿。 今天混合应用开发技术,已经成熟得不能再成熟了,人们开始追求性能上一些突破。

2.1K60

客户端软件GUI开发技术漫谈:原生与跨平台解决方案分析

随着Flash浏览器节节败退,Air也悄无声息消失了大众视野当中。...具体包括  Web App层是开发人员编写代码主要地方,应用程序以网页形式呈现,一个index.html本地页面文件引用所需要各种Web资源,如CSS、JavaScript、图像、影音文件等...对于使用cordova cli初始化web app 主目录下会存在一个config.xml,其中包含了整个app一些基本信息:比如appName、app入口文件、白名单、webview初始化一些配置...例如,Android平台是通过WebView控件实现web页面的呈现。 Plugins主要用于JavaScript代码调用各平台native功能。...对于webapp开发者来说,无需关注系统底层调用实现细节,也就实现了所谓“跨平台”。实际,各平台涉及到本地能力调用,以插件形式被封装了。(每个插件实现实际还是Native模式)。

14.4K30
领券