除此以外，window.location.href和window.open也可以達到效果。

1、通過form表單傳遞參數

 html  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 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 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 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 

以上就是詳解前端在html頁面之間傳遞參數的方法的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。