最近在開發一個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=)