Method for passing parameters between html pages at the front end
There is a list, for example, a case list, which usually appears in a project. Click an item in the list to go to the details page. The details are generated based on a selected record. Because the case and the details page are added by the user later, it is impossible for us to write them all at the beginning. Therefore, when redirecting to a page, we need to pass a parameter so that we can request data through this parameter and generate a page based on the data returned by the background. Therefore, the method of jump through the tag is certainly not feasible.
We often write form forms. When submitting a form, we can pass parameters. If a form is used and hidden, it should be effective.
In addition, window. location. href and window. open can also achieve the effect.
<Html lang = "en"><script>function foo(){var frm = window.event.srcElement;frm.hid.value = $(frm.hid).attr("index");return true;}</script>Click the image to go to The receive.html page. The page url is changed:
2. Use window. location. href
The string we want to upload has been passed.
Then, separate the current url string.
Window. location. href. split ("=") [1] // obtain the lemon
After obtaining the required parameters, we can proceed with the next step.
In addition to the above parameters passed by the url through string splitting, we can also get the parameters through the regular expression matching and window. location. search methods.For example, if you click a button to upload a string to the detail.html page, then the detail.html page loads the content of the page based on the sent value through ajax interaction data.
Var index = "lemon"; var url = "receive.html? Index = "+ index; $ (" # more "). click (function () {window. location. href = url ;});When the front page is replaced with a recieve.html page, the url of the page is changed:
3. Use window. location. open
Then we use the above method to extract the required parameters.If you want to open a new page instead of changing the current page, window. location. href is not applicable. At this time, we need to implement it by means of window. location. open ().
A brief introduction includes window. open () function, window. open () has three parameters. The first parameter is the url of the page to be opened, and the second parameter is the window Target, the third parameter is a specific string and indicates whether the new page replaces the Boolean value of the page currently loaded in the browser's historical set. You only need to pass the first parameter. The second parameter can also be a special window name such as "_ blank", "_ self", "_ parent", and "_ top". "_ blank" opens a new window, "_ self" achieves the same effect as 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>In this way, a new page is opened, and the url of the page is the same as that above.
Due to browser security restrictions, Some browsers add restrictions on pop-up window configuration. Most browsers have built-in pop-up window shielding programs. Therefore, pop-up windows may be blocked, when the pop-up window is blocked, you need to consider two possibilities. One is that the built-in shielding program of the browser blocks the pop-up window. open () is likely to return Null. In this case, 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 window blocked ");}The other is the pop-up window blocked by the browser extension or other programs. open () usually throws an error. Therefore, to accurately detect whether the pop-up window is blocked, you must check the return value while setting the window. open () is encapsulated in a try-catch Block. The preceding 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 ("the pop-up window is blocked") ;}</script>
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
