浅谈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表单验证 - Parsley.js使用和配置
Jan 25 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript通过字典进行字符串翻译转换的方法
Mar 19 Javascript
jquery实现全屏滚动
Dec 28 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
JS常见构造模式实例对比分析
Aug 27 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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访问MYSQL数据库封装类(附函数说明)
2010/12/04 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
PHP生成网站桌面快捷方式代码分享
2014/10/11 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
JS替换字符串中空格方法
2015/04/17 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
Python排序函数的使用方法详解
2020/12/11 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
国家助学金获奖感言
2014/01/31 职场文书
申论倡议书范文
2014/05/13 职场文书
超市周年庆活动方案
2014/08/16 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
二手车转让协议书
2015/01/29 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL