浅谈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操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
举例说明如何为JavaScript的方法参数设置默认值
Nov 17 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
Aug 08 Javascript
微信小程序 合法域名校验出错详解及解决办法
Mar 09 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
three.js搭建室内场景教程
Dec 30 Javascript
微信小程序实现通讯录列表展开收起
Nov 18 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 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 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
PHP抓取淘宝商品的用户晒单评论+图片+搜索商品列表实例
2016/04/14 PHP
详解PHP队列的实现
2019/03/14 PHP
jquery中dom操作和事件的实例学习 下拉框应用
2011/12/01 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
onmouseover事件和onmouseout事件全面理解
2016/08/15 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
python3解析库pyquery的深入讲解
2018/06/26 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
python编写俄罗斯方块
2020/03/13 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
python 线程的五个状态
2020/09/22 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
经典的班主任推荐信
2013/10/28 职场文书
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
生物科学系大学生的自我评价
2013/12/20 职场文书
仓库管理专业个人的自我评价
2013/12/30 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS