前幾天項目在上線過程中，出現了一些新問題。頁面在切換時由于前一個頁面的模板清理不及時，會造成頁面的重疊。導致這個問題的原因是：頁面模板緩存，即上一個頁面退出時，瀏覽器沒有及時清空上一個頁面的模板，導致新頁面加載時，舊頁面模板依然存在，從而頁面出現重疊。
模板緩存清除：
模板緩存的清除包括傳統的 HTML標簽設置清除緩存，以及angularJs的一些配置清除，和angularJs的路由切換清除
1、以下是傳統的清除瀏覽器的方法
HTMLmeta標簽設置清除緩存
<!-- 清除緩存 --><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /><meta http-equiv="Pragma" content="no-cache" /><meta http-equiv="Expires" content="0" />
清理form表單臨時緩存
<body onLoad="javascript:document.formName.reset()">
2、angularJs配置清除緩存
1、清除路由緩存，在route路由配置中，注入$httpProvider服務，通過$httpProvider服務配置，清除路由緩存。
app.config(["$stateProvider","$urlRouterProvider",'$locationProvider','$httpProvider',function ($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { if (!$httpProvider.defaults.headers.get) { $httpProvider.defaults.headers.get = {}; } $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest'; $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache'; $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';}]);2、用隨機數，隨機數也是一種很不錯避免緩存的的方法，即在鏈接 URL 參數后加上隨機數(一般加時間戳) 。用隨機時間，和隨機數一樣。
3、在狀態路由配置中，將cache配置項，配置為false。
.state("discountCoupon", { url: "/discountCoupon", templateUrl: "discountCoupon.html?" + new Date().getTime(), //隨機數 controller: 'discountCoupon', cache: false, //cache配置}).state("customerPhone", { url: "/customerPhone", templateUrl: "customerPhone.html?" + new Date().getTime(), //隨機數 controller: 'customerPhone', cache: false, //cache配置})3、angularJs的路由切換清除緩存
angularJs默認 模板加載都會被緩存起來，使用的緩存服務是 $tempalteCache, 發送模板請求的服務是$templateRequest，所以可以在路由切換時將上一個頁面的模板清除：
1.每次發送 $http 請求模板完成后，可以調用 $tempalteCache.remove(url) 或 $tempalteCache. removeAll 清除所有模板緩存。
$rootScope.$on('$stateChangeStart', //路由開始切換 function (event, toState, toParams, fromState, fromParams) { //路由開始切換，清除以前所有模板緩存 if (fromState.templateUrl !== undefined) { $templateCache.remove(fromState.templateUrl); // $templateCache.removeAll(); } });$rootScope.$on('$stateChangeSuccess', //路由切換完成 function (event, toState, toParams, fromState, fromParams) { //路由切換成功，清除上一個頁面模板緩存 if (fromState.templateUrl !== undefined) { $templateCache.remove(fromState.templateUrl); // $templateCache.removeAll(); }});
新聞熱點
疑難解答
圖片精選
