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 回调函数返回参数:
参数 | 返回值类型 | 描述 |
---|---|---|
canForward | Boolean | 是否可以向前浏览 |
canBack 回调函数返回参数:
参数 | 返回值类型 | 描述 |
---|---|---|
canBack | Boolean | 是否可以向后浏览 |
示例:
<web id="web" src="http://www.example.com/"></web>
onBackPress () {
this.$element('web').canBack({
callback: function (e) {
if (e) {
// 加载历史列表中的上一个 URL
this.$element('web').back()
} else {
router.back()
}
}.bind(this)
})
// 阻止默认行为,等待异步操作
return true
}
内部 API
在 web 打开的网页中可以使用的事件和方法
事件
名称 | 参数 | 描述 |
---|---|---|
system.onmessage 1020+ | <string> | 收到快应用发送的消息时触发 |
方法
名称 | 参数 | 描述 |
---|---|---|
system.postMessage 1020+ | <string> | 发送消息到快应用 |
示例
system.onmessage = function(data) {
console.log('message received: ' + data)
}
system.postMessage('hello')
web 示例代码
查看示例代码