項目中常會出現的一種情況，有一個列表，譬如是案例列表，點擊列表中的某一項，跳轉至詳情頁面。詳情是根據所點擊的某筆記錄產生的，因為案例和具體的詳情頁面，都是用戶後期自行添加的，我們開始編寫時，不可能窮盡。因此跳轉頁面時，我們需要傳遞一個參數過去，這樣我們才能透過這個參數進行資料請求，然後根據後台傳回的資料來產生頁面。因此，透過a標籤跳轉的方式，肯定是行不通的。
我們經常寫form表單，提交時，可以傳遞參數，如果使用表單，並將其隱藏起來，應該可以達到效果。
除此之外，window.location.href和window.open也可以達到效果。
1.透過form表單傳遞參數 <html lang=en> <head> <!--網站編碼格式，UTF-8 國際編碼，GBK或gb2312 中文編碼--> <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> <!--css js 檔案的引進--> <!-- <link rel=shortcut icon href=images/favicon.ico> --> <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 = more> <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; 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變成：
我們想要傳的字串已經傳遞過來了。
然後再對目前的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變成：
然後我們再用上面的方法來提取自己需要的參數
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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。