詳解前端在html頁面之間傳遞參數的方法-html教學-PHP中文網

首頁

web前端

html教學

詳解前端在html頁面之間傳遞參數的方法

无忌哥哥

Jul 12, 2018 am 09:07 AM

html傳遞參數

項目中常會出現的一種情況，有一個列表，譬如是案例列表，點擊列表中的某一項，跳轉至詳情頁面。詳情是根據所點擊的某筆記錄產生的，因為案例和具體的詳情頁面，都是用戶後期自行添加的，我們開始編寫時，不可能窮盡。因此跳轉頁面時，我們需要傳遞一個參數過去，這樣我們才能透過這個參數進行資料請求，然後根據後台傳回的資料來產生頁面。因此，透過a標籤跳轉的方式，肯定是行不通的。
我們經常寫form表單，提交時，可以傳遞參數，如果使用表單，並將其隱藏起來，應該可以達到效果。

除此之外，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="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png?x-oss-process=image/resize,p_40"  class="lazy"  src = "main_jpg10.png" / alt="詳解前端在html頁面之間傳遞參數的方法" >
            <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="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png?x-oss-process=image/resize,p_40"  class="lazy"  src = "main_jpg10.png" / alt="詳解前端在html頁面之間傳遞參數的方法" >
            <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="/static/imghwm/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png?x-oss-process=image/resize,p_40"  class="lazy"  src = "main_jpg10.png" / alt="詳解前端在html頁面之間傳遞參數的方法" >
            <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變成：

詳解前端在html頁面之間傳遞參數的方法

我們想要傳的字串已經傳遞過來了。

然後再對目前的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變成：

詳解前端在html頁面之間傳遞參數的方法

然後我們再用上面的方法提取自己需要的參數

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頁面之間傳遞參數的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML的多功能性：應用和用例Apr 30, 2025 am 12:03 AM

HTML不僅是網頁的骨架，更廣泛應用於多種領域：1.在網頁開發中，HTML定義頁面結構並結合CSS和JavaScript實現豐富界面。 2.在移動應用開發中，HTML5支持離線存儲和地理定位等功能。 3.在電子郵件和新聞通訊中，HTML提升郵件的格式和多媒體效果。 4.在遊戲開發中，HTML5的CanvasAPI用於創建2D和3D遊戲。