Dynamic Redirect with JavaScript
Split and Modify URL Using JavaScript to allow Dynamic Redirect
JavaScript tutorial article explaining how to split and modify a URL using JavaScript to allow dynamic redirection of web site traffic.
This JavaScript programming tutorial is designed to show the steps required to split and modify URLs using JavaScript. This has multiple uses in creating javascript split test pages, or just providing a facility to split traffic with JavaScript. The process is as follows:
- Get current URL
- Split the URL
- Create a new URL
- Redirect the Browser
The new URL that will be created here is just a redirect to a Google query. However, it could be any kind of inline or redirect code. For example, a part of the HTML could contain an HTML div that is designed to be populated with YouTube videos that relate to the subject matter of the URL. Other uses include querying Amazon.com for products relating to a specific topic, to generate revenue for the site owner.
JavaScript Properties & Functions Required
The document.URL property is used to retrieve the current URL. However, in this case, window.location.href could equally well have been used.
The string.split method is used to split the HREF into its component parts.
Finally, the window.location.href property is used to set the new URL. In addition, window.location.reload is used to force a refresh of the page so that the new one is loaded.
Process
The entire process is as follows:
- Obtain URL
- Split into components, using / as the separator
- Split the end component to get page, using . as the separator
- Create Query URL
- Pass to the site Search Engine using redirection
Note that in the third step, the separator to be used could have been the ?, followed by & and lastly = in order to break up a URL such as:
Sample code to achieve the five steps in the above JavaScript split and modify URL process might be as follows:
componentList = szURL.split('/');
szDocument = componentList[componentList.length-1];
documentFilename = szDocument.split('.');
szDocumentTopic = documentFilename[0];
szNewURL = "http://www.google.com/search?q=" + szDocumentTopic;
window.location.href=szNewURL;
window.location.reload();
In the above code snippet, it is assumed that the filename of the document is being used to create the search query. It is equally possible to use folder names from the URL (stopping short of the domain name in the componentList array), or even values from the web page itself. However, as this script is intended to be used in a custom error 404 page, it is useful to be able to use the above technique.
Of course, in a custom 404 page, the referring URL would need to be used in place of the document.URL of the current document.
For more information about the JavaScript split function, the JavaScript Split List or String article can be consulted. In addition, dynamic HTML is discussed in the Dynamic HTML Primer article.
If dynamic redirection is not the goal of the split and modify URL process, then JavaScript HREF objects can be used. These are covered in the Using HREF JavaScript Links, with explicit coverage of the document.write function in the JavaScript document.write Tutorial.
One of the key uses for this technique, as well as other dynamic document redirection techniques is in creating JavaScript split test landing pages where the incoming traffic can be split across multiple target destinations as part of a online marketing testing process.
