Detailed explanation of the front-end method of passing parameters between html pages-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

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

无忌哥哥

Jul 12, 2018 am 09:07 AM

html Pass parameters

A situation that often occurs in projects is that there is a list, such as a case list. Click on an item in the list to jump to the details page. The details are generated based on a clicked record, because the cases and specific details pages are added by users later. When we start writing, it is impossible to exhaust them all. 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 based on the data returned by the background. Therefore, jumping through the a tag will definitely not work.
We often write form 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 effect.

1. Pass parameters through the form 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/imghw/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png"  class="lazy"  src = "main_jpg10.png" / alt="Detailed explanation of the front-end method of passing parameters between html pages" >
            <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/imghw/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png"  class="lazy"  src = "main_jpg10.png" / alt="Detailed explanation of the front-end method of passing parameters between html pages" >
            <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/imghw/default1.png"  data-src="https://img.php.cn//upload/image/325/277/595/1531357491512805.png"  class="lazy"  src = "main_jpg10.png" / alt="Detailed explanation of the front-end method of passing parameters between html pages" >
            <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>

Copy after login

When you click on the picture, jump to the receive.html page. The url of the page becomes:

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

#The string we want to pass has been passed.

Then perform string splitting on the current url

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-mentioned string splitting to obtain the parameters passed by the url, we can also obtain them through regular matching and the 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 passes Ajax interactive data, loading the content of the page.

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

Copy after login

The current page will be replaced with the recieve.html page, and the url of the page becomes:

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

Then we use The above method extracts the parameters you need

3. Through window.location.open

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

A brief introduction to 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, 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, by passing only the first parameter. The second parameter can also be a special window name such as "_blank", "_self", "_parent", "_top". "_blank" opens a new window, and "_self" achieves the same effect as window.location.href.

Continue the above example:

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

Copy after login

In this way, when clicked, 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 have added restrictions on pop-up window configuration. Most browsers have built-in pop-up window blocking programs. Therefore, pop-up windows may be blocked. When the pop-up window is When blocking, you need to consider two possibilities. One is that the browser's built-in blocking program blocks pop-up windows. Then window.open() is likely to return Null. At this time, you can determine whether the pop-up window is blocked by monitoring the returned value. shield.

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

Copy after login

The other is a pop-up window blocked by a browser extension or other program, then window.open() usually throws an error. Therefore, to accurately detect whether the pop-up window is blocked, it must be While detecting the return value, encapsulate window.open() in a try-catch block. In the above example, it can be written in the following form:

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

Copy after login

The above is the detailed content of Detailed explanation of the front-end method of passing parameters between html pages. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn