首页前端开发HTMLHTML5+规范:Webview(管理应用窗口界面)

HTML5+规范:Webview(管理应用窗口界面)

时间2024-01-26 16:51:02发布访客分类HTML浏览778
导读:收集整理的这篇文章主要介绍了html5教程-HTML5+规范:Webview(管理应用窗口界面 ,觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 一...
收集整理的这篇文章主要介绍了html5教程-HTML5+规范:Webview(管理应用窗口界面),觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

一、知识点

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

1、方法

1.1、all: 获取所有Webview窗口

Array[WebviewObject] plus.webview.all();

说明:获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象在数组中按创建的先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。

返回值:Array[ WebviewObject] : 应用中创建的所有Webview窗口对象数组。

示例:

 

 
script tyPE="text/javascript"> // H5 plus事件处理 function plusReady(){ // 获取所有Webview窗口 VAR wvs=plus.webview.all(); for(var i=0; i=5){ styles.hardwareAccelerated=true; } var w = plus.webview.create( "https://weibo.com/dhnetwork", "test", styles ); plus.webview.show( w ); // 显示窗口 } /script> 开启硬件加速显示Webview窗口
Create

 

2、对象

AnimationTypeShow: 一组用于定义页面或控件显示动画效果

AnimationTypeClose: 一组用于定义页面或控件关闭的动画效果

WebviewObject: Webview窗口对象,用于操作加载HTML页面的窗口

WebviewBounceStyle: Webview窗口回弹样式

Webviewdock: 原生控件在窗口中停靠的方式

WebviewEvent: Webview窗口事件

WebviewRefreshStyle: Webview窗口下拉刷新样式

WebviewPosITion: 原生控件在窗口中显示的位置

WebviewStyles: JSON对象,原生窗口设置参数的对象

WebviewExtraOptions: JSON对象,原生窗口扩展参数

WebviewTransform: 一组用于定义页面或控件变形的属性

WebviewTransition: 一组用于定义页面或控件转换效果的属性

WebviewoverrideUrlOptions: 拦截Webview窗口URL请求的属性

3、回调方法

BounceEventCallback: Webview窗口回弹事件的回调函数

EventCallback: Webview窗口事件的回调函数

PopGestureCallback: Webview窗口侧滑事件的回调函数

HistoryQueryCallback: 历史记录记录查询的回调函数

OverrideUrlLoadingCallback: Webview窗口拦截URL链接跳转的回调函数

TitleUpdateCallback: Webview窗口加载页面标题更新的回调函数

SuccessCallback: Webview窗口操作成功回调函数

ErrorCallback: Webview窗口操作失败回调函数

 

二、重点

1、 在Webview窗口中添加子窗口

 

 embed=plus.webview.create("https://weibo.com/dhnetwork","",{
top:"46px",bottom:"0px"}
    );
     plus.webview.currentWebview().append( embed );
     与下面使用show显示Webview窗口效果一样。 ws=plus.webview.currentWebview();
 embed=plus.webview.create("https://weibo.com/dhnetwork","",{
top:"46px",bottom:"0px"}
    );
     embed.show();
    

 

2、appendJsFile和setJsFile

(1)、wobj.appendJsFile( file ):添加Webview窗口预加载js文件

对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。

 

 var nw=plus.webview.create("https://weibo.com/dhnetwork");
     nw.appendJsFile("_www/preload.js");
     nw.show();
    

 

(2)、void wobj.setJsFile( path ):设置预加载的JS文件

预加载JS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的JS文件后将清空之前设置的值。

 

 ws=plus.webview.currentWebview();
     embed=plus.webview.create("https://weibo.com/dhnetwork");
     embed.setJsFile( "_www/js/preload.js" );
     ws.append(embed);
    


 

3、clear:、hide和close

(1)、clear: 清空原生Webview窗口加载的内容

void wobj.clear();

 

说明:清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。

 

 embed=plus.webview.create("https://weibo.com/dhnetwork","",{
top:"46px",bottom:"0px"}
    );
     plus.webview.currentWebview().append( embed );
     embed.clear();
    

 

(2)、hide: 隐藏Webview窗口

void plus.webview.hide( id_wvobj, aniHide, duration, extras );

说明:根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。

plus.webview.hide( plus.webview.currentWebview() );

(3)、hide: 隐藏Webview窗口

void wobj.hide( aniHide, duration, extras );

说明:隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的Webview窗口显示出来。

 

 ws=plus.webview.currentWebview();
 embed=plus.webview.create("https://weibo.com/dhnetwork","",{
top:"46px",bottom:"0px"}
    );
     embed.show();
     embed.hide();
    

 

(4)、close: 关闭Webview窗口

void plus.webview.close( id_wvobj, aniClose, duration, extras );

说明:关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。

 

 var ws=plus.webview.currentWebview();
     plus.webview.close(ws);
    

 

(5)、close: 关闭Webview窗口

void wobj.close( aniClose, duration, extras );

说明:关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。

 

      ws=plus.webview.currentWebview();
          ws.close();
    

 

4、setPullToRefresh:设置Webview窗口的下拉刷新效果

void wobj.setPullToRefresh( style, refreshCB );

 

说明:开启Webview窗口的下拉刷新功能,显示窗口内置的下拉刷新控件样式。

参数:

style: ( WebviewRefreshStyle) 必选 Webview窗口下拉刷新样式参数。可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。

refreshCB: ( SuccessCallback ) 必选 Webview窗口下拉刷新事件回调。用户操作窗口的下拉刷新触发窗口刷新事件时触发。

返回值:void : 无

平台支持:Android - 2.2+ (支持),iOS - ALL (支持)

示例:

 

 
script type="text/javascript" charset="utf-8"> var ws=null; var list=null; // 扩展API加载完毕,现在可以正常调用扩展API function plusReady(){ ws=plus.webview.currentWebview(); ws.setPullToRefresh({ support:true, height:"50px", range:"200px", contentdown:{ caption:"下拉可以刷新" } , contentover:{ caption:"释放立即刷新" } , contentrefresh:{ caption:"正在刷新..." } } ,onRefresh); plus.nativeUI.toast("下拉可以刷新"); } // 判断扩展API是否准备,否则监听"plusready"事件 if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // DOM构建完成获取列表元素 document.addEventListener("DOMContentLoaded",function(){ list=document.getElementById("list"); } ) // 刷新页面 function onRefresh(){ setTimeout(function(){ if(list){ var item=document.createElement("li"); item.innerHTML="New Item "+(new Date())+""; list.insertBefore(item,list.FirstChild); } ws.endPullToRefresh(); } ,2000); } /script> li { padding: 1em; border-bottom: 1px solid #eaeaea; } li:active { background: #f4f4f4; } @H_304_521@
  • Initializ List Item 1
  • Initializ List Item 2
  • Initializ List Item 3
  • Initializ List Item 4
  • Initializ List Item 5
  • Initializ List Item 6
  • Initializ List Item 7
  • Initializ List Item 8
  • Initializ List Item 9
  • Initializ List Item 10


  •  

    5、setStyle:设置Webview窗口的样式

    void wobj.setStyle( styles );

    说明:更新Webview窗口的样式,如窗口位置、大小、背景色等。

    参数:styles: ( WebviewStyles ) 必选 要设置的窗口样式

    返回值:void : 无

    示例:

     

     
    script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("https://weibo.com/dhnetwork","",{ top:"46px",bottom:"0px"} ); ws.append(embed); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // 设置Webview窗口的样式 function updateStyle() { embed.setStyle( { top:"92px"} ); } /script> 设置Webview窗口的样式setStyle

     

    6、setBounce:设置Webview窗口的回弹效果

    void wobj.setBounce( style );

    说明:开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。 拖拽窗口内容时页面显示Webview窗口的背景色,默认为透明,此时显示Webview下面的内容,利用这个特点可以实现自定下拉刷新特效。

    参数:

    style: ( WebviewBounceStyle) 必选 Webview窗口回弹样式参数,可设置窗口的回弹效果支持的方向,自动回弹后停靠的位置等参数。

    返回值:void : 无

    平台支持:Android - 2.2+ (支持),iOS - ALL (不支持)

    示例:

     

     
    script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); ws.setBounce({ position:{ top:"100px"} ,changeoffset:{ top:"0px"} } ); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } /script>


    设置Webview窗口的回弹效果


    *暂仅支持顶部的回弹效果*

     

    7、setBlockNetworkImage:设置Webview窗口是否阻塞加载页面中使用的网络图片

    void wobj.setBlockNetworkImage( block );

     

    参数:block: ( Boolean ) 必选 是否阻塞加载网络图片。true表示不加载页面中使用的网络图片,false表示加载也页面中使用的网络图片。

    返回值:void : 无

    平台支持:Android - 2.2+ (支持),iOS - ALL (不支持)

    示例:

     

     
    script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } function blockOpen(){ // 阻塞网络图片模式打开页面 var w=plus.webview.create("https://m.csdn.net/","csdn",{ blockNetworkImage:true} ); w.addEventListener("loaded",function(){ w.show("slide-in-right",300); // 加载网络图片 w.setBlockNetworkImage(false); } ,false); } /script> 显示窗口后再加载网络图片
    打开页面

     

     

    8、addEventListener:添加事件监听器

    wobj.addEventListener( event, listener, capture );

    说明:向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。

    参数:

    event: ( WebviewEvent ) 必选 Webview窗口事件类型

    listener: ( EventCallback ) 必选 监听事件发生时执行的回调函数

    capture: ( Boolean ) 可选 捕获事件流顺序,暂无效果

    返回值:void : 无

    示例:

     

     
    script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } var nw=null; // 监听Webview窗口事件 function eventTest() { if(nw){ return; } var w=plus.nativeUI.showWaiting() // 打开新窗口 nw=plus.webview.create( "https://weibo.com/dhnetwork" ); nw.addEventListener( "loaded", function(){ console.log( "New Window loaded!" ); nw.show(); // 显示窗口 w.close(); w=null; } , false ); } /script> 添加事件监听器
    Event Listener

     

    9、WebviewEvent:Webview窗口事件

    (1)、"close": (String 类型 )Webview窗口关闭事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口关闭时触发此事件,回调函数类型为EventCallback。

    (2)、"DragBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后,当用户向下拖拽窗口时触发发此事件,回调函数类型为BounceEventCallback。

    (3)、"slideBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置左右侧侧滑slideoffset属性后,当用户向左右侧拖拽窗口侧滑时触发发此事件,回调函数类型为BounceEventCallback。

    (4)、"error": (String 类型 )Webview窗口加载错误事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载错误时触发此事件,回调函数类型为EventCallback。

    (5)、"hide": (String 类型 )Webview窗口隐藏事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口隐藏(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

    (6)、"loading": (String 类型 )Webview窗口页面开始加载事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始加载新页面时触发此事件,回调函数类型为EventCallback。

    (7)、"loaded": (String 类型 )Webview窗口页面加载完成事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口页面加载完成时触发此事件,回调函数类型为EventCallback。

    (8)、"maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件,回调函数类型为EventCallback。

    (9)、"show": (String 类型 )Webview窗口显示事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口显示(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

    (10)、"popGesture": (String 类型 )Webview窗口侧滑返回事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口侧滑返回时触发此事件,回调函数类型为PopGestureCallback。

    (11)、"titleUpdate": (String 类型 )Webview加载页面标题更新事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载新页面更新标题时触发此事件,回调函数类型为SuccessCallback。 注意:此事件会先于loaded事件触发,通常在加载网络页面时通过此事件可更快获取到页面的标题。

    10、事件

    (1)、onclose: Webview窗口关闭事件

     

     
    script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("https://weibo.com/dhnetwork","",{ top:"46px",bottom:"0px"} ); embed.onclose=embedClose; ws.append(embed); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // 页面关闭事件回调函数 function embedClose(e){ alert( "Closed!" ); } /script> Webview窗口关闭事件onclose

     

    (2)、onerror: Webview窗口错误事件

    (3)、onloaded: Webview窗口页面加载完成事件

    (4)、onloading: Webview窗口页面开始加载事件

     

     

    一、知识点

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

    1、方法

    1.1、all: 获取所有Webview窗口

    Array[WebviewObject] plus.webview.all();

    说明:获取应用中已创建的所有Webview窗口,包括所有未显示的Webview窗口。 返回WebviewObject对象在数组中按创建的先后顺序排列,即数组中第一个WebviewObject对象用是加载应用的入口页面。

    返回值:Array[ WebviewObject] : 应用中创建的所有Webview窗口对象数组。

    示例:

     

     
    script type="text/javascript"> // H5 plus事件处理 function plusReady(){ // 获取所有Webview窗口 var wvs=plus.webview.all(); for(var i=0; i=5){ styles.hardwareAccelerated=true; } var w = plus.webview.create( "https://weibo.com/dhnetwork", "test", styles ); plus.webview.show( w ); // 显示窗口 } /script> 开启硬件加速显示Webview窗口
    Create

     

    2、对象

    AnimationTypeShow: 一组用于定义页面或控件显示动画效果

    AnimationTypeClose: 一组用于定义页面或控件关闭的动画效果

    WebviewObject: Webview窗口对象,用于操作加载HTML页面的窗口

    WebviewBounceStyle: Webview窗口回弹样式

    WebviewDock: 原生控件在窗口中停靠的方式

    WebviewEvent: Webview窗口事件

    WebviewRefreshStyle: Webview窗口下拉刷新样式

    WebviewPosition: 原生控件在窗口中显示的位置

    WebviewStyles: JSON对象,原生窗口设置参数的对象

    WebviewExtraOptions: JSON对象,原生窗口扩展参数

    WebviewTransform: 一组用于定义页面或控件变形的属性

    WebviewTransition: 一组用于定义页面或控件转换效果的属性

    WebviewOverrideUrlOptions: 拦截Webview窗口URL请求的属性

    3、回调方法

    BounceEventCallback: Webview窗口回弹事件的回调函数

    EventCallback: Webview窗口事件的回调函数

    PopGestureCallback: Webview窗口侧滑事件的回调函数

    HistoryQueryCallback: 历史记录记录查询的回调函数

    OverrideUrlLoadingCallback: Webview窗口拦截URL链接跳转的回调函数

    TitleUpdateCallback: Webview窗口加载页面标题更新的回调函数

    SuccessCallback: Webview窗口操作成功回调函数

    ErrorCallback: Webview窗口操作失败回调函数

     

    二、重点

    1、 在Webview窗口中添加子窗口

     

     embed=plus.webview.create("https://weibo.com/dhnetwork","",{
    top:"46px",bottom:"0px"}
        );
         plus.webview.currentWebview().append( embed );
         与下面使用show显示Webview窗口效果一样。 ws=plus.webview.currentWebview();
     embed=plus.webview.create("https://weibo.com/dhnetwork","",{
    top:"46px",bottom:"0px"}
        );
         embed.show();
        

     

    2、appendJsFile和setJsFile

    (1)、wobj.appendJsFile( file ):添加Webview窗口预加载js文件

    对于一些网络HTML页面,在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行,添加多个js文件将按照添加的先后顺序执行。

     

     var nw=plus.webview.create("https://weibo.com/dhnetwork");
         nw.appendJsFile("_www/preload.js");
         nw.show();
        

     

    (2)、void wobj.setJsFile( path ):设置预加载的JS文件

    预加载JS文件不需要在HTML页面中显式引用,在Webview窗口加载HTML页面时自动加载,在页面跳转时也会自动加载。 设置新的JS文件后将清空之前设置的值。

     

     ws=plus.webview.currentWebview();
         embed=plus.webview.create("https://weibo.com/dhnetwork");
         embed.setJsFile( "_www/js/preload.js" );
         ws.append(embed);
        


     

    3、clear:、hide和close

    (1)、clear: 清空原生Webview窗口加载的内容

    void wobj.clear();

     

    说明:清除原生窗口的内容,用于重置原生窗口加载的内容,清除其加载的历史记录等内容。

     

     embed=plus.webview.create("https://weibo.com/dhnetwork","",{
    top:"46px",bottom:"0px"}
        );
         plus.webview.currentWebview().append( embed );
         embed.clear();
        

     

    (2)、hide: 隐藏Webview窗口

    void plus.webview.hide( id_wvobj, aniHide, duration, extras );

    说明:根据指定的WebviewObject对象或id隐藏Webview窗口,使得窗口不可见。

    plus.webview.hide( plus.webview.currentWebview() );

    (3)、hide: 隐藏Webview窗口

    void wobj.hide( aniHide, duration, extras );

    说明:隐藏Webview窗口可保存已加载HTML页面的上下文数据,能降低应用使用的系统资源,通过show方法可将隐藏的Webview窗口显示出来。

     

     ws=plus.webview.currentWebview();
     embed=plus.webview.create("https://weibo.com/dhnetwork","",{
    top:"46px",bottom:"0px"}
        );
         embed.show();
         embed.hide();
        

     

    (4)、close: 关闭Webview窗口

    void plus.webview.close( id_wvobj, aniClose, duration, extras );

    说明:关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。

     

     var ws=plus.webview.currentWebview();
         plus.webview.close(ws);
        

     

    (5)、close: 关闭Webview窗口

    void wobj.close( aniClose, duration, extras );

    说明:关闭并销毁Webview窗口,可设置关闭动画和动画持续时间。

     

          ws=plus.webview.currentWebview();
              ws.close();
        

     

    4、setPullToRefresh:设置Webview窗口的下拉刷新效果

    void wobj.setPullToRefresh( style, refreshCB );

     

    说明:开启Webview窗口的下拉刷新功能,显示窗口内置的下拉刷新控件样式。

    参数:

    style: ( WebviewRefreshStyle) 必选 Webview窗口下拉刷新样式参数。可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。

    refreshCB: ( SuccessCallback ) 必选 Webview窗口下拉刷新事件回调。用户操作窗口的下拉刷新触发窗口刷新事件时触发。

    返回值:void : 无

    平台支持:Android - 2.2+ (支持),iOS - ALL (支持)

    示例:

     

     
    script type="text/javascript" charset="utf-8"> var ws=null; var list=null; // 扩展API加载完毕,现在可以正常调用扩展API function plusReady(){ ws=plus.webview.currentWebview(); ws.setPullToRefresh({ support:true, height:"50px", range:"200px", contentdown:{ caption:"下拉可以刷新" } , contentover:{ caption:"释放立即刷新" } , contentrefresh:{ caption:"正在刷新..." } } ,onRefresh); plus.nativeUI.toast("下拉可以刷新"); } // 判断扩展API是否准备,否则监听"plusready"事件 if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // DOM构建完成获取列表元素 document.addEventListener("DOMContentLoaded",function(){ list=document.getElementById("list"); } ) // 刷新页面 function onRefresh(){ setTimeout(function(){ if(list){ var item=document.createElement("li"); item.innerHTML="New Item "+(new Date())+""; list.insertBefore(item,list.firstChild); } ws.endPullToRefresh(); } ,2000); } /script> li { padding: 1em; border-bottom: 1px solid #eaeaea; } li:active { background: #f4f4f4; }
    • Initializ List Item 1
    • Initializ List Item 2
    • Initializ List Item 3
    • Initializ List Item 4
    • Initializ List Item 5
    • Initializ List Item 6
    • Initializ List Item 7
    • Initializ List Item 8
    • Initializ List Item 9
    • Initializ List Item 10


     

    5、setStyle:设置Webview窗口的样式

    void wobj.setStyle( styles );

    说明:更新Webview窗口的样式,如窗口位置、大小、背景色等。

    参数:styles: ( WebviewStyles ) 必选 要设置的窗口样式

    返回值:void : 无

    示例:

     

     
    script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("https://weibo.com/dhnetwork","",{ top:"46px",bottom:"0px"} ); ws.append(embed); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // 设置Webview窗口的样式 function updateStyle() { embed.setStyle( { top:"92px"} ); } /script> 设置Webview窗口的样式setStyle

     

    6、setBounce:设置Webview窗口的回弹效果

    void wobj.setBounce( style );

    说明:开启窗口回弹效果后,当窗口中展现的内容滚动到头(顶部或底部)时,再拖拽时窗口整体内容将跟随移动,松开后自动回弹到停靠位置(可通过style设置)。 拖拽窗口内容时页面显示Webview窗口的背景色,默认为透明,此时显示Webview下面的内容,利用这个特点可以实现自定下拉刷新特效。

    参数:

    style: ( WebviewBounceStyle) 必选 Webview窗口回弹样式参数,可设置窗口的回弹效果支持的方向,自动回弹后停靠的位置等参数。

    返回值:void : 无

    平台支持:Android - 2.2+ (支持),iOS - ALL (不支持)

    示例:

     

     
    script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); ws.setBounce({ position:{ top:"100px"} ,changeoffset:{ top:"0px"} } ); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } /script>


    设置Webview窗口的回弹效果


    *暂仅支持顶部的回弹效果*

     

    7、setBlockNetworkImage:设置Webview窗口是否阻塞加载页面中使用的网络图片

    void wobj.setBlockNetworkImage( block );

     

    参数:block: ( Boolean ) 必选 是否阻塞加载网络图片。true表示不加载页面中使用的网络图片,false表示加载也页面中使用的网络图片。

    返回值:void : 无

    平台支持:Android - 2.2+ (支持),iOS - ALL (不支持)

    示例:

     

     
    script type="text/javascript"> var ws=null; // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } function blockOpen(){ // 阻塞网络图片模式打开页面 var w=plus.webview.create("https://m.csdn.net/","csdn",{ blockNetworkImage:true} ); w.addEventListener("loaded",function(){ w.show("slide-in-right",300); // 加载网络图片 w.setBlockNetworkImage(false); } ,false); } /script> 显示窗口后再加载网络图片
    打开页面

     

     

    8、addEventListener:添加事件监听器

    wobj.addEventListener( event, listener, capture );

    说明:向Webview窗口添加事件监听器,当指定的事件发生时,将触发listener函数的执行。 可多次调用此方法向Webview添加多个监听器,当监听的事件发生时,将按照添加的先后顺序执行。

    参数:

    event: ( WebviewEvent ) 必选 Webview窗口事件类型

    listener: ( EventCallback ) 必选 监听事件发生时执行的回调函数

    capture: ( Boolean ) 可选 捕获事件流顺序,暂无效果

    返回值:void : 无

    示例:

     

     
    script type="text/javascript"> // H5 plus事件处理 function plusReady(){ } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } var nw=null; // 监听Webview窗口事件 function eventTest() { if(nw){ return; } var w=plus.nativeUI.showWaiting() // 打开新窗口 nw=plus.webview.create( "https://weibo.com/dhnetwork" ); nw.addEventListener( "loaded", function(){ console.log( "New Window loaded!" ); nw.show(); // 显示窗口 w.close(); w=null; } , false ); } /script> 添加事件监听器
    Event Listener

     

    9、WebviewEvent:Webview窗口事件

    (1)、"close": (String 类型 )Webview窗口关闭事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口关闭时触发此事件,回调函数类型为EventCallback。

    (2)、"dragBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后,当用户向下拖拽窗口时触发发此事件,回调函数类型为BounceEventCallback。

    (3)、"slideBounce": (String 类型 )Webview窗口回弹事件。通过WebviewObject对象的setBounce方法开启回弹效果设置左右侧侧滑slideoffset属性后,当用户向左右侧拖拽窗口侧滑时触发发此事件,回调函数类型为BounceEventCallback。

    (4)、"error": (String 类型 )Webview窗口加载错误事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载错误时触发此事件,回调函数类型为EventCallback。

    (5)、"hide": (String 类型 )Webview窗口隐藏事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口隐藏(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

    (6)、"loading": (String 类型 )Webview窗口页面开始加载事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口开始加载新页面时触发此事件,回调函数类型为EventCallback。

    (7)、"loaded": (String 类型 )Webview窗口页面加载完成事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口页面加载完成时触发此事件,回调函数类型为EventCallback。

    (8)、"maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件,回调函数类型为EventCallback。

    (9)、"show": (String 类型 )Webview窗口显示事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口显示(窗口动画完成后)时触发此事件,回调函数类型为EventCallback。

    (10)、"popGesture": (String 类型 )Webview窗口侧滑返回事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口侧滑返回时触发此事件,回调函数类型为PopGestureCallback。

    (11)、"titleUpdate": (String 类型 )Webview加载页面标题更新事件。通过WebviewObject对象的addEventListener方法添加事件监听函数,当Webview窗口加载新页面更新标题时触发此事件,回调函数类型为SuccessCallback。 注意:此事件会先于loaded事件触发,通常在加载网络页面时通过此事件可更快获取到页面的标题。

    10、事件

    (1)、onclose: Webview窗口关闭事件

     

     
    script type="text/javascript"> var ws=null,embed=null; // H5 plus事件处理 function plusReady(){ ws=plus.webview.currentWebview(); embed=plus.webview.create("https://weibo.com/dhnetwork","",{ top:"46px",bottom:"0px"} ); embed.onclose=embedClose; ws.append(embed); } if(window.plus){ plusReady(); } else{ document.addEventListener("plusready",plusReady,false); } // 页面关闭事件回调函数 function embedClose(e){ alert( "Closed!" ); } /script> Webview窗口关闭事件onclose

     

    (2)、onerror: Webview窗口错误事件

    (3)、onloaded: Webview窗口页面加载完成事件

    (4)、onloading: Webview窗口页面开始加载事件

     

     

    觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!

    声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

    APIArrayCSSdivDOMHTMLpost-format-gallery数组

    若转载请注明出处: HTML5+规范:Webview(管理应用窗口界面)
    本文地址: https://pptw.com/jishu/587023.html
    HTML5+规范:barcode(条码扫描) HTML5+规范:gallery(管理系统相册)

    游客 回复需填写必要信息