Detailed explanation of the front-end method of passing parameters between HTML pages

A situation that often occurs in a project is that there is a list, such as a case list. Click an item in the list to jump to the details page. The details are generated based on the record clicked. Since cases and specific detail pages are added by users later, it is impossible for us to be exhaustive when we start writing. Therefore, when jumping to the page, we need to pass a parameter so that we can make a data request through this parameter, and then generate the page according to the data returned by the background. Therefore, jumping through the a label will definitely not work.
We often write forms. When submitting, we can pass parameters. If we use the form and hide it, the effect should be achieved.

In addition, window.location.href and window.open can also achieve the same effect.

1. Pass parameters through form

<html lang="en">
    <head>
    <!--Website encoding format, UTF-8 international encoding, GBK or gb2312 Chinese encoding-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="Keywords" content="Keyword 1, Keyword 2">
        <meta name="Description" content="Website description">
        <meta name="Author" content="Yvette Lau">
        <title>Document</title>
        <!--Introduction of css js files-->
        <!-- <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 = "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;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 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>

When you click the image, you will be redirected to the receive.html page. The url of the page becomes:

The string we want to pass has been passed.

Then split the current URL into strings

window.location.href.split("=")[1]//Get lemon

After we get the parameters that need to be passed, we can proceed to the next step based on this.

In addition to the above method of obtaining the parameters passed by the URL through string segmentation, we can also obtain them through regular matching and window.location.search method.

2. Through window.location.href

For example, when we click on a list, we need to pass a string to the detail.html page, and then the detail.html page loads the content of the page through ajax interaction data based on the passed value.

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

The current page will be replaced with the recieve.html page, and the URL of the page will become:

Then we use the above method to extract the parameters we need

3. Through window.location.open

If you want to open a new page instead of changing the current page, then window.location.href is not applicable. At this time, we need to use window.location.open() to achieve

Let's briefly introduce the window.open() function. Window.open() has three parameters. The first parameter is the URL of the page to be opened, the second parameter is the window target, and the third parameter is a specific string and a Boolean value indicating whether the new page replaces the currently loaded page in the browser history. Only the first parameter needs to be passed. The second parameter can also be a special window name such as "_blank", "_self", "_parent", or "_top". "_blank" opens a new window, while "_self" achieves the same effect as window.location.href.

Continuing with the above example:

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

In this way, when you click, a new page will be opened, and the URL address of the page is the same as above.

Due to browser security restrictions, some browsers add restrictions on pop-up window configuration. Most browsers have built-in pop-up window blockers. Therefore, pop-up windows may be blocked. When pop-up windows are blocked, two possibilities need to be considered. One is that the browser's built-in blocker blocks pop-up windows. In this case, window.open() is likely to return Null. At this time, you only need to monitor the returned value to determine whether the pop-up window is blocked.

var newWin = window.open(url);
if(newWin == null){
    alert("Pop-up blocked");
}

The other is a pop-up window blocked by a browser extension or other program. In this case, window.open() will usually throw an error. Therefore, to accurately detect whether the pop-up window is blocked, you must encapsulate window.open() in a try-catch block while detecting the return value. The above example can be written as follows:

<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("Pop-up window blocked");
    }    
</script>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: A brief discussion on adaptive layout issues on mobile devices (responsive, rem/em, Js dynamics)

>>: Summary of how to use the MySQL authorization command grant