最近在开发一个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" target="_blank" rel="external nofollow" >
<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" frame 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开发前端页面就不会出现这类问题，但是由于目前项目还未改造成前后端分离的结构，所以只能采用这种写法
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)