浅谈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 相关文章推荐
Javascript学习笔记 delete运算符
Sep 13 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
vue.js开发环境搭建教程
May 04 Javascript
Angular.js中angular-ui-router的简单实践
Jul 18 Javascript
ES6之模版字符串的具体使用
May 17 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
Dec 09 Javascript
前端js中的事件循环eventloop机制详解
May 15 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Element MessageBox弹框的具体使用
Jul 27 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 stream_context_create()作用和用法分析
2011/03/29 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
浅谈PHP5.6 与 PHP7.0 区别
2019/10/09 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
Jquery Ajax学习实例5 向WebService发出请求,返回泛型集合数据的异步调用
2010/03/17 Javascript
javascript常用对话框小集
2013/09/13 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JavaScript中函数声明与函数表达式的区别详解
2016/08/18 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
jQuery实现淡入淡出的模态框
2017/02/09 Javascript
JS实现访问DOM对象指定节点的方法示例
2018/04/04 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
解决layui富文本编辑器图片上传无法回显的问题
2019/09/18 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
Python字符串格式化输出方法分析
2016/04/13 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
mac系统安装Python3初体验
2018/01/02 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
基于python全局设置id 自动化测试元素定位过程解析
2019/09/04 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
养牛场项目建议书
2014/05/13 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
5种 JavaScript 方式实现数组扁平化
2021/10/05 Javascript
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Elasticsearch 索引操作和增删改查
2022/04/19 Python