宜信同城网交流论坛技术专版技术专区Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作（中） ...getTitle 获取Webview窗口加载HTML页面的标题 String wobj.getTitle(); 说明：标题为HTML页 ...

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

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

<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;">getTitle</h1>
获取Webview窗口加载HTML页面的标题
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
String wobj.getTitle();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
标题为HTML页面head节点下title节点中的文本内容，当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的标题。如果HTML页面没有使用title节点来设置标题，则返回空字符串。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
String : 窗口加载页面的标题
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getTitleNView</h1>
获取Webview窗口的标题栏控件对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
plus.nativeObj.View wobj.getTitleNView();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
创建Webview窗口时设置其titleNView属性时则自动创建标题栏控件，应用首页可通过manfest.json中的plus->launchwebview->titleNView节点配置创建标题栏控件。可通过此方法获取Webview窗口创建的标题栏控件，对象类型为plus.nativeObj.View，可通过调用其drawBitmap/drawRect/drawText方法绘制更新内容来实现自定义样式。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a> : 原生View控件对象
<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 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窗口的标题栏控件对象 
<button onclick="getTitleNView()">更新标题栏控件对象</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">getTitleNViewSearchInputText</h1>
获取标题栏上输入框的内容
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
String wobj.getTitleNViewSearchInputText();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）并配置显示搜索框（searchInput）时生效。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
String : 标题栏搜索框中输入的文本，如果没有配置显示搜索框则返回空字符串。
<h1 style="margin-left:0;">getURL</h1>
获取Webview窗口加载HTML页面的地址
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
String wobj.getURL();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
当窗口内容发生页面内跳转时可通过窗口触发的“loaded”事件中调用此方法来获取跳转后页面的地址。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
String : 窗口加载页面的URL地址
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持)</li><li>iOS - ALL (支持) : 需要在页面loaded事件后才能获取最终的页面地址，在此之前获取的是当前加载的页面地址。 </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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">hide</h1>
隐藏Webview窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.hide( aniHide, duration, extras );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
隐藏Webview窗口可保存已加载HTML页面的上下文数据，能降低应用使用的系统资源，通过show方法可将隐藏的Webview窗口显示出来。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>aniHide: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.AnimationTypeClose">AnimationTypeClose</a> ) 可选 隐藏Webview窗口动画效果 如果没有指定隐藏窗口动画，则使用默认动画效果“none”。 </li><li>duration: ( Number ) 可选 隐藏Webview窗口的动画持续时间 单位为ms，默认为窗口show方法设定的动画时间。 </li><li>extras: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewExtraOptions">WebviewExtraOptions</a> ) 可选 隐藏Webview窗口扩展参数 可用于指定Webview窗口动画是否使用图片加速。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">hideTitleNViewButtonRedDot</h1>
隐藏标题栏上按钮的红点
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.hideTitleNViewButtonRedDot(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
options参数为json类型，包含以下属性：
<ul><li>index: ( Number ) 必选 按钮的索引值 此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">interceptTouchEvent</h1>
是否拦截Webview窗口的触屏事件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.interceptTouchEvent(intercept);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
拦截后触屏事件不再传递，否则传递给View控件下的其它窗口处理。 Webview窗口默认拦截所有触屏事件。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>intercept: ( Boolean ) 可选 是否拦截触屏事件 true表示拦截触屏事件，false表示不拦截触屏事件（透传事件给其它窗口处理）。默认值为true。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 3.0+ (支持)</li><li>iOS - ALL (不支持)</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"/>
<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窗口的触屏事件 
<button onclick="uninterceptEvent()">不拦截触屏事件</button> 
<button onclick="interceptEvent()">拦截触屏事件</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">isHardwareAccelerated</h1>
查询Webview窗口是否开启硬件加速
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Boolean wobj.isHardwareAccelerated();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
如果Webview窗口已经开启硬件加速则返回true，否则返回false。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Boolean : Webview窗口是否开启硬件加速
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 3.0+ (支持) : 5+ Runtime会根据当前设备环境来决定是否开启硬件加速，也可通过WebviewStyles对象的hardwareAccelerated属性来强制设置是否开启硬件加速。 </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;
// 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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">isPause</h1>
查询Webview窗口是否暂停
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Boolean wobj.isPause();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
如果Webview窗口已经暂停则返回true，否则返回false。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Boolean : Webview窗口是否暂停
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持)</li><li>iOS - ALL (不支持) : 总是返回false。 </li></ul>
<h1 style="margin-left:0;">isVisible</h1>
查询Webview窗口是否可见
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Boolean wobj.isVisible();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
若Webview窗口已经显示（调用过show方法，即使被其它窗口挡住了也认为已显示）则返回true，若Webview窗口被隐藏则返回false。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Boolean : Webview窗口是否可见
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">listenResourceLoading</h1>
监听页面开始加载资源
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.listenResourceLoading(options, callback);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Webview加载资源时，如果满足options参数中定义的条件，则触发callback回调。此方法仅触发回调事件，不会阻止资源的加载。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewListenResourceOptions">WebviewListenResourceOptions</a> ) 可选 监听加载资源的参数 </li><li>callback: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.ListenResourceLoadingCallback">ListenResourceLoadingCallback</a> ) 可选 监听加载资源的回调函数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持) : 5+APP需要选择“解压资源后运行”模式后才能监听加载资源。 </li><li>iOS - ALL (不支持)</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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">loadData</h1>
加载新HTML数据
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.loadData(data, options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
触发Webview窗口加载HTML页面数据，如果HTML数据无效将导致页面加载失败。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>data: ( String ) 必选 要加载的HTML数据 </li><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewLoadDataOptions">WebviewLoadDataOptions</a> ) 可选 加载HTML数据的配置参数 如设置Base URL等。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">loadURL</h1>
加载新URL页面
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.loadURL(url, additionalHttpHeaders);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
触发Webview窗口从新的URL地址加载页面，如果url地址无效将导致页面显示失败。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>url: ( String ) 必选 要加载的页面URL地址 </li><li>additionalHttpHeaders: ( Object ) 可选 窗口加载URL页面时额外添加的HTTP请求头数据 仅对加载此次URL地址时有效。如果HTTP请求头中已经包含需要额外添加的头数据，则添加的请求数据覆盖默认值。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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 embed=null;
// H5 plus事件处理
function plusReady(){
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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">nativeInstanceObject</h1>
获取Webview窗口对象的原生（Native.JS）实例对象
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
InstanceObject wobj.nativeInstanceObject();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Android平台返回Webview窗口对象的android.webkit.Webview实例对象， iOS平台返回Webview窗口对象的UIWebview实例对象。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
InstanceObject : Webview窗口对象的原生（Native.JS）实例对象。
<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 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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">opened</h1>
获取在当前Webview窗口中创建的所有窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
Array[WebviewObject] wobj.opened();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
返回从当前Webview中调用plus.webview.open或plus.webview.create创建的所有Webview窗口数组。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
Array[<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a>] : 此窗口创建的Webview窗口对象数组，没有则返回空数组。
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">opener</h1>
获取当前Webview窗口的创建者
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
WebviewObject wobj.opener();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
创建者为调用plus.webview.open或plus.webview.create方法创建当前窗口的Webview窗口。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a> : 创建当前窗口的Webview窗口对象
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">overrideResourceRequest</h1>
拦截Webview窗口的资源加载
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.overrideResourceRequest(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
根据区配规则拦截Webview窗口加载资源的URL地址，重定向到其它资源地址（暂仅支持本地地址）。注意：多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( Array[<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewOverrideResourceOptions">WebviewOverrideResourceOptions</a>] ) 可选 拦截URL资源加载的参数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持) : 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。 </li><li>iOS - ALL (支持) : 不限定拦截当前Webview窗口加载的资源，而是拦截应用中所有Webview窗口加载的资源。 注意：WKWebview内核不支持拦截资源，HBuilderX2.3+开始默认调整使用WKWebview内核。 </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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">overrideUrlLoading</h1>
拦截Webview窗口的URL请求
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.overrideUrlLoading(options, callback);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。此方法只能拦截窗口的网络超链接跳转（包括调用loadURL方法触发的跳转），不可拦截页面请求资源请求（如加载css/js/png等资源的请求）。注意：多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewOverrideUrlOptions">WebviewOverrideUrlOptions</a> ) 可选 拦截URL请求的参数 </li><li>callback: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.OverrideUrlLoadingCallback">OverrideUrlLoadingCallback</a> ) 可选 拦截URL请求的回调函数 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持) : 5+APP需要选择“解压资源后运行”模式后才能截获应用资源的URL请求。 </li><li>iOS - ALL (支持)</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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">parent</h1>
获取当前Webview窗口的父窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
WebviewObject wobj.parent();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Webview窗口作为子窗口添加（Webview.append）到其它Webview窗口中时有效，这时其它Webview窗口为父窗口。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
<ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a> : 父Webview窗口对象，没有则返回null。
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">pause</h1>
暂停当前Webview窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.pause();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Webview窗口的js停止运行，页面内容不再更新渲染。应用中存在多个Webview窗口时，可以停止不显示的Webview，减少对系统资源的占用。注意：暂停后在窗口显示时需调用resume恢复。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持)</li><li>iOS - ALL (不支持)</li></ul>
<h1 style="margin-left:0;">reload</h1>
重新加载Webview窗口显示的HTML页面
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.reload( force );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
触发Webview窗口重新加载当前显示的页面内容。如果当前HTML页面未加载完则停止并重新加载，如果当前Webview窗口没有加载任何页面则无响应。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>force: ( Boolean ) 必选 是否强制不使用缓存 为加速HTML页面加载速度，默认在重新加载时会使用缓存，若force设置为true则不使用缓存，重新从URL地址加载所有页面内容。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">resetBounce</h1>
重置Webview窗口的回弹位置
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.resetBounce();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
开启窗口回弹效果后，当窗口中展现的内容滚动到头（顶部或底部）时，再拖拽时窗口整体内容将跟随移动，松开后自动回弹到停靠位置。这时需要调用此方法来重置窗口的回弹位置，窗口将采用动画方式回弹到其初始显示的位置。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</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;
// 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;">
 
设置Webview窗口的回弹效果 
回弹后显示停靠到44px的位置 
<button onclick="resetBounce()">重置回弹位置</button>
 
*暂仅支持顶部的回弹效果*
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">restore</h1>
恢复Webview控件显示内容
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.restore();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
恢复调用animate方法改变Webview控件的内容，更新至动画前显示的内容。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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"/>
<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窗口内容动画 
<button onclick="animateWebview()">内容动画</button> 
<button onclick="restoreWebview()">内容恢复</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">remove</h1>
移除子Webview窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.remove( webview );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从当前Webview窗口移除指定的子Webview窗口，若指定的webview对象不是当前窗口的子窗口则无任何作用。移除后子Webview窗口不会关闭，需要调用其close方法才能真正关闭并销毁。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>webview: ( <ahref="https://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View">plus.nativeObj.View</a> | <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject">WebviewObject</a> ) 必选 要移除的Webview窗口 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">removeEventListener</h1>
移除Webview窗口事件监听器
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.removeEventListener( event, listener );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从Webview窗口移除通过addEventListener方法添加的事件监听器，若没有查找到对应的事件监听器，则无任何作用。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>event: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.NWindowEvent">NWindowEvent</a> ) 必选 要移除的事件类型 </li><li>listener: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.EventCallback">EventCallback</a> ) 必选 要移除监听函数对象 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">removeFromParent</h1>
从父窗口中移除
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.removeFromParent();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
从所属的父Webview窗口移除，如果没有父窗口，则无任何作用。从父窗口中移除后子Webview窗口不会关闭，需要调用其close方法才能真正关闭并销毁。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">removeTitleNViewButtonBadge</h1>
移除标题栏上按钮的角标
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.removeTitleNViewButtonBadge(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在窗口使用原生标题栏（titleNView）时生效，未显示原生标题栏时操作此接口无任何效果。
<h2 style="margin-left:.8em;">参数：</h2>
options参数为json类型，包含以下属性：
<ul><li>index: ( Number ) 必选 按钮的索引值 此值为WebviewTitleNViewButtonStyles的buttons属性中的数组索引值来操作对应的按钮，从0开始。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h1 style="margin-left:0;">resume</h1>
恢复当前Webview窗口
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.resume();
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
Webview窗口暂停后，调用此方法恢复js运行及页面内容的更新渲染。
<h2 style="margin-left:.8em;">参数：</h2>
无
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持)</li><li>iOS - ALL (不支持)</li></ul>
<h1 style="margin-left:0;">setBounce</h1>
设置Webview窗口的回弹效果
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setBounce( style );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
开启窗口回弹效果后，当窗口中展现的内容滚动到头（顶部或底部）时，再拖拽时窗口整体内容将跟随移动，松开后自动回弹到停靠位置（可通过style设置）。拖拽窗口内容时页面显示Webview窗口的背景色，默认为透明，此时显示Webview下面的内容，利用这个特点可以实现自定下拉刷新特效。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>style: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewBounceStyle">WebviewBounceStyle</a> ) 必选 Webview窗口回弹样式参数 可设置窗口的回弹效果支持的方向，自动回弹后停靠的位置等参数。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</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;
// 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;">
 
设置Webview窗口的回弹效果 
*暂仅支持顶部的回弹效果*
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setBlockNetworkImage</h1>
设置Webview窗口是否阻塞加载页面中使用的网络图片
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setBlockNetworkImage( block );
</code></code></pre>
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>block: ( Boolean ) 必选 是否阻塞加载网络图片 true表示不加载页面中使用的网络图片，false表示加载也页面中使用的网络图片。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - ALL (不支持)</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;
// 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>
显示窗口后再加载网络图片 
<button onclick="blockOpen()">打开页面</button>
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setContentVisible</h1>
设置HTML内容是否可见
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setContentVisible( visible );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
设置HTML内容不可见后，将显示Webview窗口的背景色。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>visible: ( Boolean ) 必选 设置页面是否可见，true表示可见，false表示不可见 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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内容是否可见 
<button onclick="setContentVisible(true)">可见</button> 
<button onclick="setContentVisible(false)">不可见</button> 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setCssFile</h1>
设置预加载的CSS文件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setCssFile( path );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
预加载CSS文件不需要在HTML页面中显式引用，在Webview窗口加载HTML页面时自动加载，在页面跳转时也会自动加载。设置新的CSS文件后将清空之前设置的值（包括调用setCssText设置的值）。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>file: ( String ) 必选 预载入的CSS文件地址，仅支持本地文件，格式为相对路径URL（plus.io.RelativeURL），如"_www/preload.css" </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持) : 如果Webview加载的html页面中存在网络css资源请求，将会把要加载的CSS文件添加到第一个请求css资源（url以“.css”结尾）后面。否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。 </li><li>iOS - ALL (支持) : iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS文件。 iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS文件。 </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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setCssText</h1>
设置预加载的CSS内容
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setCssText( text );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
预加载CSS内容不需要在HTML页面中显式引用，在Webview窗口加载HTML页面时自动加载，在页面跳转时也会自动加载。设置新的CSS内容后将清空之前设置的值（包括调用setCssFile设置的值）。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>text: ( String ) 必选 预载入的CSS内容，必须符合CSS语法格式，如"body{background:red;}" </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - ALL (支持) : 如果Webview加载的html页面中存在网络css资源请求，将会把要加载的CSS内容添加到第一个请求css资源（url以“.css”结尾）后面。否则在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。 </li><li>iOS - ALL (支持) : iOS7及以上版本在Webvew加载的html页面自动添加style节点引用要加载的CSS内容。 iOS7以前的版本在页面加载完毕后自动注入JS添加style节点引用要加载的CSS内容。 </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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setFavoriteOptions</h1>
设置Webview窗口的收藏参数
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setFavoriteOptions(options);
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
仅在流应用环境（流应用/5+浏览器）中有效：用户点击流应用环境的收藏按钮时使用的参数，如设置收藏页面标题，图标、页面地址等。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>options: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewFavoriteOptions">WebviewFavoriteOptions</a> ) 必选 Webview窗口收藏参数 可设置窗口的收藏标题，图标、页面地址等信息。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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;
// 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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setFixBottom</h1>
设置Webview窗口底部修复区域高度
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setFixBottom( height );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
如果Webview加载页面中存在底部停靠区域（如“蘑菇街”WAP页面的底部Tab栏），在页面滚动时动态改变Webview高度可能会出现底部停靠区域抖动的现象（如360浏览器中向上滑顶部标题栏自动消失引起Webview变高）。此时可以调用此方法来指定底部停靠区域（通常是底部Tab栏）进行优化修复抖动效果，高度值为底部停靠区域的高度。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>height: ( Number ) 必选 需要优化修复的区域高度 单位为像素值。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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窗口底部修复区域高度 
</body>
</html>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setJsFile</h1>
设置预加载的JS文件
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setJsFile( path );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
预加载JS文件不需要在HTML页面中显式引用，在Webview窗口加载HTML页面时自动加载，在页面跳转时也会自动加载。设置新的JS文件后将清空之前设置的值。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>file: ( String ) 必选 预载入的JS文件地址，仅支持本地文件，格式为相对路径URL（plus.io.RelativeURL），如"_www/preload.js" </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<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,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>
</code></code></pre>
<ahref="https://uniapp.dcloud.io/use-html5plus">uni-app使用plus注意事项</a>
<h1 style="margin-left:0;">setPullToRefresh</h1>
设置Webview窗口的下拉刷新效果
<pre class="has" style="margin-left:0;"><code class="language-prettyprint"><code>
void wobj.setPullToRefresh(style, refreshCB );
</code></code></pre>
<h2 style="margin-left:.8em;">说明：</h2>
开启Webview窗口的下拉刷新功能，显示窗口内置的下拉刷新控件样式。
<h2 style="margin-left:.8em;">参数：</h2>
<ul><li>style: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewPullToRefreshStyles">WebviewPullToRefreshStyles</a> ) 必选 Webview窗口下拉刷新样式参数 可设置窗口内置的下拉刷新控件在各种状态显示的文字内容。 </li><li>refreshCB: ( <ahref="https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.SuccessCallback">SuccessCallback</a> ) 必选 Webview窗口下拉刷新事件回调 用户操作窗口的下拉刷新触发窗口刷新事件时触发。 </li></ul>
<h2 style="margin-left:.8em;">返回值：</h2>
void : 无
<h2 style="margin-left:.8em;">平台支持：</h2>
<ul><li>Android - 2.2+ (支持)</li><li>iOS - ALL (支持)</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;"></h1>
 </div>
 </div>
 <div id="treeSkill"></div>

页: [1]

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

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