小編給大家分享一下前端在html頁面之間傳遞參數(shù)的方法有哪些，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、營銷型網(wǎng)站建設(shè)、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式重慶網(wǎng)站建設(shè)公司、成都手機(jī)網(wǎng)站制作、微商城、網(wǎng)站托管及網(wǎng)站維護(hù)、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為成都柴油發(fā)電機(jī)行業(yè)客戶提供了網(wǎng)站建設(shè)服務(wù)。

項(xiàng)目中經(jīng)常會出現(xiàn)的一種情況，有一個(gè)列表，譬如是案例列表，點(diǎn)擊列表中的某一項(xiàng)，跳轉(zhuǎn)至詳情頁面。詳情是根據(jù)所點(diǎn)擊的某條記錄生成的，因?yàn)榘咐途唧w的詳情頁面，都是用戶后期自行添加的，我們開始編寫時(shí)，不可能窮盡。因此跳轉(zhuǎn)頁面時(shí)，我們需要傳遞一個(gè)參數(shù)過去，這樣我們才能通過這個(gè)參數(shù)進(jìn)行數(shù)據(jù)請求，然后根據(jù)后臺返回的數(shù)據(jù)來生成頁面。因此，通過a標(biāo)簽跳轉(zhuǎn)的方式，肯定是行不通的。
我們經(jīng)常寫form表單，提交時(shí)，可以傳遞參數(shù)，如果使用表單，并將其隱藏起來，應(yīng)該可以達(dá)到效果。

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

1、通過form表單傳遞參數(shù)

點(diǎn)擊圖片時(shí)，跳轉(zhuǎn)至receive.html頁面。頁面的url變成：

我們想要傳的字符串已經(jīng)傳遞了過來。

然后再對當(dāng)前的url進(jìn)行字符串分割

window.location.href.split(“=”)[1]//得到lemon

我們拿到需要傳來的參數(shù)之后，就可以根據(jù)這個(gè)進(jìn)行下一步的處理了。

除了上述通過字符串分割來獲取url傳遞的參數(shù)外，我們還可以通過正則匹配和window.location.search方法來獲取。

2、通過window.location.href

譬如我們點(diǎn)擊某個(gè)列表，需要傳遞一個(gè)字符串到detail.html頁面，然后detail.html頁面根據(jù)傳來的值，通過ajax交互數(shù)據(jù)，加載頁面的內(nèi)容。

var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });

當(dāng)前頁面會被替換成recieve.html的頁面，頁面的url變?yōu)椋?/p>

然后我們再用上面的方法提取自己需要的參數(shù)

3、通過window.location.open

如果是希望打開一個(gè)新頁面，而不是改變當(dāng)前的頁面，那么window.location.href就不適用了，此時(shí)，我們需要借助于window.location.open()來實(shí)現(xiàn)

簡單介紹有一下window.open()函數(shù)，window.open()有三個(gè)參數(shù)，第一個(gè)參數(shù)是要打開的頁面的url,第二個(gè)參數(shù)是窗口目標(biāo)，第三個(gè)參數(shù)是一個(gè)特定字符串以及一個(gè)表示新頁面是否取代瀏覽器歷史集中當(dāng)前加載頁面的布爾值，通過只需要傳遞第一個(gè)參數(shù)。第二個(gè)參數(shù)還可以是”_blank”,”_self”,”_parent”,”_top”這樣的特殊窗口名稱，”_blank”打開新窗口,”_self”實(shí)現(xiàn)的效果同window.location.href.

繼續(xù)上面的例子：

這樣在點(diǎn)擊的時(shí)候，就會打開一個(gè)新頁面，頁面的url地址與上面相同。

由于瀏覽器的安全限制，有些瀏覽器在彈出窗口配置方面增加限制，大多數(shù)瀏覽器都內(nèi)置有彈出窗口的屏蔽程序，因此，彈出窗口有可能被屏蔽，在彈出窗口被屏蔽時(shí)，需要考慮兩種可能性，一種是瀏覽器內(nèi)置的屏蔽程序阻止彈出窗口，那么 window.open()很可能返回Null，此時(shí)，只要監(jiān)測這個(gè)返回的值就可以確定彈出窗口是否被屏蔽。

var newWin = window.open(url);
if(newWin == null){
    alert("彈窗被阻止");
}

另一種是瀏覽器擴(kuò)展或其他程序阻止的彈出窗口，那么window.open()通常會拋出一個(gè)錯誤，因此，要像準(zhǔn)確的檢測彈出窗口是否被屏蔽，必須在檢測返回值的同時(shí)，將window.open()封裝在try-catch塊中，上面的例子中可以寫成如下形式：

看完了這篇文章，相信你對“前端在html頁面之間傳遞參數(shù)的方法有哪些”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！