js實現靜態頁面跳轉傳參
阿新 • • 發佈：2018-06-29
lpar 問題： com 一級目錄 cati expires map AS get
最近有個項目： 存靜態web服務，一個新聞頁面列表出所有新聞摘要信息，然後通過點擊新聞詳情訪問到該新聞的詳情頁面； 新聞展示的頁面通過ajax請求接口獲取到新聞的摘要信息，預計想通過id的方式訪問到新聞詳情頁面； 如果動態實現跳轉非常簡單，靜態文件跳轉。。。想了一下是否能實現在靜態文件的後面加上請求的id呢？比如動態情況http://news.com/?new_id=1； 靜態請求src="news_content.html?new_id=1" 最後查資料還是能實現的；
特別聲明：Post.html和Read.html文件在同一級目錄下
1. 請求頁面(新聞列表頁面)
Post.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 代碼如下: <a href="Read.html?art_id=1">靜態傳值</a> </body> </html>
2. 跳轉靜態的頁面(新聞詳情頁面)
Read.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> UrlParm = function () { // url參數 var data, index; (function init() { data = []; index = {}; var u = window.location.search.substr(1);if (u != ‘‘) { var parms = decodeURIComponent(u).split(‘&‘); for (var i = 0, len = parms.length; i < len; i++) { if (parms[i] != ‘‘) { var p = parms[i].split("="); if (p.length == 1 || (p.length == 2 && p[1] == ‘‘)) {// p | p= data.push([‘‘]); index[p[0]] = data.length - 1; } else if (typeof(p[0]) == ‘undefined‘ || p[0] == ‘‘) { // =c | = data[0] = [p[1]]; } else if (typeof(index[p[0]]) == ‘undefined‘) { // c=aaa data.push([p[1]]); index[p[0]] = data.length - 1; } else {// c=aaa data[index[p[0]]].push(p[1]); } } } } })(); return { // 獲得參數,類似request.getParameter() parm: function (o) { // o: 參數名或者參數次序 try { return (typeof(o) == ‘number‘ ? data[o][0] : data[index[o]][0]); } catch (e) { } }, //獲得參數組, 類似request.getParameterValues() parmValues: function (o) { // o: 參數名或者參數次序 try { return (typeof(o) == ‘number‘ ? data[o] : data[index[o]]); } catch (e) { } }, //是否含有parmName參數 hasParm: function (parmName) { return typeof(parmName) == ‘string‘ ? typeof(index[parmName]) != ‘undefined‘ : false; }, // 獲得參數Map ,類似request.getParameterMap() parmMap: function () { var map = {}; try { for (var p in index) { map[p] = data[index[p]]; } } catch (e) { } return map; } } }(); var art_id = UrlParm.parm("art_id"); console.log(art_id, ‘#####‘) </script> </body> </html>
3. 要設置cookice
問題：
這樣雖然是能實現需求，不過當用戶從新聞頁面傳參id到新聞詳情頁面，再次刷新，頁面上一次獲得id就不存在了；所有就想到是否可以將id寫入到cookice中，最好是頁面關閉的時候將cookice清空掉
特別提醒：要加載jquery.cookie.js文件下載地址
在剛才的Read.html頁面scripts標簽中進行添加代碼
<script type="text/javascript" src="/web/js/jquery.cookie.js"></script> <script type="text/javascript"> ... var art_id = UrlParm.parm("art_id"); console.log(art_id, ‘#####‘); /**設置cookice 存儲3天期限***/ $.cookie(‘art_id‘,art_id,{expires: 3,path:‘/‘}); /** 獲取cookice中的id */ $.cookie(‘art_id‘); /**最後就是正常的ajax請求接口獲取數據,然後巴拉巴拉~~~**/ </script>
頁面關閉清空cookie還沒搞，就先這樣作為一個筆記！！！！
附加：頁面關閉清空cookie沒有測試不清楚是否有效
window.onbeforeunload = function (event) { $.cookie(‘art_id‘, {expires: -1,path:‘/‘}); var message = ‘...‘; if (typeof event == ‘undefined‘) { event = window.event; } if (event) { event.returnValue = message; } return message; }
js實現靜態頁面跳轉傳參