浅谈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 相关文章推荐
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
js获取TreeView控件选中节点的Text和Value值的方法
Nov 24 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
Dec 01 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
Sep 23 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
AngularJS转换响应内容
Jan 27 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js类的静态属性和实例属性的理解
2009/10/01 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Python中几个比较常见的名词解释
2015/07/04 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
python人民币小写转大写辅助工具
2018/06/20 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
python随机数分布random均匀分布实例
2019/11/27 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
自荐信格式简述
2014/01/25 职场文书
个人委托书范本
2014/04/02 职场文书
酒店管理专业自荐信
2014/05/23 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
行政处罚听证告知书
2015/07/01 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
python引入其他文件夹下的py文件具体方法
2021/05/23 Python
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS