前言：原來做過一個項目，需要實現一個頁面打印的功能，由於項目中使用了AngularJS+Bootstrap等前端框架，需要打印的頁面又在彈出框中，使用了Bootstrap的模態框后發現打印的效果不太好，后來就使用原生的方式彈出一個新的窗口，不過新的窗口中的某些數據又需要從前一個頁面中獲取，使用AngularJS框架后發現從后台返回的頁面總是被封裝成一個對象，壓根展現不了，怎么辦？下面的這個小方法就是用於解決這個問題的——頁面間跳轉，在需要傳遞的參數不多的情況下，使用URL路徑來傳遞參數。代碼比較簡單，在此小記一筆，興許以后能用得到，至少明白這種思路是怎么回事。
1：為了方便實例的演示，將演示的靜態文件放在了同一個目錄下
2：getRequestParameters.js文件，專門用於獲取GET請求中的參數，此文件是此次小白例的核心代碼，注釋詳細不多說了
(function(){ //返回當前 URL 的查詢部分（問號 ? 之后的部分）。 var urlParameters = location.search; //聲明並初始化接收請求參數的對象 var requestParameters = new Object(); //如果該求青中有請求的參數，則獲取請求的參數，否則打印提示此請求沒有請求的參數 if (urlParameters.indexOf('?') != -1) { //獲取請求參數的字符串 var parameters = decodeURI(urlParameters.substr(1)); //將請求的參數以&分割中字符串數組 parameterArray = parameters.split('&'); //循環遍歷，將請求的參數封裝到請求參數的對象之中 for (var i = 0; i < parameterArray.length; i++) { requestParameters[parameterArray[i].split('=')[0]] = (parameterArray[i].split('=')[1]); } console.info('theRequest is =====',requestParameters); } else { console.info('There is no request parameters'); } return requestParameters; })();
3：home.html文件，假設這個簡單的頁面就是第一個頁面，實驗證實了一下，在本頁面中也能拿到對應的請求參數
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Home Page</title> <!-- 引入獲取頁面請求條件的JS文件 --> <script type="text/javascript" src="getRequestParameters.js"></script> </head> <body bgcolor="LightCyan" align="center"> <a href="home.html">I will go to Home Page and no request parameters</a> <br/> <a href="index.html">I will go to Index Page and no request parameters</a> <br/> <a href="home.html?name=豬八戒&sex=boy&age=99">I will go to Home Page and bring request parameters</a> <br/> <a href="index.html?name=豬八戒&sex=boy&age=99">I will go to Index Page and bring request parameters</a> </body> </html>
4：index.html文件，這個文件就是我們假設要跳轉的靜態文件，非常簡單，僅供實例演示使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Index Page</title> <!-- 引入獲取頁面請求條件的JS文件 --> <script type="text/javascript" src="getRequestParameters.js"></script> </head> <body bgcolor="AliceBlue" align="center"> </body> </html>
5：如下圖所示，是實例代碼演示的效果
6：小結
此例思路、代碼都比較簡單，不過不容易想的到，以前做的項目牽涉到頁面間跳轉需要傳遞參數的，幾乎全部都是將參數傳送到后端，然后從后端再傳送到前端的。很少使用這種前端頁面間通過URL來傳遞參數的方式，不過這種方式有時候也是可行。