明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

詳細(xì)說明前端在html頁面之間傳遞參數(shù)的方法

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

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

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

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

<html>
    <head>
    <!--網(wǎng)站編碼格式，UTF-8 國際編碼，GBK或 gb2312 中文編碼-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="關(guān)鍵詞一，關(guān)鍵詞二">
        <meta name="Description" content="網(wǎng)站描述內(nèi)容">
        <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>

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

2018062916233729.png

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

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

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

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

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

2、通過window.location.href

譬如我們點擊某個列表，需要傳遞一個字符串到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>

2018062916233730.png

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

3、通過window.location.open

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

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

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

<script>
    var index = "lemon";
    var url = "receive.html?index="+index;
    $("#more").click(function(){
        window.open(url)
    });
</script>

這樣在點擊的時候，就會打開一個新頁面，頁面的url地址與上面相同。

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

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

另一種是瀏覽器擴展或其他程序阻止的彈出窗口，那么window.open()通常會拋出一個錯誤，因此，要像準(zhǔn)確的檢測彈出窗口是否被屏蔽，必須在檢測返回值的同時，將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頁面之間傳遞參數(shù)的方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護的網(wǎng)站。