首页 > HTML5/CSS3

html5plus Webview模块管理应用窗口界面

发表于2015-07-16 11:57:30| --次阅读| 来源webkfa| 作者html5plus

摘要:Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

webview

Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

方法:

  • all: 获取所有Webview窗口
  • close: 关闭Webview窗口
  • create: 创建新的Webview窗口
  • currentWebview: 获取当前窗口的WebviewObject对象
  • getWebviewById: 查找指定标识的WebviewObject窗口
  • getLaunchWebview: 获取应用首页WebviewObject窗口对象
  • hide: 隐藏Webview窗口
  • open: 创建并打开Webview窗口
  • show: 显示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 : 无

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1