浅谈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 获取select下拉列表值的代码
Sep 07 Javascript
JS截取字符串常用方法详细整理
Oct 28 Javascript
js中Image对象以及对其预加载处理示例
Nov 20 Javascript
js控制浏览器全屏示例代码
Feb 20 Javascript
jQuery添加和删除输入文本框标签代码
May 20 Javascript
原生js编写基于面向对象的分页组件
Dec 05 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
Aug 29 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
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使用curl获取https请求的方法
2015/02/11 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
javascript 拖放效果实现代码
2010/01/22 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
2016/04/25 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
angularJs中json数据转换与本地存储的实例
2018/10/08 Javascript
微信小程序input抖动问题的修复方法
2021/03/03 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
Python set常用操作函数集锦
2017/11/15 Python
python+matplotlib实现动态绘制图片实例代码(交互式绘图)
2018/01/20 Python
logging level级别介绍
2020/02/21 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
雅诗兰黛香港官网:Estee Lauder香港
2017/09/26 全球购物
汽车运用工程毕业生自荐信
2013/10/29 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
九年级语文教学反思
2014/02/04 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
计算机通信专业推荐信
2014/02/22 职场文书
出生证明公证书
2014/04/09 职场文书
党员群众路线教育实践活动学习笔记
2014/11/05 职场文书
在校生证明
2015/06/17 职场文书
运动员入场前导词
2015/07/20 职场文书
婚宴致辞
2015/07/28 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
MySQL创建管理LIST分区
2022/04/13 MySQL