webview

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

属性：

  • isRecovery: 当前Webview窗口是否由于内核崩溃自动恢复

方法：

对象：

回调方法：

权限：

5+功能模块（permissions）

  2. {
  3. // ...
  4. "permissions":{
  5.     // ...
  6.     "Webview": {
  7.         "description": "窗口管理"
  8.     }
  9. }
  10. }
  11.

isRecovery

当前Webview窗口是否由于内核崩溃自动恢复

  2. plus.webview.isRecovery;
  3.

说明：

Boolean类型 只读属性

如果当前窗口是由于内核（WKWebview）崩溃恢复则返回true，否则返回false。注意：仅iOS平台使用WKWebview内核时生效。

平台支持：

  • Android- ALL(不支持)
  • iOS- 8.0+(支持)

all

获取所有Webview窗口

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

说明：

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

参数：

无

返回值：

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

示例：

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7.     <title>Webview Example</title>
  8.     <script type="text/javascript">
  9. // H5 plus事件处理
  10. function plusReady(){
  11.     // 获取所有Webview窗口
  12.     var wvs=plus.webview.all();
  13.     for(var i=0;i<wvs.length;i++){
  14.         console.log('webview'+i+': '+wvs[i].getURL());
  15.     }
  16. }
  17. if(window.plus){
  18.     plusReady();
  19. }else{
  20.     document.addEventListener('plusready', plusReady, false);
  21. }
  22.     </script>
  23.     </head>
  24.     <body>
  25.     获取所有Webview窗口
  26.     </body>
  27. </html>
  28.

uni-app使用plus注意事项

close

关闭Webview窗口

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

说明：

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

参数：

  • idwvobj: (String|WebviewObject)必选 _要关闭Webview窗口id或窗口对象若操作窗口对象已经关闭，则无任何效果。使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先打开的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。
  • aniClose: (AnimationTypeClose)可选 关闭Webview窗口的动画效果如果没有指定关闭窗口动画，则使用默认值“auto”，即使用显示时设置的窗口动画相对应的关闭动画。
  • duration: (Number)可选 关闭Webview窗口动画的持续时间单位为ms，如果没有设置则使用显示窗口动画时间。
  • extras: (WebviewExtraOptions)可选 关闭Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

void: 无

示例：

  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  7.     <title>Webview Example</title>
  8.     <script type="text/javascript">
  9. // H5 plus事件处理
  10. function plusReady(){
  11. }
  12. if(window.plus){
  13.     plusReady();
  14. }else{
  15.     document.addEventListener('plusready', plusReady, false);
  16. }
  18. // 关闭自身窗口
  19. function closeme(){
  20.     var ws=plus.webview.currentWebview();
  21.     plus.webview.close(ws);
  22. }
  23.     </script>
  24.     </head>
  25.     <body>
  26.         关闭Webview窗口<br/>
  27.         <button onclick="closeme()">close</button>
  28.     </body>
  29. </html>
  30.

uni-app使用plus注意事项

create

创建新的Webview窗口


WebviewObject plus.webview.create( url, id, styles, extras );

说明：

创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。

参数：

  • url: (String)可选 新窗口加载的HTML页面地址新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。
  • id: (String)可选 新窗口的标识窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
  • styles: (WebviewStyles)可选 创建Webview窗口的样式（如窗口宽、高、位置等信息）
  • extras: (JSON)可选 创建Webview窗口的额外扩展参数值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，如：var w=plus.webview.create('url.html','id',{},{preload:'preload webview'});// 可直接通过以下方法获取preload值 console.log(w.preload); // 输出值为“preload webview”

返回值：

WebviewObject: Webview窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建并显示新窗口
function create(){
    var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    w.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        创建新的Webview窗口<br/>
        <button onclick="create()">Create</button>
    </body>
</html>

uni-app使用plus注意事项

currentWebview

获取当前窗口的WebviewObject对象


WebviewObject plus.webview.currentWebview();

说明：

获取当前页面所属的Webview窗口对象。

参数：

无

返回值：

WebviewObject: Webview窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    var ws=plus.webview.currentWebview();
    console.log( "当前Webview窗口："+ws.getURL() );
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        获取自身Webview窗口
    </body>
</html>

uni-app使用plus注意事项

getDisplayWebview

获取屏幕所有可视的Webview窗口


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

说明：

仅在屏幕区域显示的Webview窗口，如果Webview窗口显示了但被其它Webview窗口盖住则认为不可视。

参数：

无

返回值：

Array[WebviewObject]: 屏幕中可视的Webview窗口对象数组。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 获取所有可视的Webview窗口
    var wvs=plus.webview.getDisplayWebview();
    for(var i=0;i<wvs.length;i++){
        console.log('Display webview '+i+': '+wvs[i].getURL());
    }
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
    获取屏幕所有可视的Webview窗口
    </body>
</html>

uni-app使用plus注意事项

getWebviewById

查找指定标识的WebviewObject窗口


WebviewObject plus.webview.getWebviewById( id );

说明：

在已创建的窗口列表中查找指定标识的Webview窗口并返回。若没有查找到指定标识的窗口则返回null，若存在多个相同标识的Webview窗口，则返回第一个创建的Webview窗口。如果要获取应用入口页面所属的Webview窗口，其标识为应用的%APPID%，可通过plus.runtime.appid获取。

参数：

  • id: (String)必选 要查找的Webview窗口标识

返回值：

WebviewObject: WebviewObject窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 查找应用首页窗口对象
    var h=plus.webview.getWebviewById( plus.runtime.appid );
    console.log( "应用首页Webview窗口："+h.getURL() );
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        查找指定标识的窗口
    </body>
</html>

uni-app使用plus注意事项

getLaunchWebview

获取应用首页WebviewObject窗口对象


WebviewObject plus.webview.getLaunchWebview();

参数：

无

返回值：

WebviewObject: WebviewObject窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 获取应用首页窗口对象
    var h=plus.webview.getLaunchWebview();
    console.log('应用首页Webview窗口：'+h.getURL());
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        获取应用首页WebviewObject窗口对象
    </body>
</html>

uni-app使用plus注意事项

getSecondWebview

获取应用第二个首页WebviewObject窗口对象


WebviewObject plus.webview.getSecondWebview();

说明：

在双首页模式下（在manifest.json的plus->secondwebview节点下配置），应用会自动创建两个首页Webview，通过getLaunchWebview()可获取第一个首页窗口对象，通过getSecondWebview()可获取第二个首页窗口对象。

参数：

无

返回值：

WebviewObject: WebviewObject窗口对象，在非双首页模式下则返回undefined。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 获取应用第二个首页窗口对象
    var h=plus.webview.getSecondWebview();
    if(h){
        console.log('应用第二个首页Webview窗口：'+h.getURL());
    }else{
        console.log('应用不存在第二个首页Webview窗口');
    }
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        获取应用第二个首页WebviewObject窗口对象
    </body>
</html>

uni-app使用plus注意事项

getTopWebview

获取应用显示栈顶的WebviewObject窗口对象


WebviewObject plus.webview.getTopWebview();

参数：

无

返回值：

WebviewObject: WebviewObject窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 获取应用首页窗口对象
    var h=plus.webview.getTopWebview();
    console.log('应用显示栈顶的Webview窗口：'+h.getURL());
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        获取应用显示栈顶的WebviewObject窗口对象
    </body>
</html>

uni-app使用plus注意事项

hide

隐藏Webview窗口


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

说明：

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

参数：

  • idwvobj: (String|WebviewObject)必选 _要隐藏的Webview窗口id或窗口对象使用窗口对象时，若窗口对象已经隐藏，则无任何效果。使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先打开的，若没有查找到对应id的WebviewObject对象，则无任何效果。
  • aniHide: (AnimationTypeClose)可选 隐藏Webview窗口的动画效果如果没有指定窗口动画，则使用默认动画效果“none”。
  • duration: (Number)可选 隐藏Webview窗口动画的持续时间单位为ms，如果没有设置则使用默认窗口动画时间。
  • extras: (WebviewExtraOptions)可选 隐藏Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 隐藏自身窗口
function hideeme(){
    plus.webview.hide(plus.webview.currentWebview());
}
    </script>
    </head>
    <body>
        隐藏Webview窗口<br/>
        <button onclick="hideeme()">Hide</button>
    </body>
</html>

uni-app使用plus注意事项

open

创建并打开Webview窗口


WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

说明：

创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。

参数：

  • url: (String)可选 打开窗口加载的HTML页面地址新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。
  • id: (String)可选 打开窗口的标识窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
  • styles: (WebviewStyles)可选 创建Webview窗口的样式（如窗口宽、高、位置等信息）
  • aniShow: (AnimationTypeShow)可选 显示Webview窗口的动画效果如果没有指定窗口动画，则使用默认无动画效果“none”。
  • duration: (Number)可选 显示Webview窗口动画的持续时间单位为ms，默认值为200ms（毫秒）。
  • showedCB: _(SuccessCallback)可选 _Webview窗口显示完成的回调函数当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。

返回值：

WebviewObject: WebviewObject窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建并显示新窗口
function openWebview(){
    var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
}
    </script>
    </head>
    <body>
        打开Webview窗口<br/>
        <button onclick="openWebview()">Open</button>
    </body>
</html>

uni-app使用plus注意事项

prefetchURL

预载网络页面


void plus.webview.prefetchURL(url);

说明：

预载网络页面会向服务器发起http/https请求获取html页面内容，待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。注意：预载网络页面仅在运行期生效，为了节省内存仅保留最后5个预载页面数据。

参数：

  • url: (String)必选 需要预载的页面地址必须是网络地址（http/https）,本地页面地址无需预载。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var url = 'http://m.weibo.cn/u/3196963860';
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预载网络页面
    plus.webview.prefetchURL(url);

}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 打开窗口
function showWebview(){
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create(url, 'test',{render:'always'});
    wn.show('none');
}
    </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="showWebview()">显示预载页面</button>
    </body>
</html>

uni-app使用plus注意事项

prefetchURLs

预载网络页面（多个地址）


void plus.webview.prefetchURLs(urls);

说明：

预载网络页面会向服务器发起http/https请求获取html页面内容，待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。注意：预载网络页面仅在运行期生效，为了节省内存仅保留最后5个预载页面数据。

参数：

  • urls: (Array[String])必选 需要预载的页面地址数组数组项必须是网络地址（http/https）,本地页面地址无需预载。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var urls = ['http://m.weibo.cn/u/3196963860',
    'http://m3w.cn/'];
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预载网络页面
    plus.webview.prefetchURLs(urls);

}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 打开窗口
function showWebview(){
    // 创建并显示新窗口
    wn=plus.webview.create(urls[0], 'test', {render:'always'});
    wn.show('none');
}
function showWebview1(){
    // 创建并显示新窗口
    wn=plus.webview.create(urls[1], 'test1', {render:'always'});
    wn.show('none');
}
    </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="showWebview()">显示预载页面</button><br/>
        <button onclick="showWebview1()">显示预载页面1</button>
    </body>
</html>

uni-app使用plus注意事项

show

显示Webview窗口


void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

说明：

显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。

参数：

  • idwvobj: (String|WebviewObject)必选 _要显示Webview窗口id或窗口对象若操作Webview窗口对象显示，则无任何效果。使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先创建的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。
  • aniShow: (AnimationTypeShow)可选 显示Webview窗口的动画效果如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。
  • duration: (Number)可选 显示Webview窗口动画的持续时间单位为ms，如果没有设置则使用默认窗口动画时间600ms。
  • showedCB: _(SuccessCallback)可选 _Webview窗口显示完成的回调函数当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。
  • extras: (WebviewExtraOptions)可选 显示Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

WebviewObject: Webview窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建并显示新窗口
function create(){
    var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
    plus.webview.show(w); // 显示窗口
}
    </script>
    </head>
    <body>
        显示Webview窗口<br/>
        <button onclick="create()">Create</button>
    </body>
</html>

uni-app使用plus注意事项

startAnimation

Webview窗口组合动画


void plus.webview.startAnimation(options, otherOptions, callback);

说明：

同步组合两个Webview窗口动画，动画完成后窗口的位置会发生变化，一次需要在动画属性参数中设置动画起始位置、结束位置等。注意：此动画操作会改变窗口位置（如left值等），再次调用show方法时需要确保其位置是否在可视区域，如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内，如setStyle({left:'0px'});。

参数：

  • options: (WebviewAnimationOptions)必选 主窗口动画属性设置动画的主窗口及其起始位置，结束位置等信息。
  • otherOptions: (WebviewAnimationOptions)可选 关联窗口动画属性设置关联的窗口及其起始位置，结束位置等信息。
  • callback: _(WebviewAnimationCallback)可选 _Webview窗口组合动画完成回调每个窗口动画完成时触发一次回调，可通过回调参数的id属性获取窗口的标识。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%',render:'always'});
    wn.show('none');
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 窗口组合动画
function webviewAnimation(){
    plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},
    {view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},
    function(e){
        console.log('Animation finished: '+JSON.stringify(e));
    });
}
    </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
        <br/><br/>
        在新窗口中可以右滑返回（新窗口移动到屏幕外）
    </body>
</html>

uni-app使用plus注意事项

defaultHardwareAccelerated

获取Webview默认是否开启硬件加速


Boolean plus.webview.defaultHardwareAccelerated();

说明：

由于不同设备对硬件加速的支持情况存在差异，开启硬件加速能加速HTML页面的渲染，但也会消耗更多的系统资源，从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题，因此5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速。关闭硬件加速则可能会导致Webview页面无法支持Video标签播放视频等问题，如果在特定情况下需要调整修改默认开启硬件加速的行为，则可通过plus.webview.defaultHardwareAccelerated()方法获取当前设备默认是否开启硬件加速状态，从而决定是否需要显式开启或关闭指定Webview的硬件加速功能（通过WebviewStyles的hardwareAccelerated属性设置）。

参数：

无

返回值：

Boolean: Webview窗口默认开启硬件加速则返回true，否则返回false。

平台支持：

  • Android- 2.3+(支持): 返回当前设备默认是否开启硬件加速。
  • iOS- 5.1+(不支持): 返回固定值true。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建新窗口并设置开启硬件加速
function create(){
    var styles={};
    // 在Android5以上设备，如果默认没有开启硬件加速，则强制设置开启
    if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){
        styles.hardwareAccelerated=true;
    }
    var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
    plus.webview.show(w); // 显示窗口
}
    </script>
    </head>
    <body>
        开启硬件加速显示Webview窗口<br/>
        <button onclick="create()">Create</button>
    </body>
</html>

uni-app使用plus注意事项

AnimationTypeShow

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

常量：

  • "auto": (String类型)自动选择动画效果自动选择动画效果，使用上次显示窗口设置的动画效果，如果是第一次显示则默认动画效果“none”。

  • "none": (String类型)无动画效果立即显示页面，无任何动画效果，页面显示默认的动画效果。此效果忽略动画时间参数，立即显示。对应关闭动画"none"。

  • "slide-in-right": (String类型)从右侧横向滑动效果页面从屏幕右侧外向内横向滑动显示。对应关闭动画"slide-out-right"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-left": (String类型)从左侧横向滑动效果页面从屏幕左侧向右横向滑动显示。对应关闭动画"slide-out-left"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-top": (String类型)从上侧竖向滑动效果页面从屏幕上侧向下竖向滑动显示。对应关闭动画"slide-out-top"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-in-bottom": (String类型)从下侧竖向滑动效果页面从屏幕下侧向上竖向滑动显示。对应关闭动画"slide-out-bottom"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "fade-in": (String类型)从透明到不透明逐渐显示效果页面从完全透明到不透明逐渐显示。对应关闭动画"fade-out"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "zoom-out": (String类型)从小到大逐渐放大显示效果页面在屏幕中间从小到大逐渐放大显示。对应关闭动画"zoom-in"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为100ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "zoom-fade-out": (String类型)从小到大逐渐放大并且从透明到不透明逐渐显示效果页面在屏幕中间从小到大逐渐放大并且从透明到不透明逐渐显示。对应关闭动画"zoom-fade-in"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为100ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "pop-in": (String类型)从右侧平移入栈动画效果页面从屏幕右侧滑入显示，同时上一个页面带阴影效果从屏幕左侧滑出隐藏。对应关闭动画"pop-out"。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。此动画是新开窗口侧滑挤压当前屏幕窗口特效，必须是两个Webview窗口的组合动画，如果当前屏幕已显示多个Webview窗口，则显示新窗口不支持此动画类型，自动转成“slide-in-right”。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。

AnimationTypeClose

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

常量：

  • "auto": (String类型)自动选择动画效果自动选择显示窗口相对于的动画效果。

  • "none": (String类型)无动画立即关闭页面，无任何动画效果。此效果忽略动画时间参数，立即关闭。

  • "slide-out-right": (String类型)横向向右侧滑出屏幕动画页面从屏幕中横向向右侧滑动到屏幕外关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-left": (String类型)横向向左侧滑出屏幕动画页面从屏幕中横向向左侧滑动到屏幕外关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-top": (String类型)竖向向上侧滑出屏幕动画页面从屏幕中竖向向上侧滑动到屏幕外关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "slide-out-bottom": (String类型)竖向向下侧滑出屏幕动画页面从屏幕中竖向向下侧滑动到屏幕外关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "fade-out": (String类型)从不透明到透明逐渐隐藏动画页面从不透明到透明逐渐隐藏关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。
    • "zoom-in": (String类型)从大逐渐缩小关闭动画页面逐渐向页面中心缩小关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为100ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "zoom-fade-in": (String类型)从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画页面逐渐向页面中心缩小并且从不透明到透明逐渐隐藏关闭。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为100ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为100ms。
    • "pop-out": (String类型)从右侧平移出栈动画效果页面从屏幕右侧滑出消失，同时上一个页面带阴影效果从屏幕左侧滑入显示。

平台支持

  • Android - 2.2+ (支持): 默认动画时间为200ms。
  • iOS - 5.1.1+ (支持): 默认动画时间为300ms。

WebviewObject

Webview窗口对象，用于操作加载HTML页面的窗口

属性：

  • id: Webview窗口的标识

方法：

事件：

  • onclose: Webview窗口关闭事件
  • onerror: Webview窗口错误事件
  • onloaded: Webview窗口页面加载完成事件
  • onloading: Webview窗口页面开始加载事件

id

Webview窗口的标识

说明：

String类型

在打开或创建Webview窗口时设置，如果没有设置窗口标识，此属性值为undefined。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    // 获取自身webview窗口
    var ws=plus.webview.currentWebview();
    console.log('窗口标识: '+ws.id);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        Webview窗口的标识<br/>
    </body>
</html>

uni-app使用plus注意事项

addEventListener

添加事件监听器


wobj.addEventListener( event, listener, capture );

说明：

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

参数：

  • event: _(WebviewEvent)必选 _Webview窗口事件类型
  • listener: (EventCallback)必选 监听事件发生时执行的回调函数
  • capture: (Boolean)可选 捕获事件流顺序，暂无效果

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <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('http://m.weibo.cn/u/3196963860');
    nw.addEventListener('loaded', function(){
        console.log('New Window loaded!');
        nw.show(); // 显示窗口
        w.close();
        w=null;
    }, false);
}
    </script>
    </head>
    <body>
        添加事件监听器<br/>
        <button onclick="eventTest()">Event Listener</button>
    </body>
</html>

uni-app使用plus注意事项

append

在Webview窗口中添加子窗口


void wobj.append( webview );

说明：

将另一个Webview窗口作为子窗口添加到当前Webview窗口中，添加后其所有权归父Webview窗口，当父窗口关闭时子窗口自动关闭。

参数：

  • webview: (plus.nativeObj.View|WebviewObject)必选 被添加的子Webview窗口或View控件对象被添加的Webview窗口需通过plus.webview.create方法创建，并且不能调用其show方法进行显示。父窗口显示时子窗口会自动显示，父窗口隐藏时子窗口也会自动隐藏。被添加的View控件需通过new plus.nativeObj.View()创建，添加到Webview窗口后所有权一起转移（即Webview关闭后View控件也自动关闭）。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        在Webview窗口中添加子窗口
        <button onclick="plus.webview.currentWebview().close();">Back</button>
    </body>
</html>

uni-app使用plus注意事项

appendJsFile

添加Webview窗口预加载js文件


void wobj.appendJsFile( file );

说明：

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

参数：

  • file: (String)必选 窗口预加载的js文件地址js文件路径只支持本地文件，应该使用扩展相对路径类型的文件，如"_www/preload.js"。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.appendJsFile('_www/preload.js');
    nw.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        添加Webview窗口预加载js文件
    </body>
</html>

uni-app使用plus注意事项

animate

Webview窗口内容动画


void wobj.animate(options, callback);

说明：

动画后可能会导致Webview窗口显示内容改变，可通过调用restore方法恢复。当Webview窗口内容动画引起内容不可见（透明），将显示此窗口后面的内容。

参数：

  • options: _(WebviewContentAnimationOptions)可选 _Webview窗口内容动画参数
  • callback: _(SuccessCallback)可选 _Webview窗口内容动画结束回调函数Webview窗口内容动画效果结束时触发。注意：动画结束时仍然会显示Webview窗口，需要调用其hide/close方法隐藏/关闭。

返回值：

void: 无

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Webview Example</title>
        <script type="text/javascript">
var wv=null;
// H5 plus事件处理
function plusReady(){
    wv = plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// Webview窗口动画 
function animateWebview(){
    wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
        wv.restore();    // 内容动画结束后可调用此动画恢复显示内容
    });
}
        </script>
    </head>
    <body>
        Webview窗口内容动画<br/>
        <button onclick="animateWebview()">内容动画</button><br/>
    </body>
</html>

uni-app使用plus注意事项

back

后退到上次加载的页面


void wobj.back();

说明：

Webview窗口历史记录操作，后退到窗口上次加载的HTML页面。如果窗口历史记录中没有可后退的页面则不触发任何操作。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 返回上次页面
function goBack() {
    embed.back();
}
// 前进到上次页面
function goForward() {
    embed.forward();
}
    </script>
    </head>
    <body>
        后退到上次加载的页面
        <button onclick="goBack()">Back</button>
        <button onclick="goForward()">Forward</button>
    </body>
</html>

uni-app使用plus注意事项

beginPullToRefresh

开始Webview窗口的下拉刷新


void wobj.beginPullToRefresh();

说明：

开始触发下拉刷新效果，与用户操作下拉刷新行为一致（有动画效果）。触发setPullTorefresh方法设置的下拉刷新事件回调。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Webview Example</title>
        <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,style:'circle',offset:'45px'}, onRefresh);
    // 第一次打开页面即开始刷新列表
    setTimeout(function(){
        console.log('Initializ refresh');
        ws.beginPullToRefresh();
    },200);
}
// 判断扩展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='<span>New Item '+(new Date())+'</span>';
            list.insertBefore(item,list.firstChild);
        }
        ws.endPullToRefresh();
    },1000);
}
        </script>
        <style type="text/css">
li {
    padding: 1em;
    border-bottom: 1px solid #eaeaea;
}
li:active {
    background: #f4f4f4;
}
        </style>
    </head>
    <body>
        <ul id="list" style="list-style:none;margin:0;padding:0;">
            <li><span>Initializ List Item 1</span></li>
            <li><span>Initializ List Item 2</span></li>
            <li><span>Initializ List Item 3</span></li>
            <li><span>Initializ List Item 4</span></li>
            <li><span>Initializ List Item 5</span></li>
            <li><span>Initializ List Item 6</span></li>
            <li><span>Initializ List Item 7</span></li>
            <li><span>Initializ List Item 8</span></li>
            <li><span>Initializ List Item 9</span></li>
            <li><span>Initializ List Item 10</span></li>
        </ul>
    </body>
</html>

uni-app使用plus注意事项

canBack

查询Webview窗口是否可后退


void wobj.canBack( queryCallback );

说明：

Webview窗口历史记录查询操作，获取Webview是否可后退到历史加载的页面，结果通过queryCallback回调方法返回。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 是否可后退
function canBack() {
    embed.canBack( function(e){
        console.log('是否可返回：'+e.canBack);
    });
}
    </script>
    </head>
    <body>
        查询Webview窗口是否可后退
        <button onclick="canBack()">canBack</button>
    </body>
</html>

uni-app使用plus注意事项

canForward

查询Webview窗口是否可前进


void wobj.canForward( queryCallback );

说明：

Webview窗口历史记录查询操作，获取Webview是否可前进到历史加载的页面，结果通过queryCallback回调方法返回。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 是否可前进
function canForward() {
    embed.canForward( function(e){
        console.log( "是否可前进："+e.canForward );
    });
}
    </script>
    </head>
    <body>
        查询Webview窗口是否可前进
        <button onclick="canForward()">canForward</button>
    </body>
</html>

uni-app使用plus注意事项

checkRenderedContent

检测Webview窗口是否渲染完成


void wobj.checkRenderedContent(options, successCallback, errorCallback);

说明：

检测方式为判断的Webview窗口内容是否为白屏，如果非白屏则认为渲染完成，否则认为渲染未完成。通过successCallback回调函数返回结果，如果检测过程中发生错误则触发errorCallback回调函数。

参数：

  • options: _(WebviewRenderedEventOptions)可选 _Webview窗口rendered事件参数
  • successCallback: (Function)必选 检测Webview窗口渲染结果回调函数获取渲染检测结果后触发，函数原型为void function(e){}；e.rendered：表示检测渲染完成结果，Boolean类型，true表示渲染完成，false表示渲染未完成。
  • errorCallback: (ErrorCallback)可选 检测Webview窗口渲染结果失败回调函数检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数。

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.show();
}
function checkWebview(){
    nw.checkRenderedContent({}, function(e){
        console.log('checkRenderedContent success: '+JSON.stringify(e));
    }, function(e){
        console.log('checkRenderedContent error: '+JSON.stringify(e));
    });
}
    </script>
    </head>
    <body>
        检测Webview窗口是否渲染完成<br/>
        <button onclick="createWebview()">Show</button><br/>
        <button onclick="checkWebview()">Check</button>
    </body>
</html>

uni-app使用plus注意事项

children

获取Webview窗口的所有子Webview窗口


Array[WebviewObject] wobj.children();

说明：

获取添加到Webview窗口中的所有子Webview窗口，如果没有子Webview窗口则返回空数组。

参数：

无

返回值：

Array[WebviewObject]: 包含的子Webview窗口对象数组，没有则返回空数组。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append( embed );
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取子Webview窗口
function listChildren() {
    var list=plus.webview.currentWebview().children();
    for(var i=0;i<list.length;i++){
        console.log('Children['+i+']: '+list[i].getURL());
    }
}
    </script>
    </head>
    <body>
        获取Webview窗口的所有子Webview窗口
        <button onclick="listChildren()">Children</button>
    </body>
</html>

uni-app使用plus注意事项

clear

清空原生Webview窗口加载的内容


void wobj.clear();

说明：

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

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 清空Webview窗口
function webviewClear() {
    embed.clear();
}
    </script>
    </head>
    <body>
        清空原生Webview窗口加载的内容
        <button onclick="webviewClear()">Clear</button>
    </body>
</html>

uni-app使用plus注意事项

close

关闭Webview窗口


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

说明：

关闭并销毁Webview窗口，可设置关闭动画和动画持续时间。

参数：

  • aniClose: (AnimationTypeClose)可选 关闭Webview窗口动画效果如果没有指定关闭窗口动画，则使用默认值“auto”，即使用显示时设置的窗口动画相对应的关闭动画。
  • duration: (Number)可选 关闭Webview窗口的动画持续时间单位为ms，默认为窗口show方法设定的动画时间。
  • extras: (WebviewExtraOptions)可选 关闭Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 关闭窗口
function closeMe() {
    ws.close();
}
    </script>
    </head>
    <body>
        关闭Webview窗口
        <button onclick="closeMe()">Close</button>
    </body>
</html>

uni-app使用plus注意事项

drag

设置Webview窗口的滑屏操作手势


void wobj.drag(options, otherView, callback);

说明：

将Webview窗口的左右滑动手势关联到其它Webview窗口，可实现滑动切换显示Webview的动画效果（如Tab页面切换效果）。注意：滑屏操作会改变窗口位置（如left值等），如果不在可视区域则需要调用窗口的setStyle方法设置其位置到可视区域内，如setStyle({left:'0px'});。

参数：

  • options: (WebviewDragOptions)必选 当前Webview窗口操作手势配置参数
  • otherView: (WebviewDragOtherViewOptions)可选 操作手势关联的窗口配置参数
  • callback: (WebviewDragCallback)可选 滑屏操作回调函数在滑屏手势操作过程中触发，一次滑屏操作至少会触发3次回调事件（开始、滑屏移动、结束）。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%'});
    wn.show('none');
    // 左滑显示新窗口
    ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
        console.log('Left drag event: '+JSON.stringify(e));
    });
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        左滑可打开新页面
    </body>
</html>

uni-app使用plus注意事项

draw

截屏绘制


void wobj.draw( bitmap, successCallback, errorCallback, options );

说明：

将Webview窗口的可视区域截屏并绘制到Bitmap图片对象中。

参数：

  • bitmap: (plus.nativeObj.Bitmap)可选 要绘制的图片对象如果图片中已经存在内容则覆盖，如果截屏绘制失败则保留之前的图片内容。
  • successCallback: (SuccessCallback)可选 截屏绘制操作成功回调截屏绘制操作成功时调用。
  • errorCallback: (ErrorCallback)可选 截屏绘制操作失败回调截屏绘制操作失败时调用，并返回失败信息。
  • options: (WebviewDrawOptions)可选 截屏绘制操作参数设置控制截屏绘制区域、是否检测白屏等。

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 不支持截取Canvas标签中的内容。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 截屏绘制
var bitmap=null;
function captureWebview() {
    bitmap = new plus.nativeObj.Bitmap('test');
    // 将webview内容绘制到Bitmap对象中
    ws.draw(bitmap,function(){
        console.log('截屏绘制图片成功');
    },function(e){
        console.log('截屏绘制图片失败：'+JSON.stringify(e));
    });
}
    </script>
    </head>
    <body>
        截屏绘制Webview窗口<br/>
        <button onclick="captureWebview()">Draw</button>
    </body>
</html>

uni-app使用plus注意事项

endPullToRefresh

结束Webview窗口的下拉刷新


void wobj.endPullToRefresh();

说明：

关闭下拉刷新效果，恢复到开始下拉刷新之前的效果。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Webview Example</title>
        <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='<span>New Item '+(new Date())+'</span>';
            list.insertBefore(item,list.firstChild);
        }
        ws.endPullToRefresh();
    },2000);
}
        </script>
        <style type="text/css">
li {
    padding: 1em;
    border-bottom: 1px solid #eaeaea;
}
li:active {
    background: #f4f4f4;
}
        </style>
    </head>
    <body>
        <ul id="list" style="list-style:none;margin:0;padding:0;">
            <li><span>Initializ List Item 1</span></li>
            <li><span>Initializ List Item 2</span></li>
            <li><span>Initializ List Item 3</span></li>
            <li><span>Initializ List Item 4</span></li>
            <li><span>Initializ List Item 5</span></li>
            <li><span>Initializ List Item 6</span></li>
            <li><span>Initializ List Item 7</span></li>
            <li><span>Initializ List Item 8</span></li>
            <li><span>Initializ List Item 9</span></li>
            <li><span>Initializ List Item 10</span></li>
        </ul>
    </body>
</html>

uni-app使用plus注意事项

evalJS

在Webview窗口中执行JS脚本


void wobj.evalJS( js );

说明：

将JS脚本发送到Webview窗口中运行，可用于实现Webview窗口间的数据通讯。

参数：

  • js: (String)必选 要在窗口中运行的脚本字符串

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append( embed );
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 在Webview窗口中执行JS脚本
function evalJS() {
    embed.evalJS('alert("evalJS: "+location.href);');
}
    </script>
    </head>
    <body>
        在Webview窗口中执行JS脚本
        <button onclick="evalJS()">evalJS</button>
    </body>
</html>

uni-app使用plus注意事项

forward

前进到上次加载的页面


void wobj.forward();

说明：

Webview窗口历史记录操作，前进到窗口上次加载的HTML页面。如果窗口历史记录中没有可前进的页面则不触发任何操作。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var embed=null;
// H5 plus事件处理
function plusReady(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    plus.webview.currentWebview().append( embed );
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 返回上次页面
function goBack() {
    embed.back();
}
// 前进到上次页面
function goForward() {
    embed.forward();
}
    </script>
    </head>
    <body>
        前进到上次加载的页面
        <button onclick="goBack()">Back</button>
        <button onclick="goForward()">Forward</button>
    </body>
</html>

uni-app使用plus注意事项

getFavoriteOptions

获取Webview窗口的收藏参数


WebviewFavoriteOptions wobj.getFavoriteOptions();

说明：

获取Webview窗口的收藏参数，如收藏页面的标题、图标、地址等。

参数：

无

返回值：

WebviewFavoriteOptions: 获取Webview窗口的收藏参数，如果未设置则返回null。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setFavoriteOptions({title:'收藏页标题',href:'http://www.dcloud.io/'});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取窗口的分享参数
function getFavoriteOptions(){
    var t = ws.getFavoriteOptions();
    alert(t?"未设置":JSON.stringify(t));
}
    </script>
    </head>
    <body style="text-align:center;">
        获取Webview窗口的收藏参数<br/>
        <button onclick="getFavoriteOptions()">获取收藏参数</button>
    </body>
</html>

uni-app使用plus注意事项

getSafeAreaInsets

获取页面的安全区域


SafeAreaInsets wobj.getSafeAreaInsets();

说明：

Webview窗口内容区域的安全区域位置信息。如页面底部与底部安全区域重叠10px， 则返回的bottom值为10，否则返回0。

参数：

无

返回值：

plus.navigator.SafeAreaInsets: 页面的安全区域信息

getShareOptions

获取Webview窗口的分享参数


WebviewShareOptions wobj.getShareOptions();

说明：

获取Webview窗口的分享参数，如分享的标题、图标、链接地址等。

参数：

无

返回值：

WebviewShareOptions: 获取Webview窗口的分享参数

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取窗口的分享参数
function getShareOptions(){
    var t = ws.getShareOptions();
    alert(t?"未设置":JSON.stringify(t));
}
    </script>
    </head>
    <body style="text-align:center;">
        获取Webview窗口的分享参数<br/>
        <button onclick="getShareOptions()">获取分享参数</button>
    </body>
</html>

uni-app使用plus注意事项

getStyle

获取Webview窗口的样式


WebviewStyles wobj.getStyle();

说明：

获取Webview窗口的样式属性，如窗口位置、大小等信息。

参数：

无

返回值：

WebviewStyles: WebviewStyles对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取Webview窗口的样式
function getStyle() {
    var style=ws.getStyle();
    alert( JSON.stringify(style) );
}
    </script>
    </head>
    <body>
        获取Webview窗口的样式
        <button onclick="getStyle()">getStyle</button>
    </body>
</html>

uni-app使用plus注意事项

getSubNViews

获取Webview窗口的原生子View控件对象


Array<plus.nativeObj.View> wobj.getSubNViews();

说明：

创建Webview窗口的所有原生子View控件。可以在创建窗口时设置其subNViews属性自动创建（应用首页可通过manfest.json中的plus->launchwebview->subNNViews节点配置创建）；也可以通过Webview窗口的append方法将已经创建的原生View控件添加为其子。

参数：

无

返回值：

Array[plus.nativeObj.View]: 原生View控件对象数组，如果没有原生子View控件则返回空数组

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    plus.key.addEventListener('backbutton', function(){
        nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
var subNViews=null;
// 创建带原生子View控件的Webview窗口 
function createWebview(){
    nw=nw||plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',subNViews:[{
        id:'subnview1',
        styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
        tags:[{tag:'font',id:'font',text:'顶部原生子View控件',textStyles:{size:'18px'}}]
    },{
        id:'subnview2',
        styles:{bottom:'0px',height:'100px',backgroundColor:'#00FF00'},
        tags:[{tag:'font',id:'font',text:'底部原生子View控件',textStyles:{size:'18px'}}]
    }]});
    nw.addEventListener('close', function(){
        nw=null;
    }, false);
    subNViews = nw.getSubNViews();
    nw.show('pop-in');
}
// 更新顶部View控件 
function updateTopView(){
    var tv = subNViews[0];
    tv.drawText('更新顶部子View控件内容',{},{},'font');
}
// 更新底部View控件 
function updateBottomView(){
    var bv = subNViews[0];
    bv.drawText('更新底部子View控件内容',{},{},'font');
}
    </script>
    </head>
    <body>
        Webview窗口的子View控件<br/>
        <button onclick="createWebview()">Create</button><br/>
        <button onclick="updateTopView()">更新顶部View控件</button>
        <button onclick="updateBottomView()">更新底部View控件</button>
    </body>
</html>

uni-app使用plus注意事项

getTitle

获取Webview窗口加载HTML页面的标题


String wobj.getTitle();

说明：

标题为HTML页面head节点下title节点中的文本内容，当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的标题。如果HTML页面没有使用title节点来设置标题，则返回空字符串。

参数：

无

返回值：

String: 窗口加载页面的标题

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'6px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取Webview窗口的标题
function getTitle() {
    alert( "标题为："+embed.getTitle() );
}
    </script>
    </head>
    <body>
        获取Webview窗口加载HTML页面的标题
        <button onclick="getTitle()">getTitle</button>
    </body>
</html>

uni-app使用plus注意事项

getTitleNView

获取Webview窗口的标题栏控件对象


plus.nativeObj.View wobj.getTitleNView();

说明：

创建Webview窗口时设置其titleNView属性时则自动创建标题栏控件，应用首页可通过manfest.json中的plus->launchwebview->titleNView节点配置创建标题栏控件。可通过此方法获取Webview窗口创建的标题栏控件，对象类型为plus.nativeObj.View，可通过调用其drawBitmap/drawRect/drawText方法绘制更新内容来实现自定义样式。

参数：

无

返回值：

plus.nativeObj.View: 原生View控件对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var wn=null;
// H5 plus事件处理
function plusReady(){
    wn=plus.webview.create('new.html', 'new', {'titleNView':{'backgroundcolor':'#FFFFFF','titletext':'标题栏','titlecolor':'#FF0000'}});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取Webview窗口的标题栏控件对象
function getTitleNView() {
    var nb=wn.getTitleNView();
    nb.drawText('返回', {'top':'0px','left':'0px','width':'96px','height':'100%'});
    wn.show();
}
    </script>
    </head>
    <body>
        获取Webview窗口的标题栏控件对象<br/>
        <button onclick="getTitleNView()">更新标题栏控件对象</button>
    </body>
</html>

uni-app使用plus注意事项

getTitleNViewSearchInputText

获取标题栏上输入框的内容


String wobj.getTitleNViewSearchInputText();

说明：

仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效。

参数：

无

返回值：

String: 标题栏搜索框中输入的文本，如果没有配置显示搜索框则返回空字符串。

getURL

获取Webview窗口加载HTML页面的地址


String wobj.getURL();

说明：

当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的地址。

参数：

无

返回值：

String: 窗口加载页面的URL地址

平台支持：

  • Android- ALL(支持)
  • iOS- ALL(支持): 需要在页面loaded事件后才能获取最终的页面地址，在此之前获取的是当前加载的页面地址。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取Webview窗口加载HTML页面的地址
function getURL() {
    alert( "页面地址为："+embed.getURL() );
}
    </script>
    </head>
    <body>
        获取Webview窗口加载HTML页面的地址
        <button onclick="getURL()">getURL</button>
    </body>
</html>

uni-app使用plus注意事项

hide

隐藏Webview窗口


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

说明：

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

参数：

  • aniHide: (AnimationTypeClose)可选 隐藏Webview窗口动画效果如果没有指定隐藏窗口动画，则使用默认动画效果“none”。
  • duration: (Number)可选 隐藏Webview窗口的动画持续时间单位为ms，默认为窗口show方法设定的动画时间。
  • extras: (WebviewExtraOptions)可选 隐藏Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 隐藏Webview窗口
function hideWebview() {
    embed.hide();
}
    </script>
    </head>
    <body>
        隐藏Webview窗口
        <button onclick="hideWebview()">hide</button>
    </body>
</html>

uni-app使用plus注意事项

hideTitleNViewButtonRedDot

隐藏标题栏上按钮的红点


void wobj.hideTitleNViewButtonRedDot(options);

说明：

仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

options参数为json类型，包含以下属性：

  • index: (Number)必选 按钮的索引值此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。

返回值：

void: 无

interceptTouchEvent

是否拦截Webview窗口的触屏事件


void wobj.interceptTouchEvent(intercept);

说明：

拦截后触屏事件不再传递，否则传递给View控件下的其它窗口处理。Webview窗口默认拦截所有触屏事件。

参数：

  • intercept: (Boolean)可选 是否拦截触屏事件true表示拦截触屏事件，false表示不拦截触屏事件（透传事件给其它窗口处理）。默认值为true。

返回值：

void: 无

平台支持：

  • Android- 3.0+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Webview Example</title>
        <script type="text/javascript">
var wv=null;
// H5 plus事件处理
function plusReady(){
    wv = plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 拦截触屏事件 
function interceptEvent(){
    wv.interceptTouchEvent(true);
}
// 不拦截触屏事件 
function uninterceptEvent(){
    wv.interceptTouchEvent(false);
}
        </script>
    </head>
    <body>
        是否拦截Webview窗口的触屏事件<br/>
        <button onclick="uninterceptEvent()">不拦截触屏事件</button><br/>
        <button onclick="interceptEvent()">拦截触屏事件</button><br/>
    </body>
</html>

uni-app使用plus注意事项

isHardwareAccelerated

查询Webview窗口是否开启硬件加速


Boolean wobj.isHardwareAccelerated();

说明：

如果Webview窗口已经开启硬件加速则返回true，否则返回false。

参数：

无

返回值：

Boolean: Webview窗口是否开启硬件加速

平台支持：

  • Android- 3.0+(支持): 5+ Runtime会根据当前设备环境来决定是否开启硬件加速，也可通过WebviewStyles对象的hardwareAccelerated属性来强制设置是否开启硬件加速。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 查询Webview窗口是否开启硬件加速
function isHardwareAccelerated() {
    alert('是否开启硬件加速：'+ws.isHardwareAccelerated());
}
    </script>
    </head>
    <body>
        查询Webview窗口是否开启硬件加速
        <button onclick="isHardwareAccelerated()">isHardwareAccelerated</button>
    </body>
</html>

uni-app使用plus注意事项

isPause

查询Webview窗口是否暂停


Boolean wobj.isPause();

说明：

如果Webview窗口已经暂停则返回true，否则返回false。

参数：

无

返回值：

Boolean: Webview窗口是否暂停

平台支持：

  • Android- ALL(支持)
  • iOS- ALL(不支持): 总是返回false。

isVisible

查询Webview窗口是否可见


Boolean wobj.isVisible();

说明：

若Webview窗口已经显示（调用过show方法，即使被其它窗口挡住了也认为已显示）则返回true，若Webview窗口被隐藏则返回false。

参数：

无

返回值：

Boolean: Webview窗口是否可见

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 查询Webview窗口是否可见
function visibleWebview() {
    alert('是否可见：'+embed.isVisible());
}
// 隐藏Webview窗口
function hideWebview() {
    embed.hide();
}
    </script>
    </head>
    <body>
        查询Webview窗口是否可见
        <button onclick="visibleWebview()">isVisible</button>
        <button onclick="hideWebview()">hide</button>
    </body>
</html>

uni-app使用plus注意事项

listenResourceLoading

监听页面开始加载资源


void wobj.listenResourceLoading(options, callback);

说明：

Webview加载资源时，如果满足options参数中定义的条件，则触发callback回调。此方法仅触发回调事件，不会阻止资源的加载。

参数：

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 5+APP需要选择“解压资源后运行”模式后才能监听加载资源。
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 监听页面加载资源
function listenResourceLoading() {
    var wv=plus.webview.create('http://m.weibo.cn/u/3196963860');
    // 监听到页面加载图片资源时显示（{match:'.*\.(jpg|png|jpeg|bmp)\b'}）
    wv.listenResourceLoading({match:'.*\\.(jpg|png|jpeg|bmp)\\b'}, function(e){
        console.log('loading resource: '+e.url);
        wv.show();
    });
    console.log('create webview');
}
    </script>
    </head>
    <body>
        监听页面开始加载资源
        <button onclick="listenResourceLoading()">加载图片资源时显示窗口</button>
    </body>
</html>

uni-app使用plus注意事项

loadData

加载新HTML数据


void wobj.loadData(data, options);

说明：

触发Webview窗口加载HTML页面数据，如果HTML数据无效将导致页面加载失败。

参数：

  • data: (String)必选 要加载的HTML数据
  • options: (WebviewLoadDataOptions)可选 加载HTML数据的配置参数如设置Base URL等。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 加载新HTML数据
function loadHtmlData() {
    embed.loadData( '<html><body>Hello! loadData!</body></html>' );
}
    </script>
    </head>
    <body>
        加载新HTML数据
        <button onclick="loadHtmlData()">loadData</button>
    </body>
</html>

uni-app使用plus注意事项

loadURL

加载新URL页面


void wobj.loadURL(url, additionalHttpHeaders);

说明：

触发Webview窗口从新的URL地址加载页面，如果url地址无效将导致页面显示失败。

参数：

  • url: (String)必选 要加载的页面URL地址
  • additionalHttpHeaders: (JSON)可选 窗口加载URL页面时额外添加的HTTP请求头数据仅对加载此次URL地址时有效。如果HTTP请求头中已经包含需要额外添加的头数据，则添加的请求数据覆盖默认值。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 加载新URL页面
function loadHtmlUrl() {
    embed.loadURL('http://m.weibo.cn/');
}
    </script>
    </head>
    <body>
        加载新URL页面
        <button onclick="loadHtmlUrl()">loadURL</button>
    </body>
</html>

uni-app使用plus注意事项

nativeInstanceObject

获取Webview窗口对象的原生（Native.JS）实例对象


InstanceObject wobj.nativeInstanceObject();

说明：

Android平台返回Webview窗口对象的android.webkit.Webview实例对象，iOS平台返回Webview窗口对象的UIWebview实例对象。

参数：

无

返回值：

InstanceObject: Webview窗口对象的原生（Native.JS）实例对象。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nws=null;
// H5 plus事件处理
function plusReady(){
    // 获取当前Webview实例的原生（Native.JS）实例对象
    nws=plus.webview.currentWebview().nativeInstanceObject();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        获取Webview窗口对象的原生（Native.JS）实例对象
    </body>
</html>

uni-app使用plus注意事项

opened

获取在当前Webview窗口中创建的所有窗口


Array[WebviewObject] wobj.opened();

说明：

返回从当前Webview中调用plus.webview.open或plus.webview.create创建的所有Webview窗口数组。

参数：

无

返回值：

Array[WebviewObject]: 此窗口创建的Webview窗口对象数组，没有则返回空数组。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取在当前Webview窗口中创建的所有窗口
function openedWebview() {
    var list=ws.opened();
    for(var i=0;i<list.length;i++){
        alert('opened['+i+']: '+list[i].getURL());
    }
}
    </script>
    </head>
    <body>
        获取在当前Webview窗口中创建的所有窗口
        <button onclick="openedWebview()">opened</button>
    </body>
</html>

uni-app使用plus注意事项

opener

获取当前Webview窗口的创建者


WebviewObject wobj.opener();

说明：

创建者为调用plus.webview.open或plus.webview.create方法创建当前窗口的Webview窗口。

参数：

无

返回值：

WebviewObject: 创建当前窗口的Webview窗口对象

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 取当前Webview窗口的创建者
function openerWebview() {
    var wo=embed.opener();
    alert('opener: '+wo.getURL());
}
    </script>
    </head>
    <body>
        获取当前Webview窗口的创建者
        <button onclick="openerWebview()">opener</button>
    </body>
</html>

uni-app使用plus注意事项

overrideResourceRequest

拦截Webview窗口的资源加载


void wobj.overrideResourceRequest(options);

说明：

根据区配规则拦截Webview窗口加载资源的URL地址，重定向到其它资源地址（暂仅支持本地地址）。注意：多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。

参数：

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
  • iOS- ALL(支持): 不限定拦截当前Webview窗口加载的资源，而是拦截应用中所有Webview窗口加载的资源。注意：WKWebview内核不支持拦截资源，HBuilderX2.3+开始默认调整使用WKWebview内核。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,nw=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 拦截Webview窗口的资源请求
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.overrideResourceRequest([{match:'http://tva3.sinaimg.cn/crop.121.80.980.980.180/be8dcc14gw1e7lz65y6g3j20uo0uoq4r.jpg',redirect:'_www/logo.png'}]);
    nw.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        拦截Webview窗口的资源加载
    </body>
</html>

uni-app使用plus注意事项

overrideUrlLoading

拦截Webview窗口的URL请求


void wobj.overrideUrlLoading(options, callback);

说明：

拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。此方法只能拦截窗口的网络超链接跳转（包括调用loadURL方法触发的跳转），不可拦截页面请求资源请求（如加载css/js/png等资源的请求）。注意：多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。

参数：

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。
  • iOS- ALL(支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,nw=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 拦截Webview窗口的URL请求
function overrideUrl() {
    // 拦截所有页面跳转，可使用参数拦截weibo.com域名之外的跳转（{mode:'allow',match:'.*weibo\.com/.*'}）
    nw.overrideUrlLoading({mode:'reject'}, function(e){
        console.log('reject url: '+e.url);
    });
}
    </script>
    </head>
    <body>
        拦截Webview窗口的URL请求
        <button onclick="overrideUrl()">overrideUrlLoading</button>
    </body>
</html>

uni-app使用plus注意事项

parent

获取当前Webview窗口的父窗口


WebviewObject wobj.parent();

说明：

Webview窗口作为子窗口添加（Webview.append）到其它Webview窗口中时有效，这时其它Webview窗口为父窗口。

参数：

无

返回值：

WebviewObject: 父Webview窗口对象，没有则返回null。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 获取当前Webview窗口的父窗口
function parentWebview() {
    var wp=embed.parent();
    alert( "parent: "+wp.getURL() );
}
    </script>
    </head>
    <body>
        获取当前Webview窗口的父窗口
        <button onclick="parentWebview()">parent</button>
    </body>
</html>

uni-app使用plus注意事项

pause

暂停当前Webview窗口


void wobj.pause();

说明：

Webview窗口的js停止运行，页面内容不再更新渲染。应用中存在多个Webview窗口时，可以停止不显示的Webview，减少对系统资源的占用。注意：暂停后在窗口显示时需调用resume恢复。

参数：

无

返回值：

void: 无

平台支持：

  • Android- ALL(支持)
  • iOS- ALL(不支持)

reload

重新加载Webview窗口显示的HTML页面


void wobj.reload( force );

说明：

触发Webview窗口重新加载当前显示的页面内容。如果当前HTML页面未加载完则停止并重新加载，如果当前Webview窗口没有加载任何页面则无响应。

参数：

  • force: (Boolean)必选 是否强制不使用缓存为加速HTML页面加载速度，默认在重新加载时会使用缓存，若force设置为true则不使用缓存，重新从URL地址加载所有页面内容。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 重新加载Webview窗口显示的HTML页面
function reloadWebview() {
    embed.reload(true);
}
    </script>
    </head>
    <body>
        重新加载Webview窗口显示的HTML页面
        <button onclick="reloadWebview()">reload</button>
    </body>
</html>

uni-app使用plus注意事项

resetBounce

重置Webview窗口的回弹位置


void wobj.resetBounce();

说明：

开启窗口回弹效果后，当窗口中展现的内容滚动到头（顶部或底部）时，再拖拽时窗口整体内容将跟随移动，松开后自动回弹到停靠位置。这时需要调用此方法来重置窗口的回弹位置，窗口将采用动画方式回弹到其初始显示的位置。

参数：

无

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 重置窗口回弹位置
function resetBounce(){
    ws.resetBounce();
}
    </script>
    </head>
    <body style="text-align:center;">
        <br/><br/><br/>
        设置Webview窗口的回弹效果<br/>
        回弹后显示停靠到44px的位置<br/><br/>
        <button onclick="resetBounce()">重置回弹位置</button>
        <br/><br/><br/>
        *暂仅支持顶部的回弹效果*
    </body>
</html>

uni-app使用plus注意事项

restore

恢复Webview控件显示内容


void wobj.restore();

说明：

恢复调用animate方法改变Webview控件的内容，更新至动画前显示的内容。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Webview Example</title>
        <script type="text/javascript">
var wv=null;
// H5 plus事件处理
function plusReady(){
    wv = plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// Webview窗口内容动画 
function animateWebview(){
    wv.animate({type:'shrink',frames:20,region:{top:'100px',bottom:'48px'},duration:1000},function(){
        console.log('Webview窗口内容动画结束');
    });
}
// Webview窗口内容恢复
function restoreWebview(){
    wv.restore();
}
        </script>
    </head>
    <body>
        Webview窗口内容动画<br/>
        <button onclick="animateWebview()">内容动画</button><br/>
        <button onclick="restoreWebview()">内容恢复</button><br/>
    </body>
</html>

uni-app使用plus注意事项

remove

移除子Webview窗口


void wobj.remove( webview );

说明：

从当前Webview窗口移除指定的子Webview窗口，若指定的webview对象不是当前窗口的子窗口则无任何作用。移除后子Webview窗口不会关闭，需要调用其close方法才能真正关闭并销毁。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 移除子Webview窗口
function removeWebview() {
    ws.remove(embed);
    embed.close();
}
    </script>
    </head>
    <body>
        移除子Webview窗口
        <button onclick="removeWebview()">remove</button>
    </body>
</html>

uni-app使用plus注意事项

removeEventListener

移除Webview窗口事件监听器


void wobj.removeEventListener( event, listener );

说明：

从Webview窗口移除通过addEventListener方法添加的事件监听器，若没有查找到对应的事件监听器，则无任何作用。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.addEventListener('loaded', embedLoaded, false);
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 页面跳转监听器
function embedLoaded(e){
    alert('Loaded: '+embed.getURL());
}
// 移除Webview窗口事件监听器
function removeEvent() {
    embed.removeEventListener('loaded', embedLoaded);
}
    </script>
    </head>
    <body>
        移除Webview窗口事件监听器
        <button onclick="removeEvent()">removeEventListener</button>
    </body>
</html>

uni-app使用plus注意事项

removeFromParent

从父窗口中移除


void wobj.removeFromParent();

说明：

从所属的父Webview窗口移除，如果没有父窗口，则无任何作用。从父窗口中移除后子Webview窗口不会关闭，需要调用其close方法才能真正关闭并销毁。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 从父窗口中移除
function removeFromeWebview() {
    embed.removeFromParent();
    embed.close();
}
    </script>
    </head>
    <body>
        从父窗口中移除
        <button onclick="removeFromeWebview()">removeFromParent</button>
    </body>
</html>

uni-app使用plus注意事项

removeTitleNViewButtonBadge

移除标题栏上按钮的角标


void wobj.removeTitleNViewButtonBadge(options);

说明：

仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

options参数为json类型，包含以下属性：

  • index: (Number)必选 按钮的索引值此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。

返回值：

void: 无

resume

恢复当前Webview窗口


void wobj.resume();

说明：

Webview窗口暂停后，调用此方法恢复js运行及页面内容的更新渲染。

参数：

无

返回值：

void: 无

平台支持：

  • Android- ALL(支持)
  • iOS- ALL(不支持)

setBounce

设置Webview窗口的回弹效果


void wobj.setBounce( style );

说明：

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

参数：

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

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <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>
    </head>
    <body style="text-align:center;">
        <br/><br/><br/>
        设置Webview窗口的回弹效果<br/><br/><br/>
        *暂仅支持顶部的回弹效果*
    </body>
</html>

uni-app使用plus注意事项

setBlockNetworkImage

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


void wobj.setBlockNetworkImage( block );

参数：

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

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <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('http://m.weibo.cn/u/3196963860', 'test', {blockNetworkImage:true});
    w.addEventListener('loaded', function(){
        w.show('slide-in-right', 300);
        // 加载网络图片
        w.setBlockNetworkImage(false);
    }, false);
}
    </script>
    </head>
    <body>
        显示窗口后再加载网络图片<br/>
        <button onclick="blockOpen()">打开页面</button>
    </body>
</html>

uni-app使用plus注意事项

setContentVisible

设置HTML内容是否可见


void wobj.setContentVisible( visible );

说明：

设置HTML内容不可见后，将显示Webview窗口的背景色。

参数：

  • visible: (Boolean)必选 设置页面是否可见，true表示可见，false表示不可见

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 设置HTML内容是否可见
function setContentVisible(v) {
    embed.setContentVisible(v);
}
    </script>
    </head>
    <body>
        设置HTML内容是否可见<br/>
        <button onclick="setContentVisible(true)">可见</button><br/>
        <button onclick="setContentVisible(false)">不可见</button><br/>
    </body>
</html>

uni-app使用plus注意事项

setCssFile

设置预加载的CSS文件


void wobj.setCssFile( path );

说明：

预加载CSS文件不需要在HTML页面中显式引用，在Webview窗口加载HTML页面时自动加载，在页面跳转时也会自动加载。设置新的CSS文件后将清空之前设置的值（包括调用setCssText设置的值）。

参数：

  • file: (String)必选 预载入的CSS文件地址，仅支持本地文件，格式为相对路径URL（plus.io.RelativeURL），如"_www/preload.css"

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 如果Webview加载的html页面中存在网络css资源请求，将会把要加载的CSS文件添加到第一个请求css资源（url以“.css”结尾）后面。否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。
  • iOS- ALL(支持): iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS文件。iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.setCssFile('_www/js/preload.css');
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        设置加载的CSS文件
    </body>
</html>

uni-app使用plus注意事项

setCssText

设置预加载的CSS内容


void wobj.setCssText( text );

说明：

预加载CSS内容不需要在HTML页面中显式引用，在Webview窗口加载HTML页面时自动加载，在页面跳转时也会自动加载。设置新的CSS内容后将清空之前设置的值（包括调用setCssFile设置的值）。

参数：

  • text: (String)必选 预载入的CSS内容，必须符合CSS语法格式，如"body{background:red;}"

返回值：

void: 无

平台支持：

  • Android- ALL(支持): 如果Webview加载的html页面中存在网络css资源请求，将会把要加载的CSS内容添加到第一个请求css资源（url以“.css”结尾）后面。否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。
  • iOS- ALL(支持): iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS内容。iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.setCssText('body{background:red;}');
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        设置加载的CSS内容
    </body>
</html>

uni-app使用plus注意事项

setFavoriteOptions

设置Webview窗口的收藏参数


void wobj.setFavoriteOptions(options);

说明：

仅在流应用环境（流应用/5+浏览器）中有效：用户点击流应用环境的收藏按钮时使用的参数，如设置收藏页面标题，图标、页面地址等。

参数：

  • options: _(WebviewFavoriteOptions)必选 _Webview窗口收藏参数可设置窗口的收藏标题，图标、页面地址等信息。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setFavoriteOptions({title:'收藏页标题', href:'http://www.dcloud.io/'});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body style="text-align:center;">
        设置Webview窗口的收藏参数
    </body>
</html>

uni-app使用plus注意事项

setFixBottom

设置Webview窗口底部修复区域高度


void wobj.setFixBottom( height );

说明：

如果Webview加载页面中存在底部停靠区域（如“蘑菇街”WAP页面的底部Tab栏），在页面滚动时动态改变Webview高度可能会出现底部停靠区域抖动的现象（如360浏览器中向上滑顶部标题栏自动消失引起Webview变高）。此时可以调用此方法来指定底部停靠区域（通常是底部Tab栏）进行优化修复抖动效果，高度值为底部停靠区域的高度。

参数：

  • height: (Number)必选 需要优化修复的区域高度单位为像素值。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.mogujie.com/', 'test');
    // 设置Webview窗口底部优化修复区域高度
    embed.setFixBottom(54);
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        设置Webview窗口底部修复区域高度<br/>
    </body>
</html>

uni-app使用plus注意事项

setJsFile

设置预加载的JS文件


void wobj.setJsFile( path );

说明：

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

参数：

  • file: (String)必选 预载入的JS文件地址，仅支持本地文件，格式为相对路径URL（plus.io.RelativeURL），如"_www/preload.js"

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.setJsFile('_www/js/preload.js');
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        设置预加载的JS文件
    </body>
</html>

uni-app使用plus注意事项

setPullToRefresh

设置Webview窗口的下拉刷新效果


void wobj.setPullToRefresh(style, refreshCB );

说明：

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

参数：

  • style: _(WebviewPullToRefreshStyles)必选 _Webview窗口下拉刷新样式参数可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。
  • refreshCB: _(SuccessCallback)必选 _Webview窗口下拉刷新事件回调用户操作窗口的下拉刷新触发窗口刷新事件时触发。

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(支持)

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Webview Example</title>
        <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='<span>New Item '+(new Date())+'</span>';
            list.insertBefore(item,list.firstChild);
        }
        ws.endPullToRefresh();
    },2000);
}
        </script>
        <style type="text/css">
li {
    padding: 1em;
    border-bottom: 1px solid #eaeaea;
}
li:active {
    background: #f4f4f4;
}
        </style>
    </head>
    <body>
        <ul id="list" style="list-style:none;margin:0;padding:0;">
            <li><span>Initializ List Item 1</span></li>
            <li><span>Initializ List Item 2</span></li>
            <li><span>Initializ List Item 3</span></li>
            <li><span>Initializ List Item 4</span></li>
            <li><span>Initializ List Item 5</span></li>
            <li><span>Initializ List Item 6</span></li>
            <li><span>Initializ List Item 7</span></li>
            <li><span>Initializ List Item 8</span></li>
            <li><span>Initializ List Item 9</span></li>
            <li><span>Initializ List Item 10</span></li>
        </ul>
    </body>
</html>

uni-app使用plus注意事项

setRenderedEventOptions

设置Webview窗口rendered事件参数


void wobj.setRenderedEventOptions(options);

说明：

可设置页面渲染完成的判断标准，如判断页面顶部区域、中间区域、或底部区域。

参数：

返回值：

void: 无

平台支持：

  • Android- 2.2+(支持)
  • iOS- ALL(不支持)

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听rendering事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.addEventListener('rendered', function(e){
        console.log('Webview rendered');
    }, false);
    nw.setRenderedEventOptions({type:'bottom',interval:100});// 检查底部区域是否渲染完成，每隔100毫秒检查一次
    nw.show();
}
    </script>
    </head>
    <body>
        Webview窗口渲染完成事件
        <button onclick="createWebview()">Show</button>
    </body>
</html>

uni-app使用plus注意事项

setSoftinputTemporary

临时设置弹出系统软键盘样式

说明：

仅生效一次，设置后第一次弹出软键盘时生效。

参数：

  • mode: (String)可选 软键盘模式
  • position: (JSON)可选 触发弹出软键盘的编辑框位置信息支持设置以下属性：top - 编辑框距离窗口顶部的距离；height - 编辑框的高度。

返回值：

void: 无

setStyle

设置Webview窗口的样式


void wobj.setStyle( styles );

说明：

更新Webview窗口的样式，如窗口位置、大小、背景色等。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {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>
    </head>
    <body>
        设置Webview窗口的样式
        <button onclick="updateStyle()">setStyle</button>
    </body>
</html>

uni-app使用plus注意事项

setShareOptions

设置Webview窗口的分享参数


void wobj.setShareOptions(options);

说明：

仅在流应用环境（流应用/5+浏览器）中有效：用户点击流应用环境的分享按钮时使用的参数，如设置分享的标题、链接地址等。

参数：

  • options: _(WebviewShareOptions)必选 _Webview窗口分享参数可设置分享的标题、链接地址等信息。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setShareOptions({title:'分享的标题',href:'http://www.dcloud.io/'});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body style="text-align:center;">
        设置Webview窗口的分享参数
    </body>
</html>

uni-app使用plus注意事项

setTitleNViewButtonBadge

设置标题栏上按钮的角标


void wobj.setTitleNViewButtonBadge(options);

说明：

仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

options参数为json类型，包含以下属性：

  • index: (Number)必选 按钮的索引值此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。
  • text: (String)必选 角标文本内容最多显示3个字符，超过则显示…。

返回值：

void: 无

setTitleNViewButtonStyle

设置标题栏上按钮的样式


void wobj.setTitleNViewButtonStyle(index, styles);

说明：

仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

  • index: (Number)必选 按钮的索引值此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。
  • styles: (WebviewTitleNViewButtonStyles)必选 要设置的按钮样式仅更新新设置的属性值，之前设置的属性保持不变。

返回值：

void: 无

setTitleNViewSearchInputFocus

设置标题栏上输入框是否获取输入焦点


void wobj.setTitleNViewSearchInputFocus(focus);

说明：

仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

  • focus: (Boolean)必选 是否获取输入焦点true表示获取输入焦点（打开软键盘），false表示失去输入焦点（关闭软键盘）。

返回值：

void: 无

setTitleNViewSearchInputText

设置标题栏上输入框的内容


void wobj.setTitleNViewSearchInputText(text);

说明：

如果要清空用户输入的内容，可以设置为空字符串。仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效，未显示原生标题栏时操作此接口无任何效果。

参数：

  • text: (String)必选 要设置的文本内容

返回值：

void: 无

setVisible

设置Webview窗口是否可见


void wobj.setVisible( visible );

说明：

修改窗口是否可见并不影响窗口的显示栈顺序，窗口显示与隐藏也不会有动画效果。

参数：

  • visible: (Boolean)必选 设置Webview窗口是否可见，true表示可见，false表示不可见

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 设置Webview窗口是否可见
function setVisible(v) {
    embed.setVisible(v);
}
    </script>
    </head>
    <body>
        设置Webview窗口是否可见<br/>
        <button onclick="setVisible(true)">可见</button><br/>
        <button onclick="setVisible(false)">不可见</button><br/>
    </body>
</html>

uni-app使用plus注意事项

show

显示Webview窗口


void wobj.show( aniShow, duration, showedCB, extras );

说明：

当调用plus.webview.create方法创建Webview窗口后，需要调用其show方法才能显示，并可设置窗口显示动画及动画时间。Webview窗口被隐藏后也可调用此方法来重新显示。

参数：

  • aniShow: _(AnimationTypeShow)可选 _Webview窗口显示动画类型如果没有指定窗口动画类型，则使用默认值“none”，即无动画。
  • duration: _(Number)可选 _Webview窗口显示动画持续时间单位为ms，默认使用动画类型相对应的默认时间。
  • showedCB: _(SuccessCallback)可选 _Webview窗口显示完成的回调函数当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。
  • extras: (WebviewExtraOptions)可选 显示Webview窗口扩展参数可用于指定Webview窗口动画是否使用图片加速。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 创建并显示Webview窗口
function showWebview(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.show('slide-in-right', 300);
}
    </script>
    </head>
    <body>
        显示Webview窗口
        <button onclick="showWebview()">show</button>
    </body>
</html>

uni-app使用plus注意事项

showBehind

在指定Webview窗口后显示


void wobj.showBehind( webview );

说明：

当调用plus.webview.create方法创建Webview窗口后，可调用其showBehind方法显示在指定Webview窗口之后。这种显示方式不会出现动画效果，当指定的Webview窗口关闭后，则自身窗口自动显示出来。

参数：

  • webview: (WebviewObject)可选 指定的Webview窗口对象如果没有指定Webview窗口对象或指定的Webview窗口对象无效（如已经被关闭）则自身窗口直接无动画显示出来。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 创建并显示在当前Webview窗口之后
function showWebview(){
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.showBehind(ws);    // 在当前窗口之后显示
}
    </script>
    </head>
    <body>
        在指定Webview窗口后显示
        <button onclick="showWebview()">show</button><br/>
        <button onclick="ws.close()">Close</button>
    </body>
</html>

uni-app使用plus注意事项

showTitleNViewButtonRedDot

设置标题栏上按钮的红点


void wobj.showTitleNViewButtonRedDot(options);

说明：

仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。注意：设置显示按钮的角标后红点不显示。

参数：

options参数为json类型，包含以下属性：

  • index: (Number)必选 按钮的索引值此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。

返回值：

void: 无

stop

停止加载HTML页面内容


void wobj.stop();

说明：

触发Webview窗口停止加载页面内容，如果已经加载部分内容则显示部分内容，如果加载完成则显示全部内容。

参数：

无

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 停止加载HTML页面内容
function stopWebview(){
    embed.stop();
}
    </script>
    </head>
    <body>
        停止加载HTML页面内容
        <button onclick="stopWebview()">stop</button>
    </body>
</html>

uni-app使用plus注意事项

updateSubNViews

更新Webview窗口的原生子View控件对象


void wobj.updateSubNViews(Array[WebviewSubNViewStyles] styles);

说明：

通过WebviewSubNViewStyles中的id属性值匹配子View控件更新绘制内容，如果没有查找到对应id的子View控件则忽略。此操作仅更新子View控件上绘制的内容，不会添加或删除原生子View控件对象。

参数：

  • styles: (Array[WebviewSubNViewStyles])必选 要更新的子View控件样式不包括不需要更新的子View控件样式。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    plus.key.addEventListener('backbutton', function(){
        nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
// 创建带原生子View控件的Webview窗口 
function createWebview(){
    var styles = {
        top:'100px',
        bottom:'0px',
        popGesture:'hide',
        subNViews:[{
            id:'subnview1',
            styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
            tags:[{tag:'font',id:'font',text:'原生子View控件',textStyles:{size:'18px'}}]
        }]
    };
    nw||(nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles),
    nw.addEventListener('close', function(){
        nw=null;
    }, false));
    nw.show('pop-in');
}
// 更新原生子View控件
function updateSubNViews(){
    nw.updateSubNViews([{
        id:'subnview1',
        tags:[{tag:'font',id:'font',text:'更新后的原生子View控件',textStyles:{size:'18px'}}]
    }]);
}
    </script>
    </head>
    <body>
        Webview窗口的子View控件<br/>
        <button onclick="createWebview()">Create</button>
        <button onclick="updateSubNViews()">Update</button>
    </body>
</html>

uni-app使用plus注意事项

onclose

Webview窗口关闭事件

说明：

EventCallback类型

当Webview窗口关闭时触发此事件，类型为EventCallback。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {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>
    </head>
    <body>
        Webview窗口关闭事件
        <button onclick="embed.close()">onclose</button>
    </body>
</html>

uni-app使用plus注意事项

onerror

Webview窗口错误事件

说明：

WebviewEvent类型

当Webview窗口加载错误时触发此事件，类型为EventCallback。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.onerror=embedError;
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 页面错误事件回调函数
function embedError(e){
    alert('Error!');
}
    </script>
    </head>
    <body>
        Webview窗口错误事件
        <button onclick="embed.loadData('<xml>Not html</xml>')">onerror</button>
    </body>
</html>

uni-app使用plus注意事项

onloaded

Webview窗口页面加载完成事件

说明：

WebviewEvent类型

当Webview窗口页面加载完成时触发此事件，类型为EventCallback。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.onloaded=embedLoaded;
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 页面加载完成事件回调函数
function embedLoaded(e){
    alert('Loaded!');
}
    </script>
    </head>
    <body>
        Webview窗口页面加载完成事件
        <button onclick="embed.loadURL('http://m.weibo.cn')">onloaded</button>
    </body>
</html>

uni-app使用plus注意事项

onloading

Webview窗口页面开始加载事件

说明：

WebviewEvent类型

当Webview窗口开始加载新页面时触发此事件，类型为EventCallback。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    embed.onloading=embedLoading;
    ws.append(embed);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 页面开始加载事件回调函数
function embedLoading(e){
    alert('Loading!');
}
    </script>
    </head>
    <body>
        Webview窗口页面开始加载事件
        <button onclick="embed.loadURL('http://m.weibo.cn')">onloading</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewAnimationOptions

Webview窗口动画参数


interface WebviewAnimationOptions {
    attribute WebviewObject view;
    attribute WebviewAnimationStyles styles;
    attribute String action;
}

说明：

用于指定动画目标窗口，起始位置、目标位置等信息。

属性：

  • view: (WebviewObject类型)执行动画的窗口对象可取值Webview窗口对象、Webview窗口的id（String类型）、原生View窗口对象（plus.nativeObj.View）。

  • styles: (WebviewAnimationStyles类型)动画样式用于指定动画窗口的起始位置，目标位置等。

  • action: (String类型)窗口动画完成后的行为可取值："none" - 动画完成后不做任何操作；"hide" - 动画完成后隐藏窗口；"close" - 动画完成后关闭窗口。默认值为"none"。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%',render:'always'});
    wn.show('none');
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 窗口组合动画
function webviewAnimation(){
    plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},
    {view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},
    function(e){
        console.log('Animation finished: '+JSON.stringify(e));
    });
}
    </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
        <br/><br/>
        在新窗口中可以右滑返回（新窗口移动到屏幕外）
    </body>
</html>

uni-app使用plus注意事项

WebviewAnimationStyles

Webview窗口动画样式


interface WebviewAnimationStyles {
    attribute String fromLeft;
    attribute String toLeft;
}

说明：

用于指定动画窗口的起始位置、目标位置等信息。

属性：

  • fromLeft: (String类型)画窗口的起始左侧位置支持百分比、像素值，默认值为当前窗口的位置。

  • toLeft: (String类型)画窗口的目标左侧位置持百分比、像素值。注意：如果设置的位置与起始位置一直，则无动画效果。

WebviewBounceStyle

Webview窗口回弹样式

属性：

  • position: _(JSON类型)_Webview窗口支持回弹效果的方向可通过此参数设置开启Webview哪个方向支持回弹效果。支持以下属性：top：表示窗口顶部支持回弹效果；left：表示窗口左侧支持回弹效果；right：表示窗口右侧支持回弹效果；bottom：表示窗口底部支持回弹效果。目前仅支持top属性属性值：用于指定可拖拽的范围，可取百分比，如"10%"；像素值，如"100px"；自动计算值，如"auto"；无回弹效果值，如"none"；

  • changeoffset: _(JSON类型)_Webview窗口回弹时停靠的位置开启窗口回弹效果后，当窗口中展现的内容滚动到头（顶部或底部）时，再拖拽时窗口整体内容将跟随移动，拖拽过程中将触发"dragBounce"事件，松开后自动回弹到停靠位置。支持以下属性：top：表示窗口顶部回弹时停靠的位置。属性值：用于指定窗口回弹的位置，可取百分比，如"5%"；像素值，如"100px"；自动计算值，如"auto"，默认为可拖拽的范围值的一半；

  • slideoffset: _(JSON类型)_Webview窗口侧滑时停靠的位置开启窗口回弹效果后，当窗口中展现的内容滚动到头（左侧或右侧）时，在拖拽时窗口整体内容将跟随移动，松开后自动停靠的侧滑位置，并触发"slideBounce"事件。支持以下属性：left：表示窗口左侧侧滑的位置；right：表示窗口右侧侧滑的位置。属性值：用于指定滑动后停靠的距离，可取百分比（left/right相对于窗口的宽度，top/bottom相对于窗口的高度），如"30%"；像素值，如"100px"；自动计算值，为可拖拽范围，如"auto"。

  • offset: _(JSON类型)_Webview窗口拖拽偏移的位置开启窗口回弹效果后，可以通过此属性值来主动设置拖拽的偏移位置，与手动操作拖拽至此偏移位置松开后的逻辑一致。支持以下属性：top：表示窗口顶部偏移的位置；left：表示窗口左侧偏移的位置；right：表示窗口右侧偏移的位置；bottom：表示窗口底部偏移的位置。属性值：用于指定偏移的位置，可取百分比，如"5%"；像素值，如"100px"；有效值范围为0到position属性定义的位置。

  • preventTouchEvent: _(Boolean类型)_Webview窗口是否阻止touch事件传递给DOM元素设置为true表示阻止touch事件，设置为false表示不阻止touch事件。当开启侧滑功能（左侧滑和右侧滑）时默认值为true，否则为false。

平台支持

  • Android - 2.3+ (支持): 由于Touch事件存在冲突，如果Webview使用侧滑功能，需要将Webview设置为阻止touch事件传递才能触发。当html页面内容需要处理横向滚动时并且也需要侧滑效果时，需初始化时设置不阻止touch事件传递：webview.setBounce({position:{left:'100px'},solideoffset:{left:'auto'},preventTouchEvent:false});。当操作非横向滚动元素时及时动态设置阻止touch事件传递以触发侧滑效果：webview.setBounce({preventTouchEvent:true});。
  • iOS - 5.1+ (不支持): Touch事件不存在冲突，不支持此功能。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 重置窗口回弹位置
function resetBounce(){
    ws.resetBounce();
}
    </script>
    </head>
    <body style="text-align:center;">
        <br/><br/><br/>
        设置Webview窗口的回弹效果<br/>
        回弹后显示停靠到44px的位置<br/><br/>
        <button onclick="resetBounce()">重置回弹位置</button>
        <br/><br/><br/>
        *暂仅支持顶部的回弹效果*
    </body>
</html>

uni-app使用plus注意事项

WebviewContentAnimationOptions

Webview窗口内容动画参数


interface WebviewAnimationOptions {
    attribute String type;
    attribute Number duration;
    attribute Number frames;
    attribute Rect region;
}

说明：

指定动画的类型、持续时间等信息。

属性：

  • type: (String类型)动画类型可取值："shrink" - 从上到下分块收缩清除窗口动画。

  • duration: (Number类型)动画持续时间单位为毫秒，默认值为200ms。

  • frames: (Number类型)动画帧数必须为大于0的整数，默认值为12。

  • region: (json类型)动画作用区域支持以下属性：top - 区域距离控件顶部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'；bottom - 区域距离控件底部的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的高度）,默认值为'0px'；left - 区域距离控件左侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'；right - 区域距离控件右侧的偏移量，属性值可取像素值（如"100px"），百分比（如"10%"，相对于控件的宽度）,默认值为'0px'。如“{top:'44px',bottom:'48px'}”。

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>Webview Example</title>
        <script type="text/javascript">
var wv=null;
// H5 plus事件处理
function plusReady(){
    wv = plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// Webview窗口动画 
function animateWebview(){
    wv.animate({type:'shrink',frames:20,region:{top:'44px',bottom:'48px'},duration:1000},function(){
        wv.restore();    // 内容动画结束后可调用此动画恢复显示内容
    });
}
        </script>
    </head>
    <body>
        Webview窗口内容动画<br/>
        <button onclick="animateWebview()">内容动画</button><br/>
    </body>
</html>

uni-app使用plus注意事项

WebviewDock

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

常量：

  • "top": (String类型)控件停靠则页面顶部
  • "bottom": (String类型)控件停靠在页面底部
  • "right": (String类型)控件停靠在页面右侧
  • "left": (String类型)控件停靠在页面左侧

WebviewDragEvent

Webview窗口滑动事件数据

属性：

  • direction: (String类型)手势类型可取值："rtl" - 从右向左滑动手势；"left" - 向左滑动手势，与rtl一致；"ltr" - 从左向右滑动手势；"right" - 向右滑动手势，与ltr一致。

  • type: (String类型)窗口滑动类型可取值："start" - 表示开始滑动操作；"move" - 表示正在滑动；"end" - 表示滑动操作结束。

  • result: (String类型)窗口滑动结果可取值："true" - 表示滑动操作成功；"false" - 表示滑动操作失败（恢复到滑动前的状态）；"undefined" - 无状态值（当type值为"end"时返回此值）。

  • id: (String类型)当前操作窗口标识当type值为"start"/"move"时，保存当前操作窗口（或View控件）的标识；当type值为"end"时保存滑动操作后显示窗口（或View控件）的标识（即result值为"true"则认为关联窗口显示，result值为false则认为主窗口显示）。

  • otherId: (String类型)关联窗口标识滑动操作关联窗口（或View控件）的标识。

  • targetId: (String类型)主窗口标识滑动操作主窗口（或View控件）的标识。

  • progress: (Number类型)滑动进度滑动进度位置信息，取值范围为0-100，如20表示滑动了总距离的20%：当type值为"start"时progress值为0；当type值为"end"时如果result为true则progress值为0，如果result为false则progress值为100；当type值为"move"时，保存当前滑动的进度信息（注：多次触发move事件）。

WebviewDragOptions

窗口手势操作参数

属性：

  • callbackStep: (Number类型)滑屏操作回调事件触发步长用于设置滑屏回调事件触发频率，取值范围为1-100，值越小触发频率越高，值越大触发频率越小，默认值为20。如设置值为20，则表示滑屏操作移动距离超过可移动范围的20%则触发一次回调事件，可通过回调函数参数（WebviewDragEvent）的progress属性获取。注意：触发频率过大会影响效率，开发者需谨慎设置此值。

  • direction: (String类型)设置的手势类型可取值：可取值："rtl" - 从右向左滑动手势；"left" - 向左滑动手势，与rtl一致；"ltr" - 从左向右滑动手势；"right" - 向右滑动手势，与ltr一致。

  • moveMode: (String类型)滑动手势模式可取值："followFinger" - 当前Webview窗口跟随手指滑动；"silent" - 当前Webview窗口不跟随手指滑动；"bounce" - 当前Webview窗口自动回弹（松手后窗口恢复到拖动前的位置）,通常可通过设置此模式来实现Tab项无法继续滑动切换自动回弹效果。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%'});
    wn.show('none');
    // 左滑显示新窗口
    ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
        console.log('Left drag event: '+JSON.stringify(e));
    });
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        左滑可打开新页面
    </body>
</html>

uni-app使用plus注意事项

WebviewDragOtherViewOptions

手势操作关联对象参数

属性：

  • view: (String类型)手势关联对象可取值Webview窗口的id（String类型）、Webview窗口对象、原生View窗口对象（plus.nativeObj.View）。

  • moveMode: (String类型)滑动模式可取值："follow" - 同步跟随主Webview窗口滑动；"silent" - 不跟随主Webview窗口滑动。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%'});
    wn.show('none');
    // 左滑显示新窗口
    ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
        console.log('Left drag event: '+JSON.stringify(e));
    });
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        左滑可打开新页面
    </body>
</html>

uni-app使用plus注意事项

WebviewDrawOptions

截屏绘制操作参数

属性：

  • bit: (String类型)截屏图片的位深可取值："RGB565" - RGB565彩色模式,一个像素占两个字节；"ARGB" - ARGB彩色模式,保存透明度信息。

平台支持

  • Android - ALL (支持): 默认使用"RGB565"模式。注意："ARGB"模式在Android4.4之前一个像素占用两个字节，在Android4.4之后一个像素占用4个字节。由于占用内存较大，开发者需谨慎使用。
  • iOS - ALL (不支持): 忽略此属性，使用"ARGB"模式（一个像素占用4个字节）。
    • check: (Boolean类型)是否检测截屏图片是否为空白可取值：true - 表示检测到截屏到空白图片时认为操作失败（触发错误回调函数）；false - 表示不检测，即使为空白图片仍然返回成功。默认值为false。

  • clip: (plus.nativeObj类型)设置截屏区域相对于Webview窗口的区域信息，默认值为{top:'0px',left:'0px',width:'100%',height:'100%'}。

  • checkKeyboard: (Boolean类型)是否检测当前是否弹出软键盘可取值：true - 表示检测到弹出软键盘是认为截屏操作失败（触发错误回调函数）；false - 表示不检测软键盘状态，直接截屏。默认值为false。

平台支持

  • Android - ALL (支持): 当弹出软键盘时，Webview窗口大小会调整（保证编辑区域可视）。此时截屏获取的图片为调整后的窗口大小。
  • iOS - ALL (不支持): 忽略此属性，软键盘弹出时Webview窗口大小不会调整，仍然截屏全屏。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 截屏绘制
var bitmap=null;
function captureWebview() {
    bitmap = new plus.nativeObj.Bitmap('test');
    // 将webview内容绘制到Bitmap对象中
    ws.draw(bitmap,function(){
        console.log('截屏绘制图片成功');
    },function(e){
        console.log('截屏绘制图片失败：'+JSON.stringify(e));
    },{check:true,    // 设置为检测白屏
        clip:{top:'50%',left:'0px',height:'50%',width:'100%'}    // 设置截屏区域
    });
}
    </script>
    </head>
    <body>
        截屏绘制Webview窗口<br/>
        <button onclick="captureWebview()">Draw</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewFavoriteOptions

窗口收藏参数

说明：

在流应用环境中调用收藏功能时使用的参数。

属性：

  • icon: (String类型)收藏时显示的图标在收藏列表中显示的图标，默认使用应用图标。

  • title: (String类型)收藏时显示的标题在收藏列表中显示的标题字符串。

  • href: (String类型)收藏的页面地址必须是网络地址。

WebviewLoadDataOptions

创建加载HTML数据参数

属性：

  • baseURL: (String类型)页面的Base URL

  • mimeType: _(String类型)_HTML数据的数据类型默认值为"text/html"。

  • encoding: _(String类型)_HTML数据的编码类型默认值为"utf-8"。

WebviewShareOptions

窗口的分享参数

说明：

在流应用环境中调用分享功能时使用的参数。

属性：

  • icon: (String类型)分享时使用的图标默认使用应用图标。

  • title: (String类型)分享时使用的标题

  • href: (String类型)分享时使用的链接地址必须是网络地址。

WebviewSubNViewStyles

窗口原生子View控件样式

说明：

可设置原生控件的标识、大小、位置以及绘制的内容等。

属性：

  • id: (String类型)原生子View控件的标识可通过plus.nativeObj.View.getViewById(id)方法传入此标识来获取子View控件对象。

  • type: (String类型)原生子View控件类型可取值："NView" - 原生子View控件（plus.nativeObj.NView）；"ImageSlider" - 原生图片轮播控件（plus.nativeObj.ImageSlider）。默认值为"NView"。

  • styles: (ViewStyles类型)原生子View控件的样式可设置原生控件的位置、大小等信息。

  • tags: (Array[ViewDrawTagStyles]类型)原生子View控件初始绘制内容可设置绘制图片、矩形区域、文本等内容。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    plus.key.addEventListener('backbutton', function(){
        nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
// 创建带原生子View控件的Webview窗口 
function createWebview(){
    nw=nw||plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',subNViews:[{
        id:'subnview1',
        styles:{top:'0px',height:'100px',backgroundColor:'#FF0000'},
        tags:[{tag:'font',id:'font',text:'原生子View控件',textStyles:{size:'18px'}}]
    }]});
    nw.addEventListener('close', function(){
        nw=null;
    }, false);
    nw.show('pop-in');
}
    </script>
    </head>
    <body>
        Webview窗口的子View控件<br/>
        <button onclick="createWebview()">Create</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewTitleNViewStyles

窗口标题栏控件样式

说明：

标题栏控件固定高度为44px,可通过Webview窗口对象的getTitleNView方法获取标题栏原生控件对象plus.nativeObj.View，调用其方法绘制自定义内容。可以通过WebviewObject对象的setStyle方法传入titleNView属性更新样式，如wobj.setStyle({titleNView:{titleColor:'#FF0000'}})。

属性：

  • autoBackButton: (Boolean类型)标题栏控件是否显示左侧返回按钮可取值："true" - 显示返回按钮；"false" - 不显示返回按钮。默认值为"false"。返回按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。点击返回按钮的逻辑与按下系统返回键逻辑一致。

  • backgroundColor: (String类型)标题栏控件的背景颜色颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景；"rgba(R,G,B,A)"，如rgba(255,0,0,0.5)表示半透明红色背景。默认值为"#F7F7F7"。

  • blurEffect: (String类型)模糊（毛玻璃）效果此效果将会高斯模糊显示标题栏后的内容，仅在type为"transparent"或"float"时有效。可取值："dark" - 暗风格模糊，对应iOS原生UIBlurEffectStyleDark效果；"extralight" - 高亮风格模糊，对应iOS原生UIBlurEffectStyleExtraLight效果；"light" - 亮风格模糊，对应iOS原生UIBlurEffectStyleLight效果；"none" - 无模糊效果。HBuilderX2.4.3+版本支持，默认值为"none"。注意：使用模糊效果时应避免设置背景颜色，设置背景颜色可能覆盖模糊效果。

平台支持

  • Android - ALL (不支持): 忽略此属性。
  • iOS - 8.0+ (支持)
    • buttons: (Array[WebviewTitleNViewButtonStyles]类型)标题栏上的自定义按钮创建的自定义按钮数目不限制，实际应用中建议最多设置4个按钮（包括左侧返回按钮）。注意：此属性不支持动态修改，仅在创建titleNView时设置有效。

  • coverage: (String类型)标题栏控件变化作用范围仅在type值为transparent时有效，页面滚动时标题栏背景透明度将发生变化。当页面滚动到指定偏移量时标题栏背景变为完全不透明。支持百分比、像素值，默认为'132px'。

  • homeButton: (Boolean类型)标题栏控件是否显示Home按钮可取值："true" - 显示Home按钮；"false" - 不显示Home按钮。默认值为"false"。Home按钮的颜色为窗口标题文字颜色，按下时颜色自动调整透明度为0.3。点击Home按钮的逻辑为关闭所有非首页窗口，显示首页窗口。

  • padding: (String类型)内边距标题栏左右的内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"。

  • padding-right: (String类型)右内边距标题栏右侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"，优先级padding-right > padding。

  • padding-left: (String类型)左内边距标题栏左侧内边距，单位为px（逻辑像素值），如"10px"表示10逻辑像素值。默认值为"0px"，优先级padding-left > padding。

  • progress: (WebviewProgressStyles类型)标题栏控件的进度条样式设置此属性则在标题栏控件的底部显示进度条，可配置进度条颜色值即高度。设置此属性值为undefined或null则隐藏进度条。默认不显示底部进度条。注意：此属性将废弃，推荐使用WebviewStyles的progress。

  • searchInput: (WebviewTitleNViewSearchInputStyles类型)标题栏上的搜索框样式

  • splitLine: (WebviewSplitLineStyles类型)标题栏控件的底部分割线设置此属性则在标题栏控件的底部显示分割线，可配置颜色值及高度。设置此属性值为undefined或null则隐藏分割线。默认不显示底部分割线。

  • tags: (Array[ViewDrawTagStyles]类型)标题栏上初始自定义绘制内容可用于设置自定义绘制图片、矩形区域、文本等内容。注意：此属性不支持动态修改，仅在创建titleNView时设置有效，如果需要更新绘制内容可根据tags的id调用draw方法操作。

  • titleColor: (String类型)标题栏控件的标题文字颜色颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示标题文字颜色为红色。type=transparent时默认值为"#FFFFFF"，其它情况默认值为"#000000"。

  • titleOverflow: (String类型)标题栏控件的标题文字超出显示区域时处理方式可取值："clip" - 超出显示区域时内容裁剪；"ellipsis" - 超出显示区域时尾部显示省略标记（…）。默认值为"ellipsis"。

  • titleText: (String类型)标题栏控件的标题文字内容在标题栏控件居中（水平和垂直）显示，左右边距为88px，如果文本过长则尾部裁剪（加三个点"…"）显示。当不设置titleText属性或属性值为undefined/null时，使用当前Webview窗口加载页面的标题，并自动同步更新页面的标题。

  • titleSize: (String类型)标题栏控件的标题文字字体大小字体大小单位为像素，如"20px"表示字体大小为20像素，默认值为17像素。

  • type: (String类型)标题栏控件样式可取值："default" - 默认样式，顶部停靠显示，挤压Webview页面内容显示区域；"transparent" - 透明样式，顶部沉浸式显示覆盖Webview页面内容，标题栏上内容（除按钮外）全部透明，当页面滚动时透明度逐渐变化，直到不透明显示；"float" - 悬浮样式，顶部悬浮显示，标题栏覆盖在Webview上，此时应该设置标题栏背景颜色（backgroundColor）为半透明才能透视到覆盖Webview的内容。默认值为"default"。注意：此属性不支持动态更新。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 带标题栏控件的Webview窗口
var webview = null;
function titleNViewWebview() {
    webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {'titleNView':{'backgroundColor':'#D74B28','titleText':'标题栏文字','titleColor':'#CCCCCC',autoBackButton:true}});
    webview.addEventListener('close', function(){
        webview=null;
    });
    webview.addEventListener('titleUpdate', function(){
        webview.show();
    });
}
    </script>
    </head>
    <body>
        带标题栏Webview窗口<br/>
        <button onclick="titleNViewWebview()">打开</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewTitleNViewButtonStyles

窗口标题栏自定义按钮样式

属性：

  • type: (String类型)按钮样式运行环境中内置按钮样式直接使用，内置样式忽略fontSrc和text属性。可取值："forward" - 前进按钮；"back" - 后退按钮；"share" - 分享按钮；"favorite" - 收藏按钮；"home" - 主页按钮；"menu" - 菜单按钮；"close" - 关闭按钮；"none" - 无样式。默认值为无样式（"none"），需通过text属性设置按钮上显示的内容、通过fontSrc属性设置使用的字体库。

  • background: (String类型)按钮的背景颜色仅在标题栏type=transparent时生效，当标题栏透明时按钮显示的背景颜色。可取值#RRGGBB和rgba格式颜色字符串，默认值为灰色半透明。

  • badgeText: (String类型)按钮上显示的角标文本最多显示3个字符，超过则显示为…。

  • color: (String类型)按钮上文字颜色可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为窗口标题栏控件的标题文字颜色。

  • colorPressed: (String类型)按下状态按钮文字颜色可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色返回键；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为color属性值自动调整透明度为0.3。

  • float: (String类型)按钮在标题栏上的显示位置可取值："right" - 在标题栏中靠右排列显示；"left" - 在标题栏中靠左侧排列显示（在返回键后）。默认值为"right"。

  • fontWeight: (String类型)按钮上文字的粗细可取值："normal" - 标准字体；"bold" - 加粗字体。默认值为"normal"。

  • fontSize: (String类型)按钮上文字大小可取值：字体高度像素值，数字加"px"格式字符串，如"22px"。 窗口标题栏为透明样式（type="transparent"）时，默认值为"22px"；窗口标题栏为默认样式（type="default"）时，默认值为"27px"。

  • fontSrc: (String类型)按钮上文字使用的字体文件路径字体文件路径支持以下类型：相对路径 - 相对于当前页面的host位置，如"a.ttf"，注意当前页面为网络地址则不支持；绝对路径 - 系统绝对路径，如Android平台"/sdcard/a.ttf"，此类路径通常通过其它5+ API获取的；扩展相对路径URL(RelativeURL) - 以"_"开头的相对路径，如"_www/a.ttf"；本地路径URL - 以“file://”开头，后面跟随系统绝对路径。

  • onclick: (WebviewCustomButtonCallback类型)按钮点击后触发的回调函数回调函数中将返回此JSON对象。

  • redDot: (Boolean类型)按钮上是否显示红点设置为true则显示红点，false则不显示红点。默认值为false。注意：当设置了角标文本时红点不显示。

  • select: (Boolean类型)是否显示选择指示图标设置为true则显示选择指示图标（向下箭头），颜色与文字颜色一致；false则不显示。默认值为false。

  • text: (String类型)按钮上显示的文字推荐使用一个字符，超过一个字符可能无法正常显示，使用字体图标时unicode字符表示必须'\u'开头，如"\ue123"（注意不能写成"\e123"）。

  • width: (String类型)按钮的宽度可取值："*px" - 逻辑像素值，如"10px"表示10逻辑像素值，按钮的内容居中显示；"auto" - 自定计算宽度，根据内容自动调整按钮宽度。默认值为"44px"（适合字体图标）。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 点击自定义按钮回调函数
function clickButton(){
    plus.nativeUI.alert('clicked!');
}
// 标题栏控件显示自定义按钮
var webview = null;
function titleNViewWebview() {
    webview = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', 
        {'titleNView':{style:'transparent',backgroundColor':'#D74B28','titleText':'标题栏文字','titleColor':'#CCCCCC',autoBackButton:true,
            buttons:[{text:'...',float:'right',onclick:clickButton}]
        }});
    webview.addEventListener('close', function(){
        webview=null;
    });
    webview.addEventListener('titleUpdate', function(){
        webview.show();
    });
}
    </script>
    </head>
    <body>
        Webview窗口标题栏显示自定义按钮<br/>
        <button onclick="titleNViewWebview()">打开</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewTitleNViewSearchInputStyles

窗口标题栏搜索框样式

说明：

搜索输入框输入内容变化时触发"titleNViewSearchInputChanged"事件；用户点击软键盘上的“搜索”按钮时触发"titleNViewSearchInputConfirmed"事件。

属性：

  • autoFocus: (Boolean类型)是否自动获取焦点设置为true表示自动获取焦点，当窗口显示时搜索编辑框自动获取输入焦点（弹出软键盘）。默认值为false。

  • align: (String类型)非输入状态下文本的对齐方式可取值："left" - 居左对齐；"right" - 居右对齐；"center" - 居中对齐。默认值为"center"（居中对齐）。

  • backgroundColor: (String类型)背景颜色颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示背景颜色为红色。默认值为白色半透明"rgba(255,255,255,0.5)"。

  • borderRadius: (String类型)输入框的圆角半径取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。默认值为无圆角。

  • placeholder: (String类型)提示文本输入框未获取输入焦点时显示的文本内容，输入框获取输入焦点时内容为空时显示的文本内容。

  • placeholderColor: (String类型)提示文本颜色颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示提示文本颜色为红色。默认值为"#CCCCCC"。

  • disabled: (Boolean类型)是否可输入编辑框可输入时，点击编辑框可获取输入焦点（弹出软键盘）；编辑框不可输入时，点击编辑框触发"titleNViewSearchInputClicked"事件。默认值为false。

WebviewProgressStyles

标题栏控件的进度条样式

说明：

显示在标题栏控件底部。

属性：

  • color: (String类型)进度条颜色可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色分割线；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为"#00FF00"。

  • height: (String类型)进度条高度可取值：像素值（逻辑像素），支持小数点，如"1px"表示1像素高；百分比，如"1%"，相对于标题栏控件的高度。默认值为"2px"。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    plus.key.addEventListener('backbutton', function(){
        nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
// 创建带标题栏的Webview窗口 
function createWebview(){
    nw||nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',titleNView:{backgroundColor:'#00FF00',progress:{color:'#0000FF'}}}),
    nw.addEventListener('close', function(){
        nw=null;
    }, false);
    nw.show('pop-in');
}
    </script>
    </head>
    <body>
        Webview窗口的标题栏上显示进度条<br/>
        <button onclick="createWebview()">打开</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewSplitLineStyles

窗口标题栏控件的分割线样式

说明：

显示在标题栏控件底部。

属性：

  • color: (String类型)底部分割线颜色可取值： "#RRGGBB"格式字符串，如"#FF0000"表示绘制红色分割线；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为"#CCCCCC"。

  • height: (String类型)底部分割线高度可取值：像素值（逻辑像素），支持小数点，如"1px"表示1像素高；百分比，如"1%"，相对于标题栏控件的高度。默认值为"1px"。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    plus.key.addEventListener('backbutton', function(){
        nw&&nw.isVisible()?nw.hide('pop-out'):plus.runtime.quit();
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
// 创建带标题栏的Webview窗口 
function createWebview(){
    nw||nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {popGesture:'hide',titleNView:{backgroundColor:'#00FF00',splitLine:{color:'#0000FF'}}}),
    nw.addEventListener('close', function(){
        nw=null;
    }, false);
    nw.show('pop-in');
}
    </script>
    </head>
    <body>
        Webview窗口的标题栏上显示分割线<br/>
        <button onclick="createWebview()">打开</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewEvent

Webview窗口事件

常量：

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

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口关闭事件
function eventTest(){
    if(nw){return;}
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', {top:'46px',bottom:'0px'});
    nw.addEventListener('close', function(e){
        console.log('Webview closed!');
        nw=null;
    }, false );
    nw.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        Webview窗口关闭事件
        <button onclick="eventTest()">start</button>
        <button onclick="nw.close()">close</button>
    </body>
</html>
  • "dragBounce": _(String类型)_Webview窗口回弹事件通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后，当用户向下拖拽窗口时触发发此事件，回调函数类型为BounceEventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
    ws.addEventListener('dragBounce', onPullStateChange, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 下拉状态改变
function onPullStateChange(e){
    switch(e.status){
        case 'beforeChangeOffset':
        console.log('顶部回弹：可继续往下拖拽');
        break;
        case 'afterChangeOffset':
        console.log('顶部回弹：松开会重置回弹位置');
        break;
        case 'dragEndAfterChangeOffset':
        console.log('顶部回弹：松开停靠回弹');
        break;
        default:
        break;
    }
}
// 重置窗口回弹位置
function resetBounce(){
    ws.resetBounce();
}
    </script>
    </head>
    <body style="text-align:center;">
        <br/><br/><br/>
        设置Webview窗口的回弹效果<br/>
        回弹后显示停靠到44px的位置<br/><br/>
        <button onclick="resetBounce()">重置回弹位置</button>
        <br/><br/><br/>
        *暂仅支持顶部的回弹效果*
    </body>
</html>

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

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


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口加载错误事件
function eventTest() {
    // 打开新窗口
    nw=plus.webview.create('', {top:'46px',bottom:'0px});
    nw.addEventListener('error', function(e){
        console.log('Error: '+nw.getURL());
    }, false);
    nw.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        Webview窗口加载错误事件
        <button onclick="eventTest()">start</button>
        <button onclick="nw.loadURL('http://bucunzaideyuming.abcdeg')">error</button>
    </body>
</html>
  • "hide": _(String类型)_Webview窗口隐藏事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口隐藏（窗口动画完成后）时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
    createWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听show、hide事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', {top:'46px',bottom:'0px'});
    nw.addEventListener('show', function(e){
        console.log('Webview Showed');
    }, false);
    nw.addEventListener('hide', function(e){
        console.log('Webview Hided');
    }, false);
}
// 显示Webview窗口
function showWebview(){
    nw.show('slide-in-right');
}
// 隐藏Webview窗口
function hideWebview(){
    nw.hide();
}
    </script>
    </head>
    <body>
        Webview窗口显示隐藏事件
        <button onclick="showWebview()">Show</button>
        <button onclick="hideWebview()">Hide</button>
    </body>
</html>
  • "loading": _(String类型)_Webview窗口页面开始加载事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口开始加载新页面时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口页面开始加载事件
function eventTest() {
    // 打开新窗口
    nw=plus.webview.create('', {top:'46px',bottom:'0px'});
    nw.addEventListener('loading', function(e){
        console.log('Loading: '+nw.getURL());
    }, false);
    nw.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        Webview窗口页面开始加载事件
        <button onclick="eventTest()">start</button>
        <button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loading</button>
    </body>
</html>
  • "loaded": _(String类型)_Webview窗口页面加载完成事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口页面加载完成时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口页面加载完成事件
function eventTest() {
    // 打开新窗口
    nw=plus.webview.create('', '', {top:'46px',bottom:'0px'} );
    nw.addEventListener('loaded', function(e){
        console.log('Loaded: '+nw.getURL());
    }, false);
    nw.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        Webview窗口页面加载完成事件
        <button onclick="eventTest()">start</button>
        <button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loaded</button>
    </body>
</html>
  • "maskClick": _(String类型)_Webview窗口显示遮罩层时点击事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 显示遮罩层
    ws.setStyle({mask:'rgba(0,0,0,0.5)'});
    // 点击关闭遮罩层
    ws.addEventListener('maskClick', function(){
        ws.setStyle({mask:'none'});
    },false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        Webview窗口页面加载完成事件
        <br/>
        点击窗口关闭遮罩层
    </body>
</html>

  • "recovery": _(String类型)_Webview内核崩溃事件iOS平台使用WKWebview时，当系统内存不足时可能会导致WKWebview内核崩溃（页面白屏）。此时会触发recovery事件。

  • "rendering": _(String类型)_Webview窗口开始渲染事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口开始渲染内容时触发此事件，回调函数类型为EventCallback。


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听rendering事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.addEventListener('rendering', function(e){
        console.log('Webview rendering');
    }, false);
    nw.show();
}
    </script>
    </head>
    <body>
        Webview窗口渲染事件
        <button onclick="createWebview()">Show</button>
    </body>
</html>
  • "rendered": _(String类型)_Webview窗口渲染完成事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口渲染完成时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听rendering事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.addEventListener('rendered', function(e){
        console.log('Webview rendered');
    }, false);
    nw.show();
}
    </script>
    </head>
    <body>
        Webview窗口渲染完成事件
        <button onclick="createWebview()">Show</button>
    </body>
</html>
  • "show": _(String类型)_Webview窗口显示事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口显示（窗口动画完成后）时触发此事件，回调函数类型为EventCallback。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
    createWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听show、hide事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
    nw.addEventListener('show', function(e){
        console.log('Webview Showed');
    }, false);
    nw.addEventListener('hide', function(e){
        console.log('Webview Hided');
    }, false);
}
// 显示Webview窗口
function showWebview(){
    nw.show('slide-in-right');
}
// 隐藏Webview窗口
function hideWebview(){
    nw.hide();
}
    </script>
    </head>
    <body>
        Webview窗口显示隐藏事件
        <button onclick="showWebview()">Show</button>
        <button onclick="hideWebview()">Hide</button>
    </body>
</html>
  • "titleNViewSearchInputChanged": _(String类型)_Webview标题栏搜索框输入内容更新事件当页面配置原生标题栏显示搜索框，在搜索框获取焦点输入的内容发生变化时触发。

var ws=plus.webview.currentWebview();    //获取当前窗口对象
//监听标题栏搜索框输入内容更新事件
ws.addEventListener('titleNViewSearchInputChanged', function(e){
    console.log('titleNViewSearchInputChanged: '+JSON.stringify(e));
}, false);
  • "titleNViewSearchInputConfirmed": _(String类型)_Webview标题栏搜索框输入确认事件当页面配置原生标题栏显示搜索框，在搜索框获取完成（用户点击软键盘的“搜索”按钮）时触发。

var ws=plus.webview.currentWebview();    //获取当前窗口对象
//监听标题栏搜索框输入完成事件
ws.addEventListener('titleNViewSearchInputConfirmed', function(e){
    console.log('titleNViewSearchInputConfirmed: '+JSON.stringify(e));
}, false);
  • "titleNViewSearchInputClicked": _(String类型)_Webview标题栏搜索框点击事件当页面配置原生标题栏显示搜索框并设置disabled为true，点击搜索输入框时触发。

var ws=plus.webview.currentWebview();    //获取当前窗口对象
//监听标题栏搜索框点击事件
ws.addEventListener('titleNViewSearchInputClicked', function(e){
    console.log('titleNViewSearchInputClicked');
}, false);
  • "titleNViewSearchInputFocusChanged": _(String类型)_Webview标题栏搜索框焦点变化事件当页面配置原生标题栏显示搜索框，搜索框的输入焦点发生变化时触发。回调函数中的focus属性值为true表示获取焦点，false表示失去焦点。

var ws=plus.webview.currentWebview();    //获取当前窗口对象
//监听标题栏搜索框焦点变化事件
ws.addEventListener('titleNViewSearchInputFocusChanged', function(e){
    if(e.focus){
        console.log('titleNViewSearchInput focus!');
    }else{
        console.log('titleNViewSearchInput blur!');
    }
}, false);
  • "titleUpdate": _(String类型)_Webview加载页面标题更新事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载新页面更新标题时触发此事件，回调函数类型为SuccessCallback。注意：此事件会先于loaded事件触发，通常在加载网络页面时通过此事件可更快获取到页面的标题。

var nw=null;
// 创建Webview窗口监听侧滑返回事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860/', '', {top:'100px',bottom:'0px'});
    //监听窗口标题更新事件
    nw.addEventListener('titleUpdate', function(e){
        console.log('Update title: '+e.title);
    }, false);
    plus.webview.currentWebview().append(nw);
}
  • "touchstart": _(String类型)_Webview窗口接收到触屏事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当用户操作按下到Webview窗口时触发此事件，回调函数类型为SuccessCallback。注意：每按下屏幕触发一次此事件。

var nw=null;
// 创建Webview窗口监听触屏事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860/', '', {top:'100px',bottom:'0px'});
    // 监听窗口触屏事件
    nw.addEventListener('touchstart', function(e){
        console.log('touchstart');
    }, false );
    plus.webview.currentWebview().append(nw);
}
  • "popGesture": _(String类型)_Webview窗口侧滑返回事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口侧滑返回时触发此事件，回调函数类型为PopGestureCallback。

平台支持

  • Android - 2.2+ (支持): 仅在流应用环境中支持此事件；在5+应用中不支持侧滑返回功能，因此不会触发此事件。
  • iOS - ALL (支持): Webview设置侧滑返回功能才能触发此事件。

var nw=null;
// 创建Webview窗口监听侧滑返回事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'100px',bottom:'0px',popGesture:'hide'} );
    // 监听窗口侧滑返回事件
    nw.addEventListener('popGesture', function(e){
        poplog.innerText='popGesture: '+e.type+','+e.result+','+e.progress;
    }, false);
}
  • "progressChanged": _(String类型)_Webview窗口加载进度变化事件通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载页面进度变化时触发此事件。回调函数原型为void PorgressCandedCallback(Event e),可通过e.progress获取窗口加载进度，取值范围为0-100。

var nw=null;
// 创建Webview窗口监听加载进度事件
function createWebview(){
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {top:'100px', bottom:'0px'});
    //监听窗口加载进度变化事件
    nw.addEventListener('progressChanged', function(e){
        // e.progress可获取加载进度
        outlog.innerText='Progress Changed: '+e.progress+'%';
        console.log('Progress Changed: '+JSON.stringify(e));
    }, false);
    nw.show();
}
// 刷新Webview窗口
function reloadWebview(){
    nw&&nw.reload();
}
  • "pullToRefresh": _(String类型)_Webview窗口下拉刷新事件Webview窗口打开下拉刷新功能后，用户操作下拉刷新时或调用beginPullToRefresh方法时触发，用于通知业务逻辑可以开始执行刷新操作。更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
    var cw=plus.webview.currentWebview();
    cw.setStyle({    // 开启下拉刷新功能
        pullToRefresh:{
            support:true
        }
    });
    cw.addEventListener('pullToRefresh', function(){    // 监听下拉刷新
        // 这里可执行从服务器获取数据刷新业务逻辑
        setTimeout(function(){    // 完成刷新逻辑后调用endPullToRefresh退出刷新状态
            plus.nativeUI.toast('更新完成!');
            cw.endPullToRefresh();
        }, 5000);
    }, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready',plusReady,false);
}
// 直接进入刷新状态（无需用户下拉操作触发）
function autoRefresh(){
    plus.webview.currentWebview().beginPullToRefresh();
}
    </script>
    </head>
    <body>
        Webview窗口下拉刷新<br/>
        下拉窗口可触发刷新<br/>
        <button onclick="autoRefresh()">直接进入刷新状态</button>
        <div id="outlog"></div>
    </body>
</html>

  • "webPause": _(String类型)_Webview窗口暂停事件Webview窗口被暂停（pause）时触发。

  • "webResume": _(String类型)_Webview窗口恢复事件Webview窗口从暂停（pause）状态恢复（resume）时触发。

WebviewExtraOptions

JSON对象，原生窗口扩展参数

属性：

  • acceleration: (String类型)窗口动画加速开启窗口动画加速功能可优化窗口动画效果，提升动画流程度，可避免部分设备上打开（关闭）窗口闪屏的问题。可取值："auto" - 自动优化窗口动画；"none" - 关闭窗口动画加速功能；"capture" - 使用截屏方式加速窗口动画。默认值为"auto"。

平台支持

  • Android - 2.3+ (支持): 设置为"auto"值时：pop-in/pop-out动画（Android5.0及以上不使用截屏加速，Android5.0以下如果Webview中存在subNView则pop-in动画默认不使用截图加速，pop-out动画默认使用截图加速，如果Webview中不存在subNView则默认不使用截图加速），slide-/zoom-动画（不使用截屏加速），fade-in/fade-out动画（默认使用截屏加速）；设置为"none"值时：所有动画类型都不使用截屏加速；设置为"capture"值时：除了"none"动画类型不使用截屏加速外其它所有动画都强制使用截屏加速。
  • iOS - 5.1+ (不支持): 暂不支持，忽略此参数。
    • capture: (Bitmap类型)窗口动画加速时使用的图片当使用截屏方式加速窗口动画时，可设置已经创建好的截屏图片，此时不会进行实时截屏操作，加速窗口动画响应时间，提升用户体验。如果未指定截屏图片，则实时截取当前Webview窗口对象的图片进行动画操作。如果窗口未使用截屏方式加速动画，则忽略此参数。

平台支持

  • Android - 2.3+ (支持)
  • iOS - 5.1+ (不支持): 暂不支持，忽略此参数。
    • otherCapture: (Bitmap类型)关联窗口动画使用的图片当使用截屏方式加速窗口动画时，可设置已经创建好的截屏图片，此时不会进行实时截屏操作，加速关联窗口动画响应时间，提升用户体验。如果未指定截屏图片，则实时截取关联Webview窗口对象的图片进行动画操作。如果窗口未使用截屏方式加速动画，则忽略此参数。

平台支持

  • Android - 2.3+ (支持): 仅"pop-in"、"pop-out"窗口动画效果支持此参数，其它窗口动画忽略此参数。
  • iOS - 5.1+ (不支持): 暂不支持，忽略此参数。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
var bitmap1=null,bitmap2=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 截图
    bitmap1 = new plus.nativeObj.Bitmap();
    // 将webview内容绘制到Bitmap对象中
    ws.draw(bitmap1,function(){
        console.log('bitmap1绘制图片成功');
    },function(e){
        console.log('bitmap1绘制图片失败：'+JSON.stringify(e));
    });
    // 预创建新Webview窗口
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860');
    wn.addEventListener('loaded', function(){
        bitmap2 = new plus.nativeObj.Bitmap();
        wn.draw(bitmap2, function(){
            console.log('bitmap2截图成功');
        }, function(e){
            console.log('bitmap2截图失败：'+JSON.stringify(e));
        });
    },false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 创建并显示Webview窗口
function showWebview(){
    wn.show('pop-in', 300, function(){
        // 动画完成，销毁截图
        bitmap1.clear();
        bitmap2.clear();
    }, {capture:bitmap2,otherCapture:bitmap1});
}
    </script>
    </head>
    <body>
        使用截图显示Webview窗口<br/>
        <button onclick="showWebview()">show</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewPosition

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

常量：

  • "static": (String类型)控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动
  • "absolute": (String类型)控件在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动
  • "dock": (String类型)控件在页面中停靠，停靠的位置通过dock属性进行定义

WebviewPullToRefreshStyles

Webview窗口下拉刷新样式

属性：

  • support: (Boolean类型)是否开启Webview窗口的下拉刷新功能true表示开启窗口的下拉刷新功能；false表示关闭窗口的下拉刷新功能。

  • color: (String类型)下拉刷新控件颜色颜色值格式为"#RRGGBB"，如"#FF0000"为设置下拉属性控件为红色，默认值为"#2BD009"。

平台支持

  • Android - ALL (支持): 仅"circle"样式支持此属性，配置下拉控件的颜色。
  • iOS - ALL (支持): "default"样式配置雪花及文字颜色；"circle"样式配置下拉控件的颜色。
    • style: (String类型)下拉刷新样式用于定义下拉刷新风格样式，可取值："default" - 经典下拉刷新样式（下拉拖动时页面内容跟随）；"circle" - 圆圈样式下拉刷新控件样式（下拉拖动时仅刷新控件跟随）。默认值为"default"。

  • height: (String类型)窗口的下拉刷新控件进入刷新状态的拉拽高度支持百分比，如"10%"；像素值，如"50px"。

  • range: (String类型)窗口可下拉拖拽的范围支持百分比，如"10%"；像素值，如"50px"。

  • offset: (String类型)下拉刷新控件的起始位置仅对"circle"样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。相对于Webview的顶部偏移量，支持百分比，如"10%"；像素值，如"50px"。默认值为"0px"。

  • contentdown: (JSON类型)在下拉可刷新状态时显示的内容支持以下属性：caption：在下拉可刷新状态时下拉刷新控件上显示的标题内容。

  • contentover: (JSON类型)在释放可刷新状态时显示的内容支持以下属性：caption：在释放可刷新状态时下拉刷新控件上显示的标题内容。

  • contentrefresh: (JSON类型)在正在刷新状态时显示的内容支持以下属性：caption：在正在刷新状态时下拉刷新控件上显示的标题内容。

示例：


<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <meta name="HandheldFriendly" content="true"/>
        <meta name="MobileOptimized" content="320"/>
        <title>Webview Example</title>
        <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='<span>New Item '+(new Date())+'</span>';
            list.insertBefore(item,list.firstChild);
        }
        ws.endPullToRefresh();
    },2000);
}
        </script>
        <style type="text/css">
li {
    padding: 1em;
    border-bottom: 1px solid #eaeaea;
}
li:active {
    background: #f4f4f4;
}
        </style>
    </head>
    <body>
        <ul id="list" style="list-style:none;margin:0;padding:0;">
            <li><span>Initializ List Item 1</span></li>
            <li><span>Initializ List Item 2</span></li>
            <li><span>Initializ List Item 3</span></li>
            <li><span>Initializ List Item 4</span></li>
            <li><span>Initializ List Item 5</span></li>
            <li><span>Initializ List Item 6</span></li>
            <li><span>Initializ List Item 7</span></li>
            <li><span>Initializ List Item 8</span></li>
            <li><span>Initializ List Item 9</span></li>
            <li><span>Initializ List Item 10</span></li>
        </ul>
    </body>
</html>

uni-app使用plus注意事项

WebviewRenderedEventOptions

Webview窗口rendered事件参数

属性：

  • type: (String类型)判断窗口渲染完成类型可取值："top"-从顶部向下偏移22px横线截屏检测渲染是否完成；"bottom"-从底部向上偏移25px横线检测渲染是否完成；"center"-从中间横线检测渲染是否完成；"auto"为全屏检测（左、中、右三条竖线）。默认值为"auto"。

  • interval: (Number类型)判断窗口渲染完成间隔时间单位为ms（毫秒），默认值为150ms。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听rendering事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
    nw.addEventListener('rendered', function(e){
        console.log('Webview rendered');
    }, false);
    nw.setRenderedEventOptions({type:'bottom',interval:100});// 检查底部区域是否渲染完成，每隔100毫秒检查一次
    nw.show();
}
    </script>
    </head>
    <body>
        Webview窗口渲染完成事件
        <button onclick="createWebview()">Show</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewReplaceWebApiOptions

替换H5标准API配置信息

说明：

目前仅支持替换H5标准定位接口

属性：

  • geolocation: (String类型)替换H5标准定位接口(navigator.geolocation.)由于网络原因，在部分手机上可能无法调用标准H5定位接口(navigator.geolocation.)获取定位数据，此时可以通过此属性配置使用原生定位模块替换标准H5定位接口，可取值："alldevice" - 在所有设备上替换标准H5定位接口(navigator.geolocation.)；"auto" - 自动替换H5标准定位接口，仅在调用标准H5定位接口无法获取数据的设备上替换；"none" - 不替换H5标准定位接口(navigator.geolocation.)。默认值为"none"。注意：替换H5标准定位接口，会导致页面加载速度延迟100ms左右，推荐使用"auto"模式。

平台支持

  • Android - ALL (支持)
  • iOS - 5.0+ (不支持): 无需替换，H5标准定位接口可获取定位数据。

WebviewStatusbarStyles

JSON对象，Webview窗口的系统状态栏区域样式

说明：

仅在应用设置为沉浸式状态栏样式下有效，非沉浸式状态栏样式下忽略此属性。

属性：

  • background: (String类型)系统状态栏区域背景颜色颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景。默认值为应用manifest.json中plus->statusbar->background属性配置的值，如果未配置此属性值，则使用系统默认状态栏的背景颜色。

平台支持

  • Android - ALL (支持): 在部分设备上可能无法获取系统默认状态栏的背景颜色，此时使用默认颜色值"#D4D4D4"。注意：为了避免跟系统状态栏的前景色冲突，忽略偏白颜色（RR>0xEB&&GG>0xEB&&BB>0xEB）,忽略偏黑颜色（RR>0x1E&&GG>0x1E&&BB>0x1E）。
  • iOS - ALL (支持): iOS上无法获取系统默认状态栏的背景颜色，此时使用默认颜色值"#D4D4D4"。

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
var nw=null;
// 创建非沉浸式状态栏的Webview窗口 
function createWebview(){
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:'#FF0000'}});
    nw.show();
}
    </script>
    </head>
    <body>
        Webview窗口的系统状态栏区域样式<br/>
        注意：<br/>
        请在应用配置文件manifest.json中添加plus->statusbar->immersed节点，并将值设置为true<br/>
        <button onclick="createWebview()">Create</button>
    </body>
</html>

uni-app使用plus注意事项

WebviewStyles

JSON对象，Webview窗口对象的样式

属性：

  • additionalHttpHeaders: (JSON类型)窗口加载页面时额外添加的HTTP请求头数据仅在Webview窗口第一次加载页面时使用，如用户点击的触发的链接跳转则不再添加此额外请求头数据。如果Webview窗口非第一次加载页面时也需要额外添加HTTP请求头数据，可通过loadURL()方法的参数设置。如果HTTP请求头中已经包含需要额外添加的头数据，则添加的请求数据覆盖默认值。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,embed=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    embed=plus.webview.create('http://m.dcloud.io/', 'test', {top:'100px',bottom:'0px',additionalHttpHeaders:{Referer:'http://m.dcloud.io/}});
    embed.show();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 加载新URL页面
function loadHtmlUrl() {
    // 指定referer头数据
    embed.loadURL('http://m.weibo.cn/u/3196963860', {Referer:'http://m.weibo.cn/'});
}
    </script>
    </head>
    <body>
        加载新URL页面<br/>
        <button onclick="loadHtmlUrl()">loadURL</button>
    </body>
</html>
  • animationOptimization: (String类型)窗口动画优化方式可取值："auto" - 如果窗口中存在titleNView或subNViews，窗口动画时真实Webview控件从动画窗口中移除加速（避免真实Webview渲染影响动画效率）；"none" - 窗口动画不使用优化。默认值为"auto"。

平台支持

  • Android - ALL (支持)
  • iOS - ALL (不支持)
    • cachemode: (String类型)窗口的缓存模式可取值："default" - 根据cache-control决定是否使用缓存数据，如果存在缓存并且没有过期则使用本地缓存资源，否则从网络获取；"cacheElseNetwork" - 只要存在缓存（即使过期）数据则使用，否则从网络获取；"noCache" - 不使用缓存数据，全部从网络获取；"cacheOnly" - 仅使用缓存数据，不从网络获取（注：如果没有缓存数据则会导致加载失败）。默认使用"default"。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 5.0+ (不支持)
    • backButtonAutoControl: _(String类型)_Webview窗口自动处理返回键逻辑当Webview窗口在显示栈顶，并且Webview窗口中没有调用JS监听返回键（plus.key.addEventListener('backbutton',…)）时按下返回键响应行为。可取值："hide" - 隐藏Webview窗口，隐藏动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”）；"close" - 关闭Webview窗口，关闭动画与上一次调用显示时设置的动画类型相对应（如“slide-in-right”对应的关闭动画为“slid-out-right”） ；"none" - 不做操作，将返回键传递给下一Webview窗口处理；"quit" - 退出应用。
  • background: (String类型)窗口的背景颜色窗口空白区域的背景模式，设置background为颜色值(参考CSS Color Names，可取值/十六进制值/rgb值/rgba值)，窗口为独占模式显示（占整个屏幕区域）；设置background为“transparent”，则表示窗口背景透明，为非独占模式。

平台支持

  • Android - 2.2+ (支持): Android平台4.0以上系统才支持“transparent”背景透明样式，4.0以下系统窗口显示白色背景。
  • iOS - 5.0+ (支持): iOS平台默认使用白色背景。
    • backgroundColorTop: (String类型)窗口顶部背景颜色值窗口内容滚动到顶部下拉时可见。可取值："#RRGGBB"格式字符串，如"#FF0000"表示红色；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为透明。

平台支持

  • Android - ALL (不支持): 不支持此功能，忽略此属性。
  • iOS - 7.0+ (支持)
    • backgroundColorBottom: (String类型)窗口底部背景颜色窗口内容滚动到底部上拉时可见。可取值："#RRGGBB"格式字符串，如"#FF0000"表示红色；"rgba(R,G,B,A)"，其中R/G/B分别代表红色值/绿色值/蓝色值，正整数类型，取值范围为0-255，A为透明度，浮点数类型，取值范围为0-1（0为全透明，1为不透明），如"rgba(255,0,0,0.5)"，表示红色半透明。默认值为透明。

平台支持

  • Android - ALL (不支持): 不支持此功能，忽略此属性。
  • iOS - 7.0+ (支持)
    • blockNetworkImage: (Boolean类型)是否阻塞网络图片的加载布尔类型，true表示阻塞，false表示不阻塞，默认值为false。阻塞后Webview窗口将不加载页面中使用的所有网络图片，可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 5.0+ (不支持): 忽略此属性，Webview窗口加载页面中所有图片。
    • bottom: (String类型)窗口垂直向上的偏移量支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。当同时设置了top和height值时，忽略此属性值；当未设置height值时，可通过top和bottom属性值来确定窗口的高度。
  • bounce: (String类型)窗口遇到边框是否有反弹效果可取值："none" - 表示没有反弹效果；"vertical" - 表示垂直方向有反弹效果；"horizontal" - 表示水平方向有反弹效果；"all" - 表示垂直和水平方向都有反弹效果。默认值为"none"。

平台支持

  • Android - ALL (支持): 无法单独控制垂直和水平方向（即"vertical"，"horizontal"，"all"都表示开启反弹效果）。不支持动态修改，只能在创建时设置。
  • iOS - 5.1.1+ (支持)
    • bounceBackground: (String类型)窗口回弹效果区域的背景窗口回弹效果区域背景可支持颜色值或图片：颜色值格式为"#RRGGBB"，如"#FFFFFF"为设置白色背景；背景图为"url(%image path%)"，如"url(./icon.png)"为设置icon.png为背景图，图片采用平铺模式绘制。

平台支持

  • Android - (不支持)
  • iOS - 5.0+ (支持): 默认值为系统窗口背景色，通常为黑色。
    • decelerationRate: (Number类型)窗口内容停止滑动的减速度当Webview加载的内容超过其高度时，可以拖拽滑动内容，decelerationRate属性控制手指松开后页面滑动的速度。设置值越大手指松开后的滑动速度越快（滑动距离越长），其值域范围为0.0-1.0，默认值为0.989。

平台支持

  • Android - ALL (不支持)
  • iOS - 5.0+ (支持)
    • disablePlus: (Boolean类型)禁止页面调用5+ API可取值：true - 禁止页面调用5+ API，也不会触发plusready事件；false - 不禁止页面调用5+ API。HBuilderX2.5.6+版本支持，默认值为false。注意：仅在窗口创建时设置此值有效，无法动态修改。
  • dock: (WebviewDock类型)窗口的停靠方式当Webview窗口添加到另外一个窗口中时，停靠方式才会生效，采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容被子窗口盖住。可取值："top"，控件停靠则页面顶部；"bottom"，控件停靠在页面底部；"right"，控件停靠在页面右侧；"left"，控件停靠在页面左侧。默认值为"bottom"。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 5.0+ (支持)
    • errorPage: (String类型)窗口加载错误时跳转的页面地址当Webview窗口无法加载指定的url地址时（如本地页面不存在，或者无法访问的网络地址），此时会自动跳转到指定的错误页面地址（仅支持本地页面地址）。设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页面。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 5.0+ (支持)
    • replacewebapi: (WebviewReplaceWebApiOptions类型)替换H5标准API用于解决在部分设备上调用H5标准定位接口可能无法获取定位数据的问题。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建新窗口并设置替换H5标准接口 
function create(){
    var styles={replacewebapi:{geolocation:'auto'}};
    var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
    plus.webview.show(w); // 显示窗口
}
    </script>
    </head>
    <body>
        自动替换H5标准定位接口<br/>
        <button onclick="create()">Create</button>
    </body>
</html>
  • hardwareAccelerated: (Boolean类型)窗口是否开启硬件加速布尔类型，true表示开启硬件加速，false表示不开启硬件加速，默认情况5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速，可以通过plus.webview.defaultHardwareAccelerated()方法获取默认Webview是否开启硬件加速。由于不同设备对硬件加速的支持情况存在差异，开启硬件加速能加速HTML页面的渲染，但也会消耗更多的系统资源，从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题，因此在特定设备的特定页面如果出现以上问题需要手动设置关闭硬件加速来避免。

平台支持

  • Android - 2.3+ (支持): 注意：1. 如果在页面中使用Video标签播放视频则必须打开硬件加速功能；2. 页面必须在创建时确定是否打开硬件加速功能，无法动态切换页面的硬件加速开关；3. 首页Webview窗口是否开启硬件加速需在manifest.json中plus节点下的hardwareAccelerated属性值控制。
  • iOS - 5.1+ (不支持): 忽略此属性。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建新窗口并设置开启硬件加速
function create(){
    var styles={};
    // 在Android5以上设备，如果默认没有开启硬件加速，则强制设置开启
    if(!plus.webview.defaultHardwareAccelerated()&&parseInt(plus.os.version)>=5){
        styles.hardwareAccelerated=true;
    }
    var w = plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', styles);
    plus.webview.show(w); // 显示窗口
}
    </script>
    </head>
    <body>
        开启硬件加速显示Webview窗口<br/>
        <button onclick="create()">Create</button>
    </body>
</html>

  • height: (String类型)窗口的高度支持百分比、像素值，默认为100%。当未设置height属性值时，优先通过top和bottom属性值来计算窗口的高度。

  • kernel: (String类型)窗口使用的内核可取值："WKWebview" - 在iOS8.0及以上系统使用WKWebview内核，低版本下仍然使用UIWebview内核； "UIWebview" - 在所有版本上都使用UIWebview内核。 默认值为"UIWebview"。 WKWebview内核的优势是：1. 滚动时懒加载的图片也可以实时渲染，UIWebview在滚动停止后才能渲染；2. WKWebview的video支持AirPlay。但WKWebview也有些限制和不足，目前已知的问题有：1. 不支持跨域设置cookie，即plus.navigator.setCookie()API无法使用；2. 本地的HTML页面中的XHR不支持跨域访问，需使用plus.net.XMLHttpRequest来替换；3. 不支持使用WebSQL，需使用indexDB来替换；4. 不支持js原生混淆功能，需使用前端js混淆来替换；5. 内存不足时会白屏。首页的Webview的kernel在manifest中配置（plus->kernel->ios）。

平台支持

  • Android - ALL (不支持)
  • iOS - ALL (支持)
    • kernelRecovery: _(String类型)_Webview内核崩溃后的恢复处理逻辑仅iOS平台非uni-app项目使用WKWebview时生效，uni-app项目可自动恢复（推荐转换为uni-app项目）当前WKWebview崩溃后，Webview页面的JS上下文将丢失，也无法渲染DOM内容（白屏）可配置以下值："restart" - 重启应用，关闭所有页面重新打开应用首页，可通过（plus.runtime.isRecovery）来判断应用是否恢复重启;"reload" - 重新加载当前WKWebview（崩溃的WKWebview）页面，页面中JS上下文中所有数据丢失，在当前Webview中可通过plus.webview.isRecovery判断是否恢复重新加载，在其它Webview中可监听recovery事件来判断；"none" - 不做任何操作。默认为manifest.json中plus -> kernel -> recovery配置的值。

  • left: (String类型)窗口水平向右的偏移量支持百分比、像素值，默认值为0px。未设置left属性值时，优先通过right和width属性值来计算窗口的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"，即无遮罩层。


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 显示遮罩层
    ws.setStyle({mask:'rgba(0,0,0,0.5)'});
    // 点击关闭遮罩层
    ws.addEventListener('maskClick', function(){
        ws.setStyle({mask:'none'});
    },false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        Webview窗口页面加载完成事件
        <br/>
        点击窗口关闭遮罩层
    </body>
</html>
  • opacity: (Number类型)窗口的不透明度0为全透明，1为不透明，默认值为1，即不透明。

平台支持

  • Android - 2.2+ (支持): 需Android4.0及以上平台才支持，Android4.0以前平台忽略此属性。
  • iOS - 4.3+ (支持)
    • plusrequire: (String类型)控制Webview注入5+ API时机可取值： "ahead" - 尽量提前注入，拦截页面中网络js请求实现提前注入，如果没有拦截到js请求则在页面loaded时注入； "normal" - 页面loaded时注入； "later" - 较晚在注入，在loaded事件发生后2s再注入，plusready事件同样延迟触发； "none" - 不注入，页面无法调用5+ API，不触发plusready事件。 默认值为"normal"。

  • progress: (WebviewProgressStyles类型)窗口的进度条样式设置此属性则在Webview窗口的顶部显示进度条，可配置进度条颜色及高度。设置此属性值为undefined或null则隐藏进度条。默认不显示进度条。

  • popGesture: (String类型)窗口的侧滑返回功能可取值："none"-无侧滑返回功能；"close"-侧滑返回关闭Webview窗口；"hide"-侧滑返回隐藏webview窗口。

平台支持

  • Android - 2.2+ (支持): 仅在流应用环境中支持；在5+应用中不支持此功能。
  • iOS - 5.0+ (支持): 默认值为"close"。

// 创建webview支持侧滑返回：
var wv=plus.webview.create('url','id',{'popGesture':'close'});
wv.show();
// 或这样写
var wv=plus.webview.open('url','id',{'popGesture':'close'});

// 动态改变webview的侧滑返回功能：
var wv=plus.webview.currentWebview();
// 关闭侧滑返回功能
wv.setStyle({'popGesture':'none'});
// 侧滑返回后关闭webview
wv.setStyle({'popGesture':'close'});
// 侧滑返回后隐藏webview
wv.setStyle({'popGesture':'hide'});

  • pullToRefresh: (WebviewPullToRefreshStyles类型)窗口下拉刷新配置设置窗口是否开启下拉刷新功能及样式。开启下拉刷新后可通过监听窗口的"pullToRefresh"事件处理下拉刷新业务逻辑，更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。

  • render: (String类型)窗口渲染模式支持以下属性值："onscreen" - Webview窗口在屏幕区可见时渲染，不可见时不进行渲染，此时能减少内存使用量；"always" - Webview在任何时候都渲染，在内存较大的设备上使用，被遮挡的窗口在此中模式下显示的时候会有更流畅的效果。默认值为"onscreen"。仅Android平台支持。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (不支持)
    • right: (String类型)窗口水平向左的偏移量支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。当设置了left和width值时，忽略此属性值；当未设置width值时，可通过left和bottom属性值来确定窗口的宽度。

  • 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值，已确保此功能生效。

平台支持

  • Android - ALL (不支持)
  • iOS - 5.0+ (支持)
    • shareable: (Boolean类型)是否可分享窗口加载的链接地址在流应用环境（流应用/5+浏览器）中可通过分享按钮分享页面链接地址，可取值：true - 可分享窗口加载页面链接地址；false - 不可分享窗口加载的页面链接地址，此时分享的是应用。默认值值为true。
  • softinputMode: (String类型)弹出系统软键盘模式可选值："adjustPan" - 弹出软键盘时Webview窗口自动上移，以保证当前输入框可见；"adjustResize" - 自动调整Webview窗口大小（屏幕区域减去软键盘区域），同时自动滚动Webview保证输入框可见；"nothing" - 不做任何调整（软键盘可能覆盖输入框）。默认值为"adjustPan"。

平台支持

  • Android - ALL (支持): manifest.json中配置应用为键盘模式为adjustResize时此属性才生效。
  • iOS - 5.0+ (支持): nothing仅在nvue窗口支持，其它窗口暂不支持。
    • softinputNavBar: (String类型)软键盘上导航条的显示模式可选值："auto" - 表示系统默认值，即软键盘上显示导航条； "none" - 表示软键盘上不显示导航条。 默认值为"auto"。

平台支持

  • Android - ALL (不支持)
  • iOS - 8.0+ (支持)
    • statusbar: (WebviewStatusbarStyles类型)窗口状态栏样式仅在应用设置为沉浸式状态栏样式下有效，设置此属性后将自动保留系统状态栏区域不被Webview窗口占用（即Webview窗口非沉浸式样式显示）。
  • subNViews: (Array[WebviewSubNViewStyles]类型)定义窗口的原生子View控件数组类型，可通过配置项设置原生子View控件，每个配置项对应添加一个原生子View控件。通过Webview窗口的getSubNViews()方法可获取原生子View控件对象数组。

平台支持

  • Android - ALL (支持): 使用subNView时不建议同时使用父子Webview窗口嵌套，相互嵌套可能会引起显示不正确的问题。
    • titleNView: (WebviewTitleNViewStyles类型)定义窗口的标题栏控件样式设置此属性值则表明创建Webview窗口的标题栏控件，并可通过其属性值设置背景颜色、文本内容、文本颜色等。通过Webview窗口的getTitleNView()方法可获取标题栏控件对象。

平台支持

  • Android - ALL (支持): 使用titleNView时不建议同时使用父子Webview窗口嵌套，相互嵌套可能会引起显示不正确的问题。
    • top: (String类型)窗口垂直向下的偏移量支持百分比、像素值，默认值为0px。未设置top属性值时，优先通过bottom和height属性值来计算窗口的top位置。
  • transition: (WebviewTransition类型)窗口定义窗口变换的动画效果
  • transform: (WebviewTransform类型)窗口定义窗口变形效果
  • position: _(WebviewPosition类型)_Webview窗口的排版位置当Webview窗口添加到另外一个窗口中时，排版位置才会生效，排版位置决定子窗口在父窗口中的定位方式。可取值："static"，控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，控件在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，控件在页面中停靠，停靠的位置由dock属性值决定。默认值为"absolute"。

平台支持

  • Android - (支持)
  • iOS - (支持)
    • userSelect: (Boolean类型)用户是否可选择内容可取值：true - 表示可选择内容，用户可通过长按来选择页面内容，如文本内容选择后可以弹出系统复制粘贴菜单；false - 表示不可选择内容，用户不可通过长按来选择页面内容。默认值为true。注意：在Web页面中可通过CSS的user-select对单个页面元素进行控制，前提是Webview对象的userSelect设置为true，否则CSS设置的user-select失效。
  • videoFullscreen: (String类型)视频全屏播放时的显示方向可取值："auto": 自动适配，如果当前页面竖屏显示，则视频全屏时竖屏显示；如果当前页面横屏显示，则视频全屏时横屏显示；如果当前页面自动感应，则视频全屏时自动感应横竖屏切换。"portrait-primary": 竖屏正方向； "portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°； "landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°； "landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°； "landscape": 横屏正方向或反方向，根据设备重力感应器自动调整；默认值为“auto”。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (不支持)
    • width: (String类型)窗口的宽度支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。
  • zindex: (Number类型)窗口的堆叠顺序值拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。

WebviewTransform

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

WebviewTransition

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

属性：

  • property: (String类型)产生变换效果的属性默认值为"all"，暂不支持其它值。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (支持)
    • duration: (String类型)变换持续的时间默认值为0，即无动画效果。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (支持)
    • timingfunction: (String类型)窗口变换效果可取值："linear"：匀速变化，匀速动画效果；"ease-in"：匀加速变化，逐渐变快的动画效果；"ease-out"：匀减速变化，逐渐变慢的动画效果；"ease-in-out"：先加速后减速变化，先变快后变慢的动画效果。默认值为"ease-in-out"。

平台支持

  • Android - 2.2+ (支持)
  • iOS - 4.3+ (支持)

WebviewOverrideResourceOptions

拦截Webview窗口资源请求的参数

属性：

  • match: (String类型)区配需要拦截请求资源的URL地址支持正则表达式，默认值为空字符串（即不拦截）。

  • redirect: (String类型)拦截重定向的资源地址仅支持本地资源地址，如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径。

  • mime: (String类型)重定向的资源数据类型RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型。如普通文本（text/plain）、PNG图像(image/png)、GIF图形(image/gif)、JPEG图形(image/jpeg)。如果未指定mime类型，则根据重定向资源路径自动区配。

  • encoding: (String类型)重定向的资源数据编码如未设置，则使用默认值"UTF-8"。

  • header: (JSON类型)设置重定向资源数据的http头数据可设置标注http头数据（如Content-type）,也可设置自定义数据。通常可通过此属性来设置拦截资源的缓存策略（如Cache-control）。

WebviewOverrideUrlOptions

拦截Webview窗口URL请求的属性

属性：

  • effect: (String类型)拦截URL请求生效时机可取值："instant" - 表示立即生效，即调用overrideUrlLoading方法后立即生效；"touchstart" - 表示用户操作Webview窗口（触发touchstart事件）后生效，如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。默认值为"instant"。

  • mode: (String类型)拦截模式可取值："allow"表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；"reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。默认值为"reject"。

  • match: (String类型)区配是否需要处理的URL请求支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。

  • exclude: (String类型)排除拦截处理请求类型不拦截处理指定类型的URL请求，直接使用系统默认处理逻辑。可取值："none"表示不排除任何URL请求（即拦截处理所有URL请求）；"redirect"表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）。默认值为"none"。

WebviewListenResourceOptions

监听Webview窗口资源加载的属性

属性：

  • match: (String类型)区配是否需要处理的URL资源支持正则表达式，默认值为对所有URL资源请求生效（相当于正则表达式“.*”）。如果Webview加载的资源区配条件，则触发回调事件。

BounceEventCallback

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


void onEvent( Event event ){
    // Event handled code.
}

参数：

  • event: _(Event)必选 _Webview窗口回弹事件触发时事件数据Event对象包含以下属性：status - 表示回弹位置状态，设置顶部下拉回弹changeoffset属性后可取值："beforeChangeOffset"表示可继续拖拽，此时松开拖拽窗口会回弹到其初始位置；"afterChangeOffset"表示回弹可停靠，此时松开拖拽窗口会回弹到停靠位置；"dragEndAfterChangeOffset"表示已进松开拖拽，并且窗口回弹到停靠位置。设置左右侧侧滑slideoffset属性后可取值："beforeSlide"表示未侧滑状态；"afterSlide"表示已侧滑状态。offset - 表示回弹方向，可取值："left"表示左侧滑动，"right"表示右侧滑动，"top"表示上侧下拉滑动。target - 保存触发回弹此事件的Webview窗口对象。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    ws.setBounce({position:{top:'100px'},changeoffset:{top:'44px'}});
    ws.addEventListener('dragBounce', onPullStateChange, false);
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 下拉状态改变
function onPullStateChange(e){
    switch(e.status){
        case 'beforeChangeOffset':
        console.log('顶部回弹：可继续往下拖拽');
        break;
        case 'afterChangeOffset':
        console.log('顶部回弹：松开会重置回弹位置');
        break;
        case 'dragEndAfterChangeOffset':
        console.log('顶部回弹：松开停靠回弹');
        break;
        default:
        break;
    }
}
// 重置窗口回弹位置
function resetBounce(){
    ws.resetBounce();
}
    </script>
    </head>
    <body style="text-align:center;">
        <br/><br/><br/>
        设置Webview窗口的回弹效果<br/>
        回弹后显示停靠到44px的位置<br/><br/>
        <button onclick="resetBounce()">重置回弹位置</button>
        <br/><br/><br/>
        *暂仅支持顶部的回弹效果*
    </body>
</html>

uni-app使用plus注意事项

EventCallback

Webview窗口事件的回调函数


void onEvent(Event event){
    // Event handled code.
}

参数：

  • event: _(Event)必选 _Webview窗口事件触发时事件数据Event对象包含以下属性：target：保存触发此事件的Webview窗口对象；progress：保存窗口页面加载进度，仅"progressChanged"事件时有此属性。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 监听Webview窗口页面加载完成事件
function eventTest() {
    // 打开新窗口
    nw=plus.webview.create('', '', {top:'46px',bottom:'0px');
    nw.addEventListener('loaded', function(e){
        console.log('Loaded: '+e.target.getURL());
    }, false);
    nw.show(); // 显示窗口
}
    </script>
    </head>
    <body>
        Webview窗口页面加载完成事件
        <button onclick="eventTest()">start</button>
        <button onclick="nw.loadURL('http://m.weibo.cn/u/3196963860')">loaded</button>
    </body>
</html>

uni-app使用plus注意事项

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: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var nw=null;
// H5 plus事件处理
function plusReady(){
    createWebview();
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}

// 创建Webview窗口监听侧滑返回事件
function createWebview(){
    // 打开新窗口
    nw=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'100px',bottom:'0px',popGesture:'hide'});
    nw.addEventListener('popGesture', function(e){
        poplog.innerText='popGesture: '+e.type+','+e.result+','+e.progress;
    }, false);
}
// 显示Webview窗口
function showWebview(){
    nw.show('slide-in-right');
}
// 隐藏Webview窗口
function hideWebview(){
    nw.hide();
}
// 关闭窗口
function closeWebview(){
    nw.close();
    plus.webview.currentWebview().close();
}
    </script>
    </head>
    <body>
        Webview窗口侧滑返回事件
        <button onclick="closeWebview()">Close</button>
        <button onclick="showWebview()">Show</button>
        <button onclick="hideWebview()">Hide</button>
        <div id="poplog"></div>
    </body>
</html>

uni-app使用plus注意事项

HistoryQueryCallback

历史记录查询的回调函数


void onHistoryQuery( Event event ) {
    // Event handled code.
    var canBack = event.canBack;
    var canForward = event.canForward;
}

参数：

  • event: (Event)必选 查询Webview窗口历史记录操作事件数据可通过event的canBack属性获取Webview窗口是否可后退，通过event的canForward属性获取Webview窗口是否可前进。

返回值：

void: 无

ListenResourceLoadingCallback

Webview窗口加载资源事件的回调函数


void onLoadingResource( Event event ) {
    // Event handled code.
    var url = event.url;
}

参数：

  • event: _(Event)必选 _Webview窗口加载资源事件数据可通过event的url属性获取要加载的资源URL地址。

返回值：

void: 无

OverrideUrlLoadingCallback

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


void onOverride( Event event ) {
    // Event handled code.
    var url = event.url;
}

参数：

  • event: _(Event)必选 _Webview窗口拦截URL跳转事件数据可通过event的url属性获取拦截的URL地址。

返回值：

void: 无

TitleUpdateCallback

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


void onQuery( Event event ) {
    // Event handled code.
}

参数：

  • event: _(Event)必选 _Webview窗口加载页面标题更新事件数据可通过event的title属性获取Webview窗口的标题。

返回值：

void: 无

WebviewAnimationCallback

Webview窗口组合动画回调函数


void onAnimationFinished( Event event ) {
    // Event handled code.
}

参数：

  • event: _(Event)必选 _Webview窗口动画完成事件数据可通过event的id属性获取对应Webview窗口的标识，如果操作的窗口未设置id，则返回空字符串；可通过event的target属性获取对应Webview窗口对象。

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag', {left:'100%',render:'always'});
    wn.show('none');
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
// 窗口组合动画
function webviewAnimation(){
    plus.webview.startAnimation({view:ws,styles:{fromLeft:'0%',toLeft:'-100%'},action:'none'},
    {view:wn,styles:{fromLeft:'100%',toLeft:'0%'},action:'none'},
    function(e){
        console.log('Animation finished: '+JSON.stringify(e));
    });
}
    </script>
    </head>
    <body>
        <br/><br/>
        <button onclick="webviewAnimation()">窗口组合动画显示新窗口</button>
        <br/><br/>
        在新窗口中可以右滑返回（新窗口移动到屏幕外）
    </body>
</html>

uni-app使用plus注意事项

WebviewDragCallback

Webview窗口滑屏操作事件回调函数


void onDrag( Event event ) {
    // Event handled code.
}

说明：

在窗口开始滑动、滑动过程、滑动结束时触发，其中滑动过程中会触发多次，滑动过程中触发次数由WebviewDragOptions对象的callbackStep决定。

参数：

返回值：

void: 无

示例：


<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Webview Example</title>
    <script type="text/javascript">
var ws=null,wn=null;
// H5 plus事件处理
function plusReady(){
    ws=plus.webview.currentWebview();
    // 预创建新窗口（显示在可视区域外）
    wn=plus.webview.create('http://m.weibo.cn/u/3196963860', 'newdrag',{left:'100%'});
    wn.show('none');
    // 左滑显示新窗口
    ws.drag({direction:'left',moveMode:'followFinger'}, {view:'newdrag',moveMode:'follow'}, function(e){
        console.log('Left drag event: '+JSON.stringify(e));
    });
    // 右滑隐藏新窗口
    wn.drag({direction:'right',moveMode:'followFinger'}, {view:ws,moveMode:'follow'}, function(e){
        console.log('Right drag event: '+JSON.stringify(e));
    });
}
if(window.plus){
    plusReady();
}else{
    document.addEventListener('plusready', plusReady, false);
}
    </script>
    </head>
    <body>
        左滑可打开新页面
    </body>
</html>

uni-app使用plus注意事项

WebviewCustomButtonCallback

Webview窗口标题栏上自定义按钮点击事件回调函数


void onClicked(Event event){
    // Event handled code.
}

说明：

用户点击自定义按钮时触发。

参数：

  • event: (Event)必选 点击事件触发时的数据Event对象包含以下属性：target：触发此事件的WebviewBackButtonStyles对象。

返回值：

void: 无

SuccessCallback

Webview窗口操作成功回调函数


void onSuccess(){
    // Success code.
}

说明：

Webview窗口业务操作成功后触发回调函数。

参数：

无

返回值：

void: 无

ErrorCallback

Webview窗口操作失败回调函数


void onError(error){
    // Handle the error
    var code = error.code; // 错误编码
    var message = error.message; // 错误描述信息
}

参数：

  • error: _(Exception)可选 _Webview窗口操作错误信息可通过error.code（Number类型）获取错误编码；可通过error.message（String类型）获取错误描述信息。

返回值：

void: 无