浅谈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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
JavaScript 获取任一float型小数点后两位的小数
Jun 30 Javascript
JavaScript基本的输出和嵌入式写法教程
Oct 20 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
谈谈JS中的!!
Dec 07 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
js实现弹幕墙效果
Dec 10 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
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
ThinkPHP2.x防范XSS跨站攻击的方法
2015/09/25 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
php 截取中英文混合字符串的方法
2018/05/31 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
js的event详解。
2006/09/06 Javascript
学习YUI.Ext 第七天--关于View&JSONView
2007/03/10 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
JavaScript代码实现禁止右键、禁选择、禁粘贴、禁shift、禁ctrl、禁alt
2015/11/17 Javascript
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
详解tween.js 中文使用指南
2018/01/05 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
Python写的一个简单DNS服务器实例
2014/06/04 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
python中有关时间日期格式转换问题
2019/12/25 Python
html5 figure和figcaption的使用方法
2018/09/10 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
英国网上超市:Ocado
2020/03/05 全球购物
应届大学生求职信
2013/12/01 职场文书
2014年群众路线党员自我评议
2014/09/24 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2015欢度元旦标语口号
2014/12/09 职场文书
南湾猴岛导游词
2015/02/09 职场文书
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers