最近在开发一个WebApp,思路很简单,就是用Hbuild做一个移动端的壳,再从这个壳跳转到服务端的页面(使用location.href,存在跨域)
开发过程中碰到一个问题,首次安装后跳转到服务端的页面需要加载css和js缓存,而这个过程可能需要耗时数秒钟,如果直接展示一个空白页的话用户体验不好。所以打算给这个壳的index页面加一个懒加载效果,但是由于使用location.href,跳转过程中大部分的动态效果(css跟动图)都处于卡顿状态,给人的感官极差。最后想了个折中的方案,通过iframe内嵌跳转页面,加载完成再进行展示,代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="HandheldFriendly" content="True">
<title>welcome</title>
<link rel="stylesheet" href="css/materialize.css">
<script src="js/jquery.min.js"></script>
<style>
body {
margin: 0px;
}
iframe {
border: 0px;
}
</style>
</head>
<body scroll="no">
<div class="container" id="container">
<div class="section" style="padding-top: 10rem;">
<div class="row">
<div class="col s12 m4">
</div>
<div class="col s12 m4">
<div class="icon-block">
<h2 class="center light-blue-text"><img src="img/profile.gif" alt="" class="z-depth-5" style="border-radius:0px;border: 0;width: 150px; height: 150px;"></h2>
<p class="center light">Just a moment......</p>
</div>
</div>
<div class="col s12 m4">
</div>
</div>
</div>
</div>
<!--style="visibility: hidden"-->
<iframe id="iframe" name="iframe" frameborder="0" style="visibility: hidden" width="100%" height="100%" scrolling="auto"
src="http://134.175.153.50/trunk/index"></iframe>
</body>
<script type="text/javascript">
$(function () {
$("#iframe").load(function () {
this.style.height=document.body.clientHeight;
if($("#iframe").is(':visible')){
$("#container").remove();
$("#iframe").css("visibility","");
}
});
});
</script>
</html>
直接使用Hbuild开发前端页面就不会出现这类问题,但是由于目前项目还未改造成前后端分离的结构,所以只能采用这种写法