浅谈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 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
JS实现可点击展开与关闭的左侧广告代码
Sep 02 Javascript
全面了解JavaScript对象进阶
Jul 19 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
Javascript之高级数组API的使用实例
Mar 08 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
ES6模板字符串和标签模板的应用实例分析
Jun 25 Javascript
NUXT SSR初级入门笔记(小结)
Dec 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实现的功能是显示8条基色色带
2006/10/09 PHP
用php随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php获取文件内容最后一行示例
2014/01/09 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP赋值的内部是如何跑的详解
2019/01/13 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
使用js修改客户端注册表的方法
2013/08/09 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
2014/09/01 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Angular的模块化(代码分享)
2016/12/26 Javascript
基于Vue实现页面切换左右滑动效果
2020/06/29 Javascript
JSONP原理及应用实例详解
2018/09/13 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
2019/08/04 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
python可迭代对象去重实例
2020/05/15 Python
python中有帮助函数吗
2020/06/19 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
可贵的沉默教学反思
2014/02/06 职场文书
高中军训感言1000字
2014/03/01 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
小学体育组工作总结
2015/08/13 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
nodejs利用readline提示输入内容实例代码
2021/07/15 NodeJs