Home > Developer > Web Develop
A situation that often occurs in a project, there is a list, such as a list of cases, click an item in the list to jump to the details page. The details are generated according to a record that was clicked, because the case and the specific detail page were added by the user later, and when we started writing, it was impossible to exhaust. So when we jump to the page, we need to pass a parameter in the past so that we can make the data request through this parameter and then generate the page based on the data returned in the background. Therefore, through a tag jump way, certainly is not feasible.
We often write form forms, when submitted, can pass parameters, if the use of the form, and hide it, should be able to achieve the effect.
In addition, Window.location.href and window.open can also achieve results.
<html lang="en"> <head> <!--website encoding format, UTF-8 International code, GBK or gb2312 Chinese encoding-- <meta http-equiv="Content-type" content="text/html;charset= Utf-8 " /> <meta name="Keywords" content="keyword One, keyword two"> <meta name="Description" content ="site description"> <meta name="Author" content="Yvette Lau"> <title>Document</title> <!--the 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< /c12>; " > <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< /c12>; " > <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 on the image, jump to the receive.html page. The URL of the page becomes:
The string we want to pass has been passed over.
And then string-splitting the current URL.
Window.location.href.split ("=") [1]//get lemon
Once we get the parameters we need, we can proceed to the next step.
In addition to the above-mentioned string segmentation to get URL pass parameters, we can also be obtained through regular matching and Window.location.search methods.
For example, when we click on a list, we need to pass a string to the Detail.html page, and then detail.html the page to load the contents of the page based on the values that come from the Ajax interactive data.
var index = "Lemon"; var url = "receive.html?index=" +INDEX; $ ("#more"). Click (function () {window.location.href = URL;});The current page is replaced with a recieve.html page, and the URL of the page becomes:
And then we'll use the method above to extract the parameters we need.
If you want to open a new page, rather than change the current page, then window.location.href is not applicable, at this point, we need to use Window.location.open () to achieve
A brief description of the window.open () function, window.open () has three parameters, the first parameter is the URL of the page to open, the second parameter is the window target, The third parameter is a specific string and a Boolean value that indicates whether the new page supersedes the currently loaded page in the browser history set by passing only the first parameter. The second parameter can also be "_blank", "_self", "_parent", "_top" such as the special window name, "_blank" to open a new window, "_self" implementation of the effect of window.location.href.
Continue with the above example:
<script> var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.open(url) });</script>
This will open a new page when clicked, the URL address of the page is the same as above.
Due to browser security restrictions, some browsers in the pop-up configuration restrictions, most browsers have built-in pop-up screen blocker, so the pop-up window may be blocked, when the pop-up window is blocked, you need to consider two possibilities, one is the browser built-in blocking program block pop-up windows, then window.open () is likely to return null, at which point the returned value can be monitored to determine if the popup window is masked.
varwindow.open(url);ifnull){ alert("弹窗被阻止");}
The other is a browser extension or other program blocking pop-up window, then window.open () will usually throw an error, so, to like accurate detection of the pop-up window is masked, you must detect the return value while the window.open () is encapsulated in the Try-catch block, The example above can be written in the following form:
<script> varblocked =false;Try{varindex ="Lemon";varURL ="receive.html?index="+index; $("#more"). Click ( function(){ varNewwin = window.open (URL);if(Newwin = =NULL) {blocked =true; } }); }Catch(ex) {block =true; }if(blocked) {Alert ("pop-up windows are blocked"); }</script>How the front-end passes parameters between HTML pages
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
