宜信同城网交流论坛技术专版技术专区Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中2） ...WebviewTitleNViewSearchInputStyles 窗口标题栏搜索框样式说明：搜索输入框输入内容变化时触发" ...

admin 发表于 2023-2-16 18:54:40

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中2） ...

<div id="article_content" class="article_content clearfix">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
 <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-6e43165c0a.css">
 <div id="content_views" class="htmledit_views">
 <h1 style="margin-left:0;">WebviewTitleNViewSearchInputStyles</h1>
窗口标题栏搜索框样式
<h2 style="margin-left:.8em;">说明：</h2>
搜索输入框输入内容变化时触发"titleNViewSearchInputChanged"事件； 用户点击软键盘上的“搜索”按钮时触发"titleNViewSearchInputConfirmed"事件。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>autoFocus: (Boolean 类型 )是否自动获取焦点 设置为true表示自动获取焦点，当窗口显示时搜索编辑框自动获取输入焦点（弹出软键盘）。默认值为false。 </li><li>align: (String 类型 )非输入状态下文本的对齐方式 可取值： "left" - 居左对齐； "right" - 居右对齐； "center" - 居中对齐。默认值为"center"（居中对齐）。 </li><li>backgroundColor: (String 类型 )背景颜色 颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示背景颜色为红色。默认值为白色半透明"rgba(255,255,255,0.5)"。 </li><li>borderRadius: (String 类型 )输入框的圆角半径 取值格式为"XXpx"，其中XX为像素值（逻辑像素），如"10px"表示10像素半径圆角。默认值为无圆角。 </li><li>disabled: (Boolean 类型 )是否禁止输入 未禁止输入时，点击编辑框可获取输入焦点（弹出软键盘）； 禁止输入搜索框则无法获取焦点，点击编辑框触发"titleNViewSearchInputClicked"事件。默认值为false。 </li><li>color: (String 类型 )文本颜色 颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示提示文本颜色为红色。默认值为"#000000"。 注意：HBuilderX2.9.0+版本支持。 </li><li>placeholder: (String 类型 )提示文本 搜索框未中输入内容为空时显示的文本内容。 </li><li>placeholderColor: (String 类型 )提示文本颜色 颜色值格式为"#RRGGBB"和"rgba(R,G,B,A)"，如"#FF0000"表示提示文本颜色为红色。默认值为"#CCCCCC"。 </li></ul>
<h1 style="margin-left:0;">WebviewProgressStyles</h1>
标题栏控件的进度条样式
<h2 style="margin-left:.8em;">说明：</h2>
显示在标题栏控件底部。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>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"。 </li><li>height: (String 类型 )进度条高度 可取值：像素值（逻辑像素），支持小数点，如"1px"表示1像素高；百分比，如"1%"，相对于标题栏控件的高度。默认值为"2px"。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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');
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewSplitLineStyles</h1>
窗口标题栏控件的分割线样式
<h2 style="margin-left:.8em;">说明：</h2>
显示在标题栏控件底部。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>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"。 </li><li>height: (String 类型 )底部分割线高度 格式为"Xpx"，其中X表示逻辑像素值， 默认值为"1px"。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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');
}
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewEvent</h1>
Webview窗口事件
<h2 style="margin-left:.8em;">常量：</h2>
<ul><li>"close": (String 类型 )Webview窗口关闭事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口关闭时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"dragBounce": (String 类型 )Webview窗口回弹事件 通过WebviewObject对象的setBounce方法开启回弹效果设置顶部下拉回弹changeoffset属性后，当用户向下拖拽窗口时触发发此事件，回调函数类型为BounceEventCallback。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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;">
 
设置Webview窗口的回弹效果 
回弹后显示停靠到44px的位置 
<button onclick="resetBounce()">重置回弹位置</button>
 
*暂仅支持顶部的回弹效果*
</body>
</html>
</code></code></pre> </li><li>"slideBounce": (String 类型 )Webview窗口回弹事件 通过WebviewObject对象的setBounce方法开启回弹效果设置左右侧侧滑slideoffset属性后，当用户向左右侧拖拽窗口侧滑时触发发此事件，回调函数类型为BounceEventCallback。 </li><li>"error": (String 类型 )Webview窗口加载错误事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载错误时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"hide": (String 类型 )Webview窗口隐藏事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口隐藏（窗口动画完成后）时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"loading": (String 类型 )Webview窗口页面开始加载事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口开始加载新页面时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"loaded": (String 类型 )Webview窗口页面加载完成事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口页面加载完成时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口通过mask属性设置显示遮罩层并且点击时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口页面加载完成事件
 
点击窗口关闭遮罩层
</body>
</html>
</code></code></pre> </li><li>"recovery": (String 类型 )Webview内核崩溃事件 iOS平台使用WKWebview时，当系统内存不足时可能会导致WKWebview内核崩溃（页面白屏）。此时会触发recovery事件。 </li><li>"rendering": (String 类型 )Webview窗口开始渲染事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口开始渲染内容时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"rendered": (String 类型 )Webview窗口渲染完成事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口渲染完成时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"show": (String 类型 )Webview窗口显示事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口显示（窗口动画完成后）时触发此事件，回调函数类型为EventCallback。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre> </li><li>"titleNViewSearchInputChanged": (String 类型 )Webview标题栏搜索框输入内容更新事件 当页面配置原生标题栏显示搜索框，在搜索框获取焦点输入的内容发生变化时触发。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var ws=plus.webview.currentWebview(); //获取当前窗口对象
//监听标题栏搜索框输入内容更新事件
ws.addEventListener('titleNViewSearchInputChanged', function(e){
console.log('titleNViewSearchInputChanged: '+JSON.stringify(e));
}, false);
</code></code></pre> </li><li>"titleNViewSearchInputConfirmed": (String 类型 )Webview标题栏搜索框输入确认事件 当页面配置原生标题栏显示搜索框，在搜索框获取完成（用户点击软键盘的“搜索”按钮）时触发。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var ws=plus.webview.currentWebview(); //获取当前窗口对象
//监听标题栏搜索框输入完成事件
ws.addEventListener('titleNViewSearchInputConfirmed', function(e){
console.log('titleNViewSearchInputConfirmed: '+JSON.stringify(e));
}, false);
</code></code></pre> </li><li>"titleNViewSearchInputClicked": (String 类型 )Webview标题栏搜索框点击事件 当页面配置原生标题栏显示搜索框并设置disabled为true，点击搜索输入框时触发。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var ws=plus.webview.currentWebview(); //获取当前窗口对象
//监听标题栏搜索框点击事件
ws.addEventListener('titleNViewSearchInputClicked', function(e){
console.log('titleNViewSearchInputClicked');
}, false);
</code></code></pre> </li><li>"titleNViewSearchInputFocusChanged": (String 类型 )Webview标题栏搜索框焦点变化事件 当页面配置原生标题栏显示搜索框，搜索框的输入焦点发生变化时触发。回调函数中的focus属性值为true表示获取焦点，false表示失去焦点。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
var ws=plus.webview.currentWebview(); //获取当前窗口对象
//监听标题栏搜索框焦点变化事件
ws.addEventListener('titleNViewSearchInputFocusChanged', function(e){
if(e.focus){
console.log('titleNViewSearchInput focus!');
}else{
console.log('titleNViewSearchInput blur!');
}
}, false);
</code></code></pre> </li><li>"titleUpdate": (String 类型 )Webview加载页面标题更新事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载新页面更新标题时触发此事件，回调函数类型为SuccessCallback。注意：此事件会先于loaded事件触发，通常在加载网络页面时通过此事件可更快获取到页面的标题。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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);
}
</code></code></pre> </li><li>"touchstart": (String 类型 )Webview窗口接收到触屏事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当用户操作按下到Webview窗口时触发此事件，回调函数类型为SuccessCallback。注意：每按下屏幕触发一次此事件。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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);
}
</code></code></pre> </li><li>"popGesture": (String 类型 )Webview窗口侧滑返回事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口侧滑返回时触发此事件，回调函数类型为PopGestureCallback。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 仅在流应用环境中支持此事件；在5+应用中不支持侧滑返回功能，因此不会触发此事件。 </li><li>iOS - ALL (支持) : Webview设置侧滑返回功能才能触发此事件。 </li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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);
}
</code></code></pre> </li><li>"progressChanged": (String 类型 )Webview窗口加载进度变化事件 通过WebviewObject对象的addEventListener方法添加事件监听函数，当Webview窗口加载页面进度变化时触发此事件。回调函数原型为void PorgressCandedCallback(Event e),可通过e.progress获取窗口加载进度，取值范围为0-100。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
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();
}
</code></code></pre> </li><li>"pullToRefresh": (String 类型 )Webview窗口下拉刷新事件 Webview窗口打开下拉刷新功能后，用户操作下拉刷新时或调用beginPullToRefresh方法时触发，用于通知业务逻辑可以开始执行刷新操作。更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口下拉刷新 
下拉窗口可触发刷新 
<button onclick="autoRefresh()">直接进入刷新状态</button>
<div id="outlog"></div>
</body>
</html>
</code></code></pre> </li><li>"webPause": (String 类型 )Webview窗口暂停事件 Webview窗口被暂停（调用pause方法）时触发。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</li></ul></li><li>"webResume": (String 类型 )Webview窗口恢复事件 Webview窗口从暂停状态恢复（调用resume方法）时触发。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</li></ul></li></ul>
<h1 style="margin-left:0;">WebviewExtraOptions</h1>
JSON对象，原生窗口扩展参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>acceleration: (String 类型 )窗口动画加速 开启窗口动画加速功能可优化窗口动画效果，提升动画流程度，可避免部分设备上打开（关闭）窗口闪屏的问题。可取值： "auto" - 自动优化窗口动画； "none" - 关闭窗口动画加速功能； "capture" - 使用截屏方式加速窗口动画。默认值为"auto"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>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"动画类型不使用截屏加速外其它所有动画都强制使用截屏加速。 </li><li>iOS - 5.1+ (不支持) : 暂不支持，忽略此参数。 </li></ul></li><li>capture: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap">plus.nativeObj.Bitmap</a> 类型 )窗口动画加速时使用的图片 当使用截屏方式加速窗口动画时，可设置已经创建好的截屏图片，此时不会进行实时截屏操作，加速窗口动画响应时间，提升用户体验。如果未指定截屏图片，则实时截取当前Webview窗口对象的图片进行动画操作。如果窗口未使用截屏方式加速动画，则忽略此参数。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.3+ (支持)</li><li>iOS - 5.1+ (不支持) : 暂不支持，忽略此参数。 </li></ul></li><li>otherCapture: (<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.Bitmap">plus.nativeObj.Bitmap</a> | <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a> 类型 )关联窗口动画使用的图片 当使用截屏方式加速窗口动画时，可设置已经创建好的截屏图片，此时不会进行实时截屏操作，加速关联窗口动画响应时间，提升用户体验。如果未指定截屏图片，则实时截取关联Webview窗口对象的图片进行动画操作。如果窗口未使用截屏方式加速动画，则忽略此参数。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.3+ (支持) : 仅"pop-in"、"pop-out"窗口动画效果支持此参数，其它窗口动画忽略此参数。 </li><li>iOS - 5.1+ (不支持) : 暂不支持，忽略此参数。 </li></ul></li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口 
<button onclick="showWebview()">show</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewPosition</h1>
原生控件在窗口中显示的位置
<h2 style="margin-left:.8em;">常量：</h2>
<ul><li>"static": (String 类型 )控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动</li><li>"absolute": (String 类型 )控件在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动</li><li>"dock": (String 类型 )控件在页面中停靠，停靠的位置通过dock属性进行定义</li></ul>
<h1 style="margin-left:0;">WebviewPullToRefreshStyles</h1>
Webview窗口下拉刷新样式
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>support: (Boolean 类型 )是否开启Webview窗口的下拉刷新功能 true表示开启窗口的下拉刷新功能； false表示关闭窗口的下拉刷新功能。 </li><li>color: (String 类型 )下拉刷新控件颜色 颜色值格式为"#RRGGBB"，如"#FF0000"为设置下拉属性控件为红色，默认值为"#2BD009"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 仅"circle"样式支持此属性，配置下拉控件的颜色。 </li><li>iOS - ALL (支持) : "default"样式配置雪花及文字颜色； "circle"样式配置下拉控件的颜色。 </li></ul></li><li>style: (String 类型 )下拉刷新样式 用于定义下拉刷新风格样式，可取值： "default" - 经典下拉刷新样式（下拉拖动时页面内容跟随）； "circle" - 圆圈样式下拉刷新控件样式（下拉拖动时仅刷新控件跟随）。默认值为"default"。 </li><li>height: (String 类型 )窗口的下拉刷新控件进入刷新状态的拉拽高度 支持百分比，如"10%"；像素值，如"50px"。 </li><li>range: (String 类型 )窗口可下拉拖拽的范围 支持百分比，如"10%"；像素值，如"50px"。 </li><li>offset: (String 类型 )下拉刷新控件的起始位置 仅对"circle"样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。相对于Webview的顶部偏移量，支持百分比，如"10%"；像素值，如"50px"。默认值为"0px"。 </li><li>contentdown: (JSON 类型 )在下拉可刷新状态时显示的内容 支持以下属性： caption：在下拉可刷新状态时下拉刷新控件上显示的标题内容。 </li><li>contentover: (JSON 类型 )在释放可刷新状态时显示的内容 支持以下属性： caption：在释放可刷新状态时下拉刷新控件上显示的标题内容。 </li><li>contentrefresh: (JSON 类型 )在正在刷新状态时显示的内容 支持以下属性： caption：在正在刷新状态时下拉刷新控件上显示的标题内容。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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='New Item '+(new Date())+'';
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>Initializ List Item 1</li>
<li>Initializ List Item 2</li>
<li>Initializ List Item 3</li>
<li>Initializ List Item 4</li>
<li>Initializ List Item 5</li>
<li>Initializ List Item 6</li>
<li>Initializ List Item 7</li>
<li>Initializ List Item 8</li>
<li>Initializ List Item 9</li>
<li>Initializ List Item 10</li>
</ul>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewRenderedEventOptions</h1>
Webview窗口rendered事件参数
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>type: (String 类型 )判断窗口渲染完成类型 可取值： "top"-从顶部向下偏移22px横线截屏检测渲染是否完成； "bottom"-从底部向上偏移25px横线检测渲染是否完成； "center"-从中间横线检测渲染是否完成； "auto"为全屏检测（左、中、右三条竖线）。默认值为"auto"。 </li><li>interval: (Number 类型 )判断窗口渲染完成间隔时间 单位为ms（毫秒），默认值为150ms。 </li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewReplaceWebApiOptions</h1>
替换H5标准API配置信息
<h2 style="margin-left:.8em;">说明：</h2>
目前仅支持替换H5标准定位接口
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>geolocation: (String 类型 )替换H5标准定位接口(navigator.geolocation.*) 由于网络原因，在部分手机上可能无法调用标准H5定位接口(navigator.geolocation.*)获取定位数据，此时可以通过此属性配置使用原生定位模块替换标准H5定位接口，可取值： "alldevice" - 在所有设备上替换标准H5定位接口(navigator.geolocation.*)； "auto" - 自动替换H5标准定位接口，仅在调用标准H5定位接口无法获取数据的设备上替换； "none" - 不替换H5标准定位接口(navigator.geolocation.*)。默认值为"none"。注意：替换H5标准定位接口，会导致页面加载速度延迟100ms左右，推荐使用"auto"模式。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持)</li><li>iOS - 5.0+ (不支持) : 无需替换，H5标准定位接口可获取定位数据。 </li></ul></li></ul>
<h1 style="margin-left:0;">WebviewStatusbarStyles</h1>
JSON对象，Webview窗口的系统状态栏区域样式
<h2 style="margin-left:.8em;">说明：</h2>
仅在应用设置为沉浸式状态栏样式下有效，非沉浸式状态栏样式下忽略此属性。
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>background: (String 类型 )系统状态栏区域背景颜色 颜色值格式为"#RRGGBB"，如"#FF0000"表示为红色背景。默认值为应用manifest.json中plus->statusbar->background属性配置的值，如果未配置此属性值，则使用系统默认状态栏的背景颜色。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 在部分设备上可能无法获取系统默认状态栏的背景颜色，此时使用默认颜色值"#D4D4D4"。注意：为了避免跟系统状态栏的前景色冲突，忽略偏白颜色（RR>0xEB&&GG>0xEB&&BB>0xEB）,忽略偏黑颜色（RR>0x1E&&GG>0x1E&&BB>0x1E）。 </li><li>iOS - ALL (支持) : iOS上无法获取系统默认状态栏的背景颜色，此时使用默认颜色值"#D4D4D4"。 </li></ul></li></ul>
<h2 style="margin-left:.8em;">示例：</h2>
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口的系统状态栏区域样式 
注意： 
请在应用配置文件manifest.json中添加plus->statusbar->immersed节点，并将值设置为true 
<button onclick="createWebview()">Create</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">WebviewStyles</h1>
JSON对象，Webview窗口对象的样式
<h2 style="margin-left:.8em;">属性：</h2>
<ul><li>additionalHttpHeaders: (JSON 类型 )窗口加载页面时额外添加的HTTP请求头数据 仅在Webview窗口第一次加载页面时使用，如用户点击的触发的链接跳转则不再添加此额外请求头数据。如果Webview窗口非第一次加载页面时也需要额外添加HTTP请求头数据，可通过loadURL()方法的参数设置。如果HTTP请求头中已经包含需要额外添加的头数据，则添加的请求数据覆盖默认值。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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.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页面 
<button onclick="loadHtmlUrl()">loadURL</button>
</body>
</html>
</code></code></pre> </li><li>animationOptimization: (String 类型 )窗口动画优化方式 可取值： "auto" - 如果窗口中存在titleNView或subNViews，窗口动画时真实Webview控件从动画窗口中移除加速（避免真实Webview渲染影响动画效率）； "none" - 窗口动画不使用优化。默认值为"auto"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持)</li><li>iOS - ALL (不支持)</li></ul></li><li>animationAlphaBGColor: (String 类型 )窗口动画蒙层背景颜色 在Android平台上，使用 pop-in/pop-out 窗口动画时，上一个页面会有半透明蒙层效果，此颜色为透明后看到的蒙层背景颜色。支持"#RRGGBB"格式字符串，如"#FF0000"表示红色，默认值为background属性设置的背景颜色，为了避免转场动画期间蒙层闪烁应该设置与background相近的颜色。 注意： HBuilderX2.6.12+版本支持。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 6.0+ (支持)</li><li>iOS - ALL (不支持) : 忽略此属性值。 </li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 创建新窗口 
function showWebview(){
var w = plus.webview.create('http://m.weibo.cn/u/3196963860','test', {
background: '#f2f2f2', // 与html页面背景色一致
animationAlphaBGColor: '#cccccc'// 与background颜色相近
});
w.show('pop-in');
}
</code></code></pre> </li><li>cachemode: (String 类型 )窗口的缓存模式 可取值： "default" - 根据cache-control决定是否使用缓存数据，如果存在缓存并且没有过期则使用本地缓存资源，否则从网络获取； "cacheElseNetwork" - 只要存在缓存（即使过期）数据则使用，否则从网络获取； "noCache" - 不使用缓存数据，全部从网络获取； "cacheOnly" - 仅使用缓存数据，不从网络获取（注：如果没有缓存数据则会导致加载失败）。默认使用"default"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 5.0+ (不支持)</li></ul></li><li>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" - 退出应用。 </li><li>background: (String 类型 )窗口的背景颜色 窗口空白区域的背景模式，设置background为颜色值(参考CSS Color Names，可取值/十六进制值/rgb值/rgba值)，窗口为独占模式显示（占整个屏幕区域）； 设置background为“transparent”，则表示窗口背景透明，为非独占模式。对于全屏窗口可以设置此背景颜色为渲染后的页面背景色，可避免页面在渲染前闪白的现象。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : Android平台4.0以上系统才支持“transparent”背景透明样式，4.0以下系统窗口显示白色背景。注意：在Android平台上，全屏窗口使用 pop-in/pop-out 动画时，上一个页面会有半透明蒙层效果，此颜色为透明后看到的默认蒙层背景颜色。 </li><li>iOS - 5.0+ (支持) : iOS平台默认使用白色背景。 </li></ul></li><li>webviewBGTransparent: (Boolean 类型 )webview的背景是否透明 布尔类型，true表示透明，false表示不透明，默认值为false。 webview加载html页面时在性能较低的情况下DOM渲染会先显示白色，如果DOM背景色不为白色时可能会出现闪白的现象，此时可以设置webview背景为透明，同时设置background属性为DOM的背景色来避免闪白。当background属性值为“transparent”时忽略此值。 注意：HBuilderX2.7.15+版本支持。 </li><li>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)"，表示红色半透明。默认值为透明。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持) : 不支持此功能，忽略此属性。 </li><li>iOS - 7.0+ (支持)</li></ul></li><li>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)"，表示红色半透明。默认值为透明。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持) : 不支持此功能，忽略此属性。 </li><li>iOS - 7.0+ (支持)</li></ul></li><li>blockNetworkImage: (Boolean 类型 )是否阻塞网络图片的加载 布尔类型，true表示阻塞，false表示不阻塞，默认值为false。阻塞后Webview窗口将不加载页面中使用的所有网络图片，可通过Webview窗口对象的setBlockNetWorkImage()方法动态修改此状态。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 5.0+ (不支持) : 忽略此属性，Webview窗口加载页面中所有图片。 </li></ul></li><li>bottom: (String 类型 )窗口垂直向上的偏移量 支持百分比、像素值，默认值无值（根据top和height属性值来自动计算）。当同时设置了top和height值时，忽略此属性值； 当未设置height值时，可通过top和bottom属性值来确定窗口的高度。 </li><li>bounce: (String 类型 )窗口遇到边框是否有反弹效果 可取值： "none" - 表示没有反弹效果； "vertical" - 表示垂直方向有反弹效果； "horizontal" - 表示水平方向有反弹效果； "all" - 表示垂直和水平方向都有反弹效果。默认值为"none"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 无法单独控制垂直和水平方向（即"vertical"，"horizontal"，"all"都表示开启反弹效果）。不支持动态修改，只能在创建时设置。 </li><li>iOS - 5.1.1+ (支持)</li></ul></li><li>bounceBackground: (String 类型 )窗口回弹效果区域的背景 窗口回弹效果区域背景可支持颜色值或图片： 颜色值格式为"#RRGGBB"，如"#FFFFFF"为设置白色背景； 背景图为"url(%image path%)"，如"url(./icon.png)"为设置icon.png为背景图，图片采用平铺模式绘制。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - (不支持)</li><li>iOS - 5.0+ (支持) : 默认值为系统窗口背景色，通常为黑色。 </li></ul></li><li>decelerationRate: (Number 类型 )窗口内容停止滑动的减速度 当Webview加载的内容超过其高度时，可以拖拽滑动内容，decelerationRate属性控制手指松开后页面滑动的速度。设置值越大手指松开后的滑动速度越快（滑动距离越长），其值域范围为0.0-1.0，默认值为0.989。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持)</li><li>iOS - 5.0+ (支持)</li></ul></li><li>disablePlus: (Boolean 类型 )禁止页面调用5+ API 可取值：
<ul style="margin-left:2em;"><li>true - 禁止页面调用5+ API，也不会触发plusready事件</li><li>false - 不禁止页面调用5+ API</li></ul> HBuilderX2.5.6+版本支持，默认值为false。 注意： 仅在窗口创建时设置此值有效，无法动态修改。 </li><li>dock: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewDock">WebviewDock</a> 类型 )窗口的停靠方式 当Webview窗口添加到另外一个窗口中时，停靠方式才会生效，采用停靠方式添加会导致原Webview窗口自动调整其大小避免其内容被子窗口盖住。可取值："top"，控件停靠则页面顶部；"bottom"，控件停靠在页面底部；"right"，控件停靠在页面右侧；"left"，控件停靠在页面左侧。默认值为"bottom"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 5.0+ (支持)</li></ul></li><li>errorPage: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.String">String</a> 类型 )窗口加载错误时跳转的页面地址 当Webview窗口无法加载指定的url地址时（如本地页面不存在，或者无法访问的网络地址），此时会自动跳转到指定的错误页面地址（仅支持本地页面地址）。设置为“none”则关闭跳转到错误页面功能，此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页面。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 5.0+ (支持)</li></ul></li><li>replacewebapi: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewReplaceWebApiOptions">WebviewReplaceWebApiOptions</a> 类型 )替换H5标准API 用于解决在部分设备上调用H5标准定位接口可能无法获取定位数据的问题。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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标准定位接口 
<button onclick="create()">Create</button>
</body>
</html>
</code></code></pre> </li><li>hardwareAccelerated: (Boolean 类型 )窗口是否开启硬件加速 布尔类型，true表示开启硬件加速，false表示不开启硬件加速，默认情况5+ Runtime会根据设备实际支持情况自动选择是否开启硬件加速，可以通过plus.webview.defaultHardwareAccelerated()方法获取默认Webview是否开启硬件加速。由于不同设备对硬件加速的支持情况存在差异，开启硬件加速能加速HTML页面的渲染，但也会消耗更多的系统资源，从而导致在部分设备上可能出现闪屏、发虚、分块渲染等问题，因此在特定设备的特定页面如果出现以上问题需要手动设置关闭硬件加速来避免。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.3+ (支持) : 注意： 1. 如果在页面中使用Video标签播放视频则必须打开硬件加速功能； 2. 页面必须在创建时确定是否打开硬件加速功能，无法动态切换页面的硬件加速开关； 3. 首页Webview窗口是否开启硬件加速需在manifest.json中plus节点下的hardwareAccelerated属性值控制。 </li><li>iOS - 5.1+ (不支持) : 忽略此属性。 </li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口 
<button onclick="create()">Create</button>
</body>
</html>
</code></code></pre> </li><li>height: (String 类型 )窗口的高度 支持百分比、像素值，默认为100%。当未设置height属性值时，优先通过top和bottom属性值来计算窗口的高度。 </li><li>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）。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持)</li><li>iOS - ALL (支持)</li></ul></li><li>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配置的值。 </li><li>left: (String 类型 )窗口水平向右的偏移量 支持百分比、像素值，默认值为0px。未设置left属性值时，优先通过right和width属性值来计算窗口的left位置。 </li><li>margin: (String 类型 )窗口的边距 用于定位窗口的位置，支持auto，auto表示居中。若设置了left、right、top、bottom则对应的边距值失效。 </li><li>mask: (String 类型 )窗口的遮罩 用于设置Webview窗口的遮罩层样式，遮罩层会覆盖Webview中所有内容，包括子webview，并且截获webview的所有触屏事件，此时Webview窗口的点击操作会触发maskClick事件。字符串类型，可取值： rgba格式字符串，定义纯色遮罩层样式，如"rgba(0,0,0,0.5)"，表示黑色半透明； "none"，表示不使用遮罩层； 默认值为"none"，即无遮罩层。 <pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
<!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窗口页面加载完成事件
 
点击窗口关闭遮罩层
</body>
</html>
</code></code></pre> </li><li>opacity: (Number 类型 )窗口的不透明度 0为全透明，1为不透明，默认值为1，即不透明。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 需Android4.0及以上平台才支持，Android4.0以前平台忽略此属性。 </li><li>iOS - 4.3+ (支持)</li></ul></li><li>plusrequire: (String 类型 )控制Webview注入5+ API时机 可取值： "ahead" - 尽量提前注入，拦截页面中网络js请求实现提前注入，如果没有拦截到js请求则在页面loaded时注入； "normal" - 页面loaded时注入； "later" - 较晚在注入，在loaded事件发生后2s再注入，plusready事件同样延迟触发； "none" - 不注入，页面无法调用5+ API，不触发plusready事件。默认值为"normal"。 </li><li>progress: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewProgressStyles">WebviewProgressStyles</a> 类型 )窗口的进度条样式 设置此属性则在Webview窗口的顶部显示进度条，可配置进度条颜色及高度。设置此属性值为undefined或null则隐藏进度条。默认不显示进度条。 </li><li>popGesture: (String 类型 )窗口的侧滑返回功能 可取值： "none"-无侧滑返回功能； "close"-侧滑返回关闭Webview窗口； "hide"-侧滑返回隐藏webview窗口。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持) : 仅在流应用环境中支持；在5+应用中不支持此功能。 </li><li>iOS - 5.0+ (支持) : 默认值为"close"。 </li></ul><pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
// 创建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'});
</code></code></pre> </li><li>pullToRefresh: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewPullToRefreshStyles">WebviewPullToRefreshStyles</a> 类型 )窗口下拉刷新配置 设置窗口是否开启下拉刷新功能及样式。开启下拉刷新后可通过监听窗口的"pullToRefresh"事件处理下拉刷新业务逻辑，更新操作完成后调用窗口的endPullToRefresh方法结束下拉刷新。 </li><li>render: (String 类型 )窗口渲染模式 支持以下属性值： "onscreen" - Webview窗口在屏幕区可见时渲染，不可见时不进行渲染，此时能减少内存使用量； "always" - Webview在任何时候都渲染，在内存较大的设备上使用，被遮挡的窗口在此中模式下显示的时候会有更流畅的效果。默认值为"onscreen"。仅Android平台支持。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (不支持)</li></ul></li><li>right: (String 类型 )窗口水平向左的偏移量 支持百分比、像素值，默认无值（根据left和width属性值来自动计算）。当设置了left和width值时，忽略此属性值； 当未设置width值时，可通过left和right属性值来确定窗口的宽度。 </li><li>scalable: (Boolean 类型 )窗口是否可缩放 窗口设置为可缩放（scalable:true）时，用户可通过双指操作放大或缩小页面，此时html页面可通过meta节点设置“name="viewport" content="user-scalable=no"”来限制页面不可缩放。窗口设置为不可缩放（scalable:false）时，用户不可通过双指操作放大或缩小页面，即使页面中的meta节点也无法开启可缩放功能。默认值为false，即不可缩放。 </li><li>scrollIndicator: (String 类型 )窗口是否显示滚动条 用于控制窗口滚动条样式，可取值： "all"：垂直和水平滚动条都显示； "vertical"：仅显示垂直滚动条； "horizontal"：仅显示水平滚动条； "none"：垂直和水平滚动条都不显示。默认值为"all"，即垂直和水平滚动条都显示。注意：显示滚动条的前提条件是窗口中的内容超过窗口显示的宽或高。 </li><li>scrollsToTop: (Boolean 类型 )点击设备的状态栏时是否滚动返回至顶部 true表示点击设备的状态栏可以滚动返回至顶部，false表示点击设备的状态栏不可以，默认值为true。此功能仅iOS平台支持，在iPhone上有且只有一个Webview窗口的scrollsToTop属性值为true时才生效，所以在显示和关闭Webview窗口时需动态更新所有Webview的scrollsToTop值，已确保此功能生效。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持)</li><li>iOS - 5.0+ (支持)</li></ul></li><li>shareable: (Boolean 类型 )是否可分享窗口加载的链接地址 在流应用环境（流应用/5+浏览器）中可通过分享按钮分享页面链接地址， 可取值： true - 可分享窗口加载页面链接地址； false - 不可分享窗口加载的页面链接地址，此时分享的是应用。默认值值为true。 </li><li>softinputMode: (String 类型 )弹出系统软键盘模式 可选值： "adjustPan" - 弹出软键盘时Webview窗口自动上移，以保证当前输入框可见； "adjustResize" - 自动调整Webview窗口大小（屏幕区域减去软键盘区域），同时自动滚动Webview保证输入框可见； "nothing" - 不做任何调整（软键盘可能覆盖输入框）。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : manifest.json中配置应用为键盘模式为adjustResize时此属性才生效。在5+ APP中仅支持adjustResize、nothing； uni-app中支持adjustPan、adjustResize、nothing。默认值为adjustResize。 </li><li>iOS - 5.0+ (支持) : 5+ APP中仅支持adjustPan、adjustResize； nothing仅在uni-app中nvue页面支持，其它窗口暂不支持。默认值为adjustPan。 </li></ul></li><li>softinputNavBar: (String 类型 )软键盘上导航条的显示模式 可选值："auto" - 表示系统默认值，即软键盘上显示导航条； "none" - 表示软键盘上不显示导航条。默认值为"auto"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (不支持)</li><li>iOS - 8.0+ (支持)</li></ul></li><li>statusbar: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewStatusbarStyles">WebviewStatusbarStyles</a> 类型 )窗口状态栏样式 仅在应用设置为沉浸式状态栏样式下有效，设置此属性后将自动保留系统状态栏区域不被Webview窗口占用（即Webview窗口非沉浸式样式显示）。 </li><li>subNViews: (Array[<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewSubNViewStyles">WebviewSubNViewStyles</a>] 类型 )定义窗口的原生子View控件 数组类型，可通过配置项设置原生子View控件，每个配置项对应添加一个原生子View控件。通过Webview窗口的getSubNViews()方法可获取原生子View控件对象数组。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 使用subNView时不建议同时使用父子Webview窗口嵌套，相互嵌套可能会引起显示不正确的问题。 </li></ul></li><li>titleNView: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles">WebviewTitleNViewStyles</a> 类型 )定义窗口的标题栏控件样式 设置此属性值则表明创建Webview窗口的标题栏控件，并可通过其属性值设置背景颜色、文本内容、文本颜色等。通过Webview窗口的getTitleNView()方法可获取标题栏控件对象。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - ALL (支持) : 使用titleNView时不建议同时使用父子Webview窗口嵌套，相互嵌套可能会引起显示不正确的问题。 </li></ul></li><li>top: (String 类型 )窗口垂直向下的偏移量 支持百分比、像素值，默认值为0px。未设置top属性值时，优先通过bottom和height属性值来计算窗口的top位置。 </li><li>transition: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTransition">WebviewTransition</a> 类型 )窗口定义窗口变换的动画效果</li><li>transform: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTransform">WebviewTransform</a> 类型 )窗口定义窗口变形效果</li><li>position: (<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewPosition">WebviewPosition</a> 类型 )Webview窗口的排版位置 当Webview窗口添加到另外一个窗口中时，排版位置才会生效，排版位置决定子窗口在父窗口中的定位方式。可取值："static"，控件在页面中正常定位，如果页面存在滚动条则随窗口内容滚动；"absolute"，控件在页面中绝对定位，如果页面存在滚动条不随窗口内容滚动；"dock"，控件在页面中停靠，停靠的位置由dock属性值决定。默认值为"absolute"。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - (支持)</li><li>iOS - (支持)</li></ul></li><li>userSelect: (Boolean 类型 )用户是否可选择内容 可取值： true - 表示可选择内容，用户可通过长按来选择页面内容，如文本内容选择后可以弹出系统复制粘贴菜单； false - 表示不可选择内容，用户不可通过长按来选择页面内容。默认值为true。注意：在Web页面中可通过CSS的user-select对单个页面元素进行控制，前提是Webview对象的userSelect设置为true，否则CSS设置的user-select失效。 </li><li>videoFullscreen: (String 类型 )视频全屏播放时的显示方向 可取值： "auto": 自动适配，如果当前页面竖屏显示，则视频全屏时竖屏显示；如果当前页面横屏显示，则视频全屏时横屏显示；如果当前页面自动感应，则视频全屏时自动感应横竖屏切换。 "portrait-primary": 竖屏正方向； "portrait-secondary": 竖屏反方向，屏幕正方向按顺时针旋转180°； "landscape-primary": 横屏正方向，屏幕正方向按顺时针旋转90°； "landscape-secondary": 横屏方向，屏幕正方向按顺时针旋转270°； "landscape": 横屏正方向或反方向，根据设备重力感应器自动调整； 默认值为“auto”。 <h3 style="margin-left:0;">平台支持</h3>
<ul style="margin-left:2em;"><li>Android - 2.2+ (支持)</li><li>iOS - 4.3+ (不支持)</li></ul></li><li>width: (String 类型 )窗口的宽度 支持百分比、像素值，默认为100%。未设置width属性值时，可同时设置left和right属性值改变窗口的默认宽度。 </li><li>zindex: (Number 类型 )窗口的堆叠顺序值 拥有更高堆叠顺序的窗口总是会处于堆叠顺序较低的窗口的前面，拥有相同堆叠顺序的窗口后调用show方法则在前面。 </li></ul>
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

宜信同城网交流论坛's Archiver

Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中2） ...