前端在html頁面之間傳遞參數的方法 · 致力于web前端技術撰寫

項目中經常會出現的一種情況，有一個列表，譬如是案例列表，點擊列表中的某一項，跳轉至詳情頁面。詳情是根據所點擊的某條記錄生成的，因為案例和具體的詳情頁面，都是用戶后期自行添加的，我們開始編寫時，不可能窮盡。因此跳轉頁面時，我們需要傳遞一個參數過去，這樣我們才能通過這個參數進行數據請求，然后根據后臺返回的數據來生成頁面。因此，通過a標簽跳轉的方式，肯定是行不通的。? 我們經常寫form表單，提交時，可以傳遞參數，如果使用表單，并將其隱藏起來，應該可以達到效果。? 除此以外，window.location.href和window.open也可以達到效果。 ### 1、通過form表單傳遞參數 ~~~ <html lang="en"> <head>  <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="Keywords" content="關鍵詞一，關鍵詞二"> <meta name="Description" content="網站描述內容"> <meta name="Author" content="Yvette Lau"> <title>Document</title>   <link rel="stylesheet" href=""/> <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script> </head> <body> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "lemon"> <img class = "more" src = "main_jpg10.png" /> <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "aaa"> <img class = "more" src = "main_jpg10.png" /> <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;"> <input type="hidden" name="hid" value = "" index = "bbb"> <img class = "more" src = "main_jpg10.png" /> <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/> </form> </body> </html> <script> function foo(){ var frm = window.event.srcElement; frm.hid.value = $(frm.hid).attr("index"); return true; } </script> ~~~ 點擊圖片時，跳轉至receive.html頁面。頁面的url變成：? ![](https://box.kancloud.cn/2016-04-07_570603ff70378.jpg)? 我們想要傳的字符串已經傳遞了過來。? 然后再對當前的url進行字符串分割? window.location.href.split(“=”)[1]//得到lemon? 我們拿到需要傳來的參數之后，就可以根據這個進行下一步的處理了。? 除了上述通過字符串分割來獲取url傳遞的參數外，我們還可以通過正則匹配和window.location.search方法來獲取。 ### 2、通過window.location.href 譬如我們點擊某個列表，需要傳遞一個字符串到detail.html頁面，然后detail.html頁面根據傳來的值，通過ajax交互數據，加載頁面的內容。 var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; }); 當前頁面會被替換成recieve.html的頁面，頁面的url變為：? ![](https://box.kancloud.cn/2016-04-07_570603ff7fda6.jpg)? 然后我們再用上面的方法提取自己需要的參數 ### 3、通過window.location.open 如果是希望打開一個新頁面，而不是改變當前的頁面，那么window.location.href就不適用了，此時，我們需要借助于window.location.open()來實現? 簡單介紹有一下window.open()函數，window.open()有三個參數，第一個參數是要打開的頁面的url,第二個參數是窗口目標，第三個參數是一個特定字符串以及一個表示新頁面是否取代瀏覽器歷史集中當前加載頁面的布爾值，通過只需要傳遞第一個參數。第二個參數還可以是”_blank”,”_self”,”_parent”,”_top”這樣的特殊窗口名稱，”_blank”打開新窗口,”_self”實現的效果同window.location.href.? 繼續上面的例子： ~~~ <script> var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.open(url) }); </script> ~~~ 這樣在點擊的時候，就會打開一個新頁面，頁面的url地址與上面相同。? 由于瀏覽器的安全限制，有些瀏覽器在彈出窗口配置方面增加限制，大多數瀏覽器都內置有彈出窗口的屏蔽程序，因此，彈出窗口有可能被屏蔽，在彈出窗口被屏蔽時，需要考慮兩種可能性，一種是瀏覽器內置的屏蔽程序阻止彈出窗口，那么 window.open()很可能返回Null，此時，只要監測這個返回的值就可以確定彈出窗口是否被屏蔽。 ~~~ var newWin = window.open(url); if(newWin == null){ alert("彈窗被阻止"); } ~~~ 另一種是瀏覽器擴展或其他程序阻止的彈出窗口，那么window.open()通常會拋出一個錯誤，因此，要像準確的檢測彈出窗口是否被屏蔽，必須在檢測返回值的同時，將window.open()封裝在try-catch塊中，上面的例子中可以寫成如下形式： ~~~ <script> var blocked = false; try{ var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ var newWin = window.open(url); if(newWin == null){ blocked = true; } }); } catch(ex){ block = true; } if(blocked){ alert("彈出窗口被阻止"); } </script> ~~~