浅谈MUI框架中加载外部网页或服务器数据的方法


Posted in Javascript onJanuary 31, 2018

我们很多同学在实施使用MUI框架的时候,在打开新的页面的时候常使用的方式是:mui.openwindow的方法,然而遇到网页需要从服务器或者是要嵌套外部的网页的时候,由于网速的问题会遇到加载时出现白屏,等待时间过长,导致用户体验不好.

页面加载的时候使用plus.webview.create方法就很好的解决了这个问题.

废话不多说直接贴代码

首先我们需要在创建一个父页面,以下是父页面的JS

// H5 plus事件处理 
function plusReady(){ 
var nwaiting = plus.nativeUI.showWaiting();//打开原生加载等待框 
ws=plus.webview.currentWebview();//创建一个新的页面 
embed=plus.webview.create(“createShow.html”,”“,{bottom:”0px”});//新的页面地址 
embed.onclose=embedClose; 
ws.append(embed);
} 
if(window.plus){ 
plusReady(); 
}else{ 
document.addEventListener(“plusready”,plusReady,false); 
} 
// 页面关闭事件回调函数 
function embedClose(e){ 
alert( “Closed!” ); 
}

创建一个createShow.html子页面,这个是我自己取的名字 ,

mui.init({
      //示例打开百度,进行加载
      subpages:[{
        url:"https://www.baidu.com",
        id:"https://www.baidu.com",
        styles:{
        }
      }]
    })

mui.plusReady(function(){

var ws = plus.webview.currentWebview();//加载进外部网页,加载完成关闭等待框
ws.show('slide-in-right', 50);
plus.nativeUI.closeWaiting();

} )

以上这篇浅谈MUI框架中加载外部网页或服务器数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
分享一个我自己写的ToolTip提示插件(附源码)
Jan 20 Javascript
实测jquery data()如何存值
Aug 18 Javascript
javascript解析json数据的3种方式
May 08 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
AngularJS基础教程之简单介绍
Sep 27 Javascript
利用JS实现页面删除并重新排序功能
Dec 09 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
详谈JS中数组的迭代方法和归并方法
Aug 11 Javascript
详解Angular5 路由传参的3种方法
Apr 28 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
JS 5种遍历对象的方式
Jun 16 Javascript
js保留两位小数方法总结
Jan 31 #Javascript
微信小程序icon组件使用详解
Jan 31 #Javascript
详解Chai.js断言库API中文文档
Jan 31 #Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 #Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 #Javascript
Vue单页面应用保证F5强刷不清空数据的解决方案
Jan 31 #Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 #Javascript
You might like
用PHP和ACCESS写聊天室(八)
2006/10/09 PHP
php的一个登录的类 [推荐]
2007/03/16 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
php中in_array函数用法分析
2014/11/15 PHP
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
JS:window.onload的使用介绍
2013/11/13 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Angularjs之filter过滤器(推荐)
2016/11/27 Javascript
浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序
2017/02/19 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
对angularJs中2种自定义服务的实例讲解
2018/09/30 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
微信小程序五子棋游戏的悔棋实现方法【附demo源码下载】
2019/02/20 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
2019/05/30 jQuery
序列化模块json代码实例详解
2020/03/03 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python OpenCV获取视频的方法
2018/02/28 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
python3实现飞机大战
2020/11/29 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
CSS3中使用RGBA设置透明度的示例
2015/08/04 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
管理部部长岗位职责
2013/12/05 职场文书
好矿嫂事迹材料
2014/01/21 职场文书
综合办公室岗位职责
2015/04/11 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
详解Python常用的魔法方法
2021/06/03 Python
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers