html5plus Webview模块管理应用窗口界面
webview
Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。
方法:
- all: 获取所有Webview窗口
- close: 关闭Webview窗口
- create: 创建新的Webview窗口
- currentWebview: 获取当前窗口的WebviewObject对象
- getWebviewById: 查找指定标识的WebviewObject窗口
- getLaunchWebview: 获取应用首页WebviewObject窗口对象
- hide: 隐藏Webview窗口
- open: 创建并打开Webview窗口
- show: 显示Webview窗口
对象:
- AnimationTypeShow: 一组用于定义页面或控件显示动画效果
- AnimationTypeClose: 一组用于定义页面或控件关闭的动画效果
- WebviewObject: Webview窗口对象,用于操作加载HTML页面的窗口
- WebviewBounceStyle: Webview窗口回弹样式
- WebviewDock: 原生控件在窗口中停靠的方式
- WebviewEvent: Webview窗口事件
- WebviewRefreshStyle: Webview窗口下拉刷新样式
- WebviewPosition: 原生控件在窗口中显示的位置
- WebviewStyle: JSON对象,原生窗口设置参数的对象
- WebviewTransform: 一组用于定义页面或控件变形的属性
- WebviewTransition: 一组用于定义页面或控件转换效果的属性
回调方法:
- BounceEventCallback: Webview窗口回弹事件的回调函数
- EventCallback: Webview窗口事件的回调函数
- PopGestureCallback: Webview窗口侧滑事件的回调函数
- HistoryQueryCallback: 历史记录记录查询的回调函数
- RefreshCallback: Webview窗口刷新事件的回调函数
- ShowedCallback: Webview窗口显示完成的回调函数
AnimationTypeShow
一组用于定义页面或控件显示动画效果
常量:
-
"auto": (String 类型 )自动选择动画效果
自动选择动画效果,使用上次显示窗口设置的动画效果,如果是第一次显示则默认动画效果“none”。
-
"none": (String 类型 )无动画效果
立即显示页面,无任何动画效果,页面显示默认的动画效果。 对应关闭动画"none"。
-
"slide-in-right": (String 类型 )从右侧横向滑动效果
页面从屏幕右侧外向内横向滑动显示。 对应关闭动画"slide-out-right"。
-
"slide-in-left": (String 类型 )从左侧横向滑动效果
页面从屏幕左侧向右横向滑动显示。 对应关闭动画"slide-out-left"。
-
"slide-in-top": (String 类型 )从上侧竖向滑动效果
页面从屏幕上侧向下竖向滑动显示。 对应关闭动画"slide-out-top"。
-
"slide-in-bottom": (String 类型 )从下侧竖向滑动效果
页面从屏幕下侧向上竖向滑动显示。 对应关闭动画"slide-out-bottom"。
-
"fade-in": (String 类型 )从透明到不透明逐渐显示效果
页面从完全透明到不透明逐渐显示。 对应关闭动画"fade-out"。
-
"zoom-out": (String 类型 )从小到大逐渐放大显示效果
页面在屏幕中间从小到大逐渐放大显示。 对应关闭动画"zoom-in"。
-
"zoom-fade-out": (String 类型 )从小到大逐渐放大并且从透明到不透明逐渐显示效果
页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。 对应关闭动画"zoom-fade-in"。
-
"pop-in": (String 类型 )从右侧平移入栈动画效果
页面从屏幕右侧滑入显示,同时上一个页面带阴影效果从屏幕左侧滑出隐藏。 对应关闭动画"pop-out"。
AnimationTypeClose
一组用于定义页面或控件关闭的动画效果
常量:
-
"auto": (String 类型 )自动选择动画效果
自动选择显示窗口相对于的动画效果。
-
"none": (String 类型 )无动画
立即关闭页面,无任何动画效果。
-
"slide-out-right": (String 类型 )横向向右侧滑出屏幕动画
页面从屏幕中横向向右侧滑动到屏幕外关闭。
-
"slide-out-left": (String 类型 )横向向左侧滑出屏幕动画
页面从屏幕中横向向左侧滑动到屏幕外关闭。
-
"slide-out-top": (String 类型 )竖向向上侧滑出屏幕动画
页面从屏幕中竖向向上侧滑动到屏幕外关闭。
-
"slide-out-bottom": (String 类型 )竖向向下侧滑出屏幕动画
页面从屏幕中竖向向下侧滑动到屏幕外关闭。
-
"fade-out": (String 类型 )从不透明到透明逐渐隐藏动画
页面从不透明到透明逐渐隐藏关闭。
-
"zoom-in": (String 类型 )从大逐渐缩小关闭动画
页面逐渐向页面中心缩小关闭。
-
"zoom-fade-in": (String 类型 )从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。
-
"pop-out": (String 类型 )从右侧平移出栈动画效果,仅iOS平台支持
页面从屏幕右侧滑出消失,同时上一个页面带阴影效果从屏幕左侧滑入显示。
WebviewObject
Webview窗口对象,用于操作加载HTML页面的窗口
属性:
- id: Webview窗口的标识
方法:
- addEventListener: 添加事件监听器
- append: 在Webview窗口中添加子窗口
- appendJsFile: 添加Webview窗口预加载js文件
- back: 后退到上次加载的页面
- canBack: 查询Webview窗口是否可后退
- canForward: 查询Webview窗口是否可前进
- children: 获取Webview窗口的所有子Webview窗口
- clear: 清空原生Webview窗口加载的内容
- close: 关闭Webview窗口
- evalJS: 在Webview窗口中执行JS脚本
- forward: 前进到上次加载的页面
- getStyle: 获取Webview窗口的样式
- getTitle: 获取Webview窗口加载HTML页面的标题
- getURL: 获取Webview窗口加载HTML页面的地址
- hide: 隐藏Webview窗口
- isVisible: 查询Webview窗口是否可见
- loadData: 加载新HTML数据
- loadURL: 加载新URL页面
- nativeInstanceObject: 获取Webview窗口对象的原生(Native.JS)实例对象
- opened: 获取在当前Webview窗口中创建的所有窗口
- opener: 获取当前Webview窗口的创建者
- parent: 获取当前Webview窗口的父窗口
- reload: 重新加载Webview窗口显示的HTML页面
- resetBounce: 重置Webview窗口的回弹位置
- remove: 移除子Webview窗口
- removeEventListener: 移除Webview窗口事件监听器
- removeFromParent: 从父窗口中移除
- setBounce: 设置Webview窗口的回弹效果
- setBlockNetworkImage: 设置Webview窗口是否阻塞加载页面中使用的网络图片
- setContentVisible: 设置HTML内容是否可见
- setPullToRefresh: 设置Webview窗口的下拉刷新效果
- setStyle: 设置Webview窗口的样式
- setJsFile: 设置预加载的JS文件
- show: 显示Webview窗口
- stop: 停止加载HTML页面内容
事件:
- onclose: Webview窗口关闭事件
- onerror: Webview窗口错误事件
- onloaded: Webview窗口页面加载完成事件
- onloading: Webview窗口页面开始加载事件
WebviewBounceStyle
Webview窗口回弹样式
属性:
-
position: (JSON 类型 )Webview窗口支持回弹效果的方向
可通过此参数设置开启Webview哪个方向支持回弹效果。 支持以下属性: top:表示窗口顶部支持回弹效果; left:表示窗口左侧支持回弹效果; right:表示窗口右侧支持回弹效果; bottom:表示窗口底部支持回弹效果。 **目前仅支持top属性** 属性值:用于指定可拖拽的范围,可取百分比,如"10%";像素值,如"100px";自动计算值,如"auto";无回弹效果值,如"none";
-
changeoffset: (JSON 类型 )Webview窗口回弹是停靠的位置
开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,拖拽过程中将触发"dragBounce"事件,松开后自动回弹到停靠位置。 支持以下属性: top:表示窗口顶部回弹时停靠的位置; left:表示窗口左侧回弹时停靠的位置; right:表示窗口右侧回弹时停靠的位置; bottom:表示窗口底部回弹时停靠的位置。 属性值:用于指定窗口回弹的位置,可取百分比,如"5%";像素值,如"100px";自动计算值,如"auto",默认为可拖拽的范围值的一半;
WebviewDock
原生控件在窗口中停靠的方式
常量:
-
"top": (String 类型 )控件停靠则页面顶部
-
"bottom": (String 类型 )控件停靠在页面底部
-
"right": (String 类型 )控件停靠在页面右侧
-
"left": (String 类型 )控件停靠在页面左侧
WebviewEvent
Webview窗口事件
常量:
-
"close": (String 类型 )Webview窗口关闭事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口关闭时触发此事件,回调函数类型为EventCallback。
-
"dragBounce": (String 类型 )Webview窗口回弹事件
通过WebviewObject对象的setBounce方法开启回弹效果后,当用户拖拽窗口时触发发此事件,回调函数类型为BounceEventCallback。
-
"error": (String 类型 )Webview窗口加载错误事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载错误时触发此事件,回调函数类型为EventCallback。
-
"hide": (String 类型 )Webview窗口隐藏事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口隐藏(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。
-
"loading": (String 类型 )Webview窗口页面开始加载事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始加载新页面时触发此事件,回调函数类型为EventCallback。
-
"loaded": (String 类型 )Webview窗口页面加载完成事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口页面加载完成时触发此事件,回调函数类型为EventCallback。
-
"maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件,回调函数类型为EventCallback。
-
"show": (String 类型 )Webview窗口显示事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口显示(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。
-
"popGesture": (String 类型 )Webview窗口侧滑返回事件
通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口侧滑返回时触发此事件,回调函数类型为PopGestureCallback。
WebviewRefreshStyle
Webview窗口下拉刷新样式
属性:
-
support: (Boolean 类型 )是否开启Webview窗口的下拉刷新功能
true表示开启窗口的下拉刷新功能; false表示关闭窗口的下拉刷新功能。
-
height: (String 类型 )窗口的下拉刷新控件高度
支持百分比,如"10%";像素值,如"50px"。
-
range: (String 类型 )窗口可下拉拖拽的范围
支持百分比,如"10%";像素值,如"50px"。
-
contentdown: (JSON 类型 )在下拉可刷新状态时显示的内容
支持以下属性: caption:在下拉可刷新状态时下拉刷新控件上显示的标题内容。
-
contentover: (JSON 类型 )在释放可刷新状态时显示的内容
支持以下属性: caption:在释放可刷新状态时下拉刷新控件上显示的标题内容。
-
contentrefresh: (JSON 类型 )在正在刷新状态时显示的内容
支持以下属性: caption:在正在刷新状态时下拉刷新控件上显示的标题内容。
WebviewPosition
原生控件在窗口中显示的位置
常量:
-
"static": (String 类型 )控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动
-
"absolute": (String 类型 )控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动
-
"dock": (String 类型 )控件在页面中停靠,停靠的位置通过dock属性进行定义
WebviewStyle
JSON对象,原生窗口设置参数的对象
属性:
-
background: (String 类型 )窗口的背景颜色
窗口空白区域的背景模式,设置background为颜色值(参考CSS Color Names,可取值/十六进制值/rgb值/rgba值),窗口为独占模式显示(占整个屏幕区域); 设置background为“transparent”,则表示窗口背景透明,为非独占模式。
-
blockNetworkImage: (Boolean 类型 )是否阻塞网络图片的加载
布尔类型,true表示阻塞,false表示不阻塞,默认值为false。 阻塞后Webview窗口将不加载页面中使用的所有网络图片,可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态。
-
bottom: (String 类型 )窗口垂直向上的偏移量
支持百分比、像素值,当设置了top和height值时,此属性值忽略;
-
bounce: (String 类型 )窗口遇到边框是否有反弹效果
可取值:none表示没有反弹效果;vertical表示垂直方向有反弹效果;horizontal表示水平方向有反弹效果;all表示垂直和水平方向都有反弹效果。
-
dock: (WebviewDock 类型 )窗口的停靠方式
当Webview窗口添加到另外一个窗口中时,停靠方式才会生效,采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容呗子窗口盖住。 可取值:"top",控件停靠则页面顶部;"bottom",控件停靠在页面底部;"right",控件停靠在页面右侧;"left",控件停靠在页面左侧。
-
height: (String 类型 )窗口的高度
支持百分比、像素值,默认为100%。未设置height属性值时,可同时设置top和bottom属性值改变窗口的默认高度。
-
left: (String 类型 )窗口水平向右的偏移量
支持百分比、像素值,默认值为0px。未设置left属性值时,可设置right属性值改变窗口的默认left位置。
-
margin: (String 类型 )窗口的边距
用于定位窗口的位置,支持auto,auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。
-
mask: (String 类型 )窗口的遮罩
用于设置Webview窗口的遮罩层样式,遮罩层会覆盖Webview中所有内容,包括子webview,并且截获webview的所有触屏事件,此时Webview窗口的点击操作会触发maskClick事件。 字符串类型,可取值: rgba格式字符串,定义纯色遮罩层样式,如"rgba(0,0,0,0.5)",表示黑色半透明; "none",表示不使用遮罩层; 默认值为"none",即无遮罩层。
-
opacity: (Number 类型 )窗口的不透明度
0为全透明,1为不透明,默认值为1,即不透明。
-
popGesture: (String 类型 )窗口的侧滑返回功能
可取值"none":无侧滑返回功能;"close":侧滑返回关闭Webview窗口;"hide":侧滑返回隐藏webview窗口。 仅iOS平台支持。
-
render: (String 类型 )窗口渲染模式
支持以下属性值: "onscreen" - Webview窗口在屏幕区可见时渲染,不可见时不进行渲染,此时能减少内存使用量; "always" - Webview在任何时候都渲染,在内存较大的设备上使用,被遮挡的窗口在此中模式下显示的时候会有更流畅的效果。 默认值为"onscreen"。
-
scalable: (Boolean 类型 )窗口是否可缩放
窗口设置为可缩放(scalable:true)时,用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点设置“name="viewport" content="user-scalable=no"”来限制页面不可缩放。 窗口设置为不可缩放(scalable:false)时,用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能。 默认值为false,即不可缩放。
-
right: (String 类型 )窗口水平向左的偏移量
支持百分比、像素值,默认无值。当设置了left和width值时,此属性值忽略;
-
scalable: (Boolean 类型 )窗口是否可缩放
窗口设置为可缩放(scalable:true)时,用户可通过双指操作放大或缩小页面,此时html页面可通过meta节点设置“name="viewport" content="user-scalable=no"”来限制页面不可缩放。 窗口设置为不可缩放(scalable:false)时,用户不可通过双指操作放大或缩小页面,即使页面中的meta节点也无法开启可缩放功能。 默认值为false,即不可缩放。
-
scrollIndicator: (String 类型 )窗口是否显示滚动条
用于控制窗口滚动条样式,可取值: "all":垂直和水平滚动条都显示; "vertical":仅显示垂直滚动条; "horizontal":仅显示水平滚动条; "none":垂直和水平滚动条都不显示。 默认值为"all",即垂直和水平滚动条都显示。 注意:显示滚动条的前提条件是窗口中的内容超过窗口显示的宽或高。
-
scrollsToTop: (Boolean 类型 )点击设备的状态栏时是否滚动返回至顶部
true表示点击设备的状态栏可以滚动返回至顶部,false表示点击设备的状态栏不可以,默认值为true。 此功能仅iOS平台支持,在iPhone上有且只有一个Webview窗口的scrollsToTop属性值为true时才生效,所以在显示和关闭Webview窗口时需动态更新所有Webview的scrollsToTop值,已确保此功能生效。
-
top: (String 类型 )窗口垂直向下的偏移量
支持百分比、像素值,默认值为0px。未设置top属性值时,可设置bottom属性值改变窗口的默认top位置。
-
transition: (WebviewTransition 类型 )窗口定义窗口变换的动画效果,参考Transition
-
transform: (WebviewTransform 类型 )窗口定义窗口变形效果,参考Transform
-
position: (WebviewPosition 类型 )Webview窗口的排版位置
当Webview窗口添加到另外一个窗口中时,排版位置才会生效,排版位置决定子窗口在父窗口中的定位方式。 可取值:"static",控件在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;"absolute",控件在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;"dock",控件在页面中停靠,停靠的位置由dock属性值决定。
-
width: (String 类型 )窗口的宽度
支持百分比、像素值,默认为100%。未设置width属性值时,可同时设置left和right属性值改变窗口的默认宽度。
-
zindex: (Number 类型 )窗口的堆叠顺序值
拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面,拥有相同堆叠顺序的窗口后调用show方法则在前面。
WebviewTransform
一组用于定义页面或控件变形的属性
WebviewTransition
一组用于定义页面或控件转换效果的属性
属性:
-
property: (String 类型 )产生变换效果的属性
默认值为"all",暂不支持其它值。
-
duration: (String 类型 )变换持续的时间
默认值为0,即无动画效果。
-
timingfunction: (String 类型 )窗口变换效果
可取值"linear"、"ease-in"、"ease-out"、"ease-in-out",默认值为"linear"。
BounceEventCallback
Webview窗口回弹事件的回调函数
void onEvent( Event event ){ // Event handled code. }
参数:
-
event: ( Event ) 必选 Webview窗口回弹事件触发时事件数据
Event对象包含以下属性: status - 表示回弹位置状态,取值包括:"beforeChangeOffset"表示可继续拖拽,此时松开拖拽窗口会回弹到其初始位置; "afterChangeOffset"表示回弹可停靠,此时松开拖拽窗口会回弹到停靠位置; "dragEndAfterChangeOffset"表示已进松开拖拽,并且窗口回弹到停靠位置。 target - 保存触发回弹此事件的Webview窗口对象。
返回值:
void : 无EventCallback
Webview窗口事件的回调函数
void onEvent( Event event ){ // Event handled code. }
参数:
-
event: ( Event ) 必选 Webview窗口事件触发时事件数据
Event对象包含以下属性: target:保存触发回弹此事件的Webview窗口对象。
返回值:
void : 无PopGestureCallback
Webview窗口侧滑事件的回调函数
void onEvent( PopGestureEvent event ){ // Event handled code. }
参数:
-
event: ( PopGestureEvent ) 必选 Webview窗口事件触发时事件数据
PopGestureEvent对象包含以下属性: target:保存侧滑操作的Webview窗口对象。 type:保存侧滑事件类型,"start"表示开始侧滑返回,用户按下滑动时触发; “end”表示结束侧滑返回,用户松手时触发; “move"表示侧滑返回动作结束,用户移动侧滑时触发。 result:保存操作结果,仅在e.type为end时有效,boolean类型, true表示侧滑返回执行,false表示侧滑返回取消;否则为undefined。 progress:保存侧滑位置,Number类型,可带小数点,范围为0-100。
返回值:
void : 无HistoryQueryCallback
历史记录记录查询的回调函数
void onQuery( Event event ) { // Event handled code. }
参数:
-
event: ( Event ) 必选 查询Webview窗口历史记录操作事件数据
可通过event的canBack属性获取Webview窗口是否可后退,通过event的canForward属性获取Webview窗口是否可前进。
返回值:
void : 无RefreshCallback
Webview窗口刷新事件的回调函数
void onRefresh(){ // Event handled code. }
说明:
窗口开启下拉刷新功能后,用户操作窗口到刷新状态时触发。
参数:
无
返回值:
void : 无ShowedCallback
Webview窗口显示完成的回调函数
void onShowed(){ // Event handled code. }
说明:
调用Webview窗口的show方法显示窗口完成后触发回调函数,窗口无动画时也会触发此事件。
参数:
无
返回值:
void : 无相关文章
最新发布
阅读排行
热门文章
猜你喜欢