浅谈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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
JS跨域代码片段
Aug 30 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
JS实现的ajax和同源策略(实例讲解)
Dec 01 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 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 Token(令牌)设计
2008/03/15 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP扩展模块Pecl、Pear以及Perl的区别
2014/04/09 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
11款基于Javascript的文件管理器
2009/10/25 Javascript
基于jQuery中对数组进行操作的方法
2013/04/16 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
初识Javascript小结
2015/07/16 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
AngularJS 自定义过滤器详解及实例代码
2016/09/14 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
python使用xmlrpc实例讲解
2013/12/17 Python
python OpenCV学习笔记实现二维直方图
2018/02/08 Python
Python使用Phantomjs截屏网页的方法
2018/05/17 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
如何删除一个表里面的重复行
2013/07/13 面试题
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
如何选择使用结构还是类
2014/05/30 面试题
几个常见的软件测试问题
2016/09/07 面试题
《我的信念》教学反思
2014/02/15 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
老公给老婆的保证书
2014/04/28 职场文书
护理专科学生自荐书
2014/07/05 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
同事打架检讨书
2015/05/06 职场文书
试用期转正工作总结2015
2015/05/28 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python