浅谈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 相关文章推荐
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
javascript Firefox与IE 替换节点的方法
Feb 24 Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
JavaScript使用replace函数替换字符串的方法
Apr 06 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
Nov 06 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中使用模板的方法
2008/05/24 PHP
MySQL数据源表结构图示
2008/06/05 PHP
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
php实现等比例压缩图片
2018/07/26 PHP
php使用json-schema模块实现json校验示例
2019/09/28 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
基于node.js依赖express解析post请求四种数据格式
2017/02/13 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
使用layui+ajax实现简单的菜单权限管理及排序的方法
2019/09/10 Javascript
[01:59][TI9趣味视频] 全明星赛奖励
2019/08/23 DOTA
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
数控专业大学生的自我鉴定
2013/11/13 职场文书
大学生毕业求职自荐书范文
2014/02/04 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
2015年度女工工作总结
2015/10/22 职场文书
高中信息技术教学反思
2016/02/16 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Python中22个万用公式的小结
2021/07/21 Python
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
mysql脏页是什么
2021/07/26 MySQL