A situation that often occurs in projects is that there is a list, such as a case list, and clicking on an item in the list will 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 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 <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=Keywords one, Keywords two> <meta name=Description content=Website description content> <meta name=Author content=Yvette Lau> <title>Document</title> <!--Introduction of css js file--> <!-- <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 on the picture, it will jump to the receive.html page. The url of the page becomes:
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 with 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.hrefFor 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.openIf 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 it.
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's history. Only the first parameter needs to be passed. 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.
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 clicked, a new page will open with the same url address as above.
Due to browser security restrictions, some browsers add restrictions on pop-up window configuration. Most browsers have built-in pop-up window blocking programs. Therefore, pop-up windows may be blocked. When pop-up windows are blocked, two things need to be considered. One possibility is that the browser's built-in blocking program blocks pop-up windows, so window.open() is likely to return Null. At this time, you can determine whether the pop-up window has been blocked by monitoring the returned value.
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. Then window.open() usually throws an error. Therefore, to accurately detect whether the pop-up window is blocked, you must detect the return value and at the same time, window.open() is encapsulated in a try-catch block. In the above example, it 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 is blocked); } </script>The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.