web

概述

用于显示在线的 html 页面,在 webview 的 useragent 后追加内容,格式是 hap/<平台版本号>/<厂商标识> <平台应用包名>/<平台应用版本号> <应用名>/<应用版本号> (<来源信息>)。“来源信息”与 app 接口的 getInfo 方法返回结果中的 source 字段相同。

使用 web 组件,必须声明"打开网页"接口,否则会提示缺乏权限。

1010+ 支持上传文件,不支持多选。 1020+ 支持下载文件。 1040+ 支持定位。

由于各厂商系统 webview 已不再支持非安全域的 web 定位请求,为保证定位成功率和精度,请尽快升级您的站点到 HTTPS。

1040+ 支持h5页面中input标签的拍照、录视频、录音频以及音频、视频、图片文件选择。

accept字段内容(audio/ 表示音频 , video/ 表示视频 ,image/* 表示图片 或者其他有效MIME 类型)。

子组件

不支持

属性

名称类型默认值必填描述
src<string>-需要加载的页面地址
trustedurl 1020+<array>-可信任的网址,支持正则表达式。只有 trustedurl 中链接或者 src 链接的网页可以和框架进行双向通信
allowthirdpartycookies 1030+<boolean>false是否支持第三方 cookies,设置为 true 时开启接收第三方 cookies。 注意allowthirdpartycookies只支持安卓 5.0 及以上系统。5.0 以下默认为 true

示例代码

查看示例代码

事件

支持通用事件

名称参数描述
pagestart{url: urlString}开始加载网页时触发
pagefinish{url: urlString, canBack: true/false, canForward: true/false}网页加载完成时触发
titlereceive{title: title}收到网页标题时触发
error{errorMsg: errorMsg}网页加载出现错误时触发
message 1020+{message: messageString, url: urlString}接收到网页发来的消息时触发

方法

名称参数描述
reload重新加载页面
forward浏览历史页面中的前一个页面
back浏览历史页面中的后一个页面
canForward{callback: Function}是否可以向前浏览
canBack{callback: Function}是否可以向后浏览
postMessage 1020+{message: messageString}向网页发送消息
canForward 回调函数返回参数:
参数返回值类型描述
canForwardBoolean是否可以向前浏览
canBack 回调函数返回参数:
参数返回值类型描述
canBackBoolean是否可以向后浏览

示例:

  1. <web id="web" src="http://www.example.com/"></web>
  1. onBackPress () {
  2. this.$element('web').canBack({
  3. callback: function (e) {
  4. if (e) {
  5. // 加载历史列表中的上一个 URL
  6. this.$element('web').back()
  7. } else {
  8. router.back()
  9. }
  10. }.bind(this)
  11. })
  12. // 阻止默认行为,等待异步操作
  13. return true
  14. }

内部 API

在 web 打开的网页中可以使用的事件和方法

事件

名称参数描述
system.onmessage 1020+<string>收到快应用发送的消息时触发

方法

名称参数描述
system.postMessage 1020+<string>发送消息到快应用

示例

  1. system.onmessage = function(data) {
  2. console.log('message received: ' + data)
  3. }
  4. system.postMessage('hello')

web 示例代码

查看示例代码