When an HTTP asking for 1 page automatically goes to but about other page together with thence it is called a redirection. The redirection of a spider web page is used for different reasons e.g. redirecting to a different domain e.g. when you lot deed your website from 1 URL to but about other URL or redirecting to a to a greater extent than recent version of a page you lot are looking at it. There are many ways to redirect a spider web page together with different spider web technologies furnish different ways e.g. Java provides sendRedirect() together with forward() method for redirection. The redirection tin likewise hold upwards divided into ii categories, customer side together with server side. In customer side, redirection customer is responsible for routing asking to but about other URL but inwards server side redirection, its server's task to redirect to a novel page.
The jQuery together with JavaScript are generally used for customer side redirection together with at that topographic point are a publish of ways to redirect a spider web page using JavaScript In this tutorial, we'll essay but about of the most pop together with mutual ways to redirect a spider web page using JavaScript together with jQuery.
Tip: You should call back that window.location.href loads page from browser's cache together with does non ever post the asking to the server. So, if you lot convey an former version of the page available inwards the cache together with thence it volition redirect to at that topographic point instead of loading a fresh page from the server.
Tip: Use the replace() method if you lot desire to desire to redirect to a novel page together with don't allow the user to navigate to the master copy page using the dorsum button.
Tip: Use the assign() method for redirection if you lot desire to allow the user to exercise the dorsum push to acquire dorsum to the master copy document.
This code is similar to the commencement method together with the page volition hold upwards loaded from the cache if available instead of sending a novel asking to the server.
There is a slight divergence inwards using attr() vs window.location.href of JavaScript. The $(location).attr('href', url) volition asking a fresh page from server, land window.location.href loads pages from cache.
Here is a consummate spider web page which redirects to but about other URL using jQuery:
together with hither is the output of this spider web page when you lot run it on a spider web browser e.g. meshing explorer, chrome or edge:
You tin come across that page is redirecting, 1 time the redirect volition hold upwards complete, the URL together with page championship volition likewise hold upwards replaced past times the target URL. See Head First jQuery to larn to a greater extent than close jQuery together with its powerful API.
All 3 methods copy a dorsum push click programmatically. You tin exercise whatsoever of the methods you lot desire to use.
That's all close how to redirect a spider web asking to but about other spider web page using JavaScript together with jQuery. As you lot convey seen at that topographic point are multiple ways to redirect but at that topographic point is subtle differences betwixt them e.g. $(location).attr('href', url) telephone outcry upwards of jQuery volition opened upwards a fresh page from the server, but the Javascript window.location.href loads pages from cache. Similarly, the window.location.assign(url) adds novel URL to the document history together with redirected to the novel URL but window.location.replace("URL") removes electrical flow URL from history together with replaces it amongst a novel URL.
Further Reading
Other jQuery tutorials you lot may similar to explore
Thanks for reading this article. If you lot similar this article together with thence delight part amongst your friends together with colleagues. If you lot convey whatsoever interrogation or feedback together with thence delight drib a comment.
The jQuery together with JavaScript are generally used for customer side redirection together with at that topographic point are a publish of ways to redirect a spider web page using JavaScript In this tutorial, we'll essay but about of the most pop together with mutual ways to redirect a spider web page using JavaScript together with jQuery.
How to redirect a spider web page using JavaScript
Before looking at the jQuery code, let's commencement larn how to redirect a spider web page past times using apparently JavaScript. It provides several elementary ways to attain this task without loading an external JavaScript library similar jQuery.Redirection using window.location.href of Javascript
The most mutual way to redirect an URL using JavaScript is but setting the href attribute of the window.location object. This simulates normal navigation to a novel page. I don't think whatsoever task tin hold upwards simpler than this, but assign a novel URL. For example, if you lot are redirecting URL H5N1 to URL B together with thence but position the URL B hither every bit shown inwards the next example:window.location.href="http://newURL.com";
Tip: You should call back that window.location.href loads page from browser's cache together with does non ever post the asking to the server. So, if you lot convey an former version of the page available inwards the cache together with thence it volition redirect to at that topographic point instead of loading a fresh page from the server.
Redirection using replace() function
Another way to redirect to a spider web page inwards jQuery is past times using the replace() component of the window.location object. This method removes electrical flow URL from the history together with replaces it amongst a novel URL. Here is an instance of how to exercise this component for redirection:window.location.replace("url");
Tip: Use the replace() method if you lot desire to desire to redirect to a novel page together with don't allow the user to navigate to the master copy page using the dorsum button.
Redirection using window assign() function
You tin likewise exercise the window.location.assign() component to redirect a spider web page using JavaScript. This component adds novel URL to the history stack together with redirected to the novel URL, which means, dissimilar replace() component you lot tin exercise the dorsum push to acquire dorsum to the master copy document. Here is how you lot tin exercise this method to redirect to a novel urlwindow.location.assign("url");
Tip: Use the assign() method for redirection if you lot desire to allow the user to exercise the dorsum push to acquire dorsum to the master copy document.
Redirection using navigate function
This component is same every bit window.location="url" together with it likewise loads the page from the cache instead of straight requesting it from the server. Here is an instance to exercise the navigate() component for redirection to a novel pagewindow.navigate("page.html");
This code is similar to the commencement method together with the page volition hold upwards loaded from the cache if available instead of sending a novel asking to the server.
How to redirect spider web page using jQuery
The jQuery API likewise allows you lot to redirect a spider web page to but about other URL inwards but 1 trouble of code. Though this is non the ideal way of using jQuery together with but since nosotros all exercise jQuery for different needs inwards a spider web project, it makes feel to leverage it for whatever characteristic nosotros can. You tin exercise the attr() component of jQuery to redirect a spider web page every bit shown below:var url = "http://google.com"; $(location).attr('href',url);
There is a slight divergence inwards using attr() vs window.location.href of JavaScript. The $(location).attr('href', url) volition asking a fresh page from server, land window.location.href loads pages from cache.
Here is a consummate spider web page which redirects to but about other URL using jQuery:
<html> <head> <title>How to redirect a webpage using jQuery</title> </head> <body> <h2>Redirecting to but about other URL ..</h2> <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { var url = "http://javarevisited.blogspot.com"; $(location).attr('href',url); }); </script> </body> </html>
together with hither is the output of this spider web page when you lot run it on a spider web browser e.g. meshing explorer, chrome or edge:
You tin come across that page is redirecting, 1 time the redirect volition hold upwards complete, the URL together with page championship volition likewise hold upwards replaced past times the target URL. See Head First jQuery to larn to a greater extent than close jQuery together with its powerful API.
How to redirect to the previous page
Another instance of redirection is going to the previous page, hither are but about of the mutual way to acquire to the previous page using JavaScript's window object:window.history.back(); // Simulates a dorsum push click window.history.go(-1); // Simulates a dorsum push click window.history.back(-1); // Simulates a dorsum push click
All 3 methods copy a dorsum push click programmatically. You tin exercise whatsoever of the methods you lot desire to use.
That's all close how to redirect a spider web asking to but about other spider web page using JavaScript together with jQuery. As you lot convey seen at that topographic point are multiple ways to redirect but at that topographic point is subtle differences betwixt them e.g. $(location).attr('href', url) telephone outcry upwards of jQuery volition opened upwards a fresh page from the server, but the Javascript window.location.href loads pages from cache. Similarly, the window.location.assign(url) adds novel URL to the document history together with redirected to the novel URL but window.location.replace("URL") removes electrical flow URL from history together with replaces it amongst a novel URL.
Further Reading
- 5 Books to larn jQuery for Web developers (books)
- How to acquire electrical flow URL, Parameters, together with Hash using jQuery? (solution)
- How to alter to a greater extent than than 1 chemical ingredient inwards 1 line? (example)
- jQuery Hello World Example (program)
- Free jQuery eBooks together with PDFs (download)
- How to exercise to a greater extent than than 1 jQuery UI DatePicker inwards JSP page? (example)
- How to create tab-based UI using jQuery? (example)
- Top twenty jQuery Interview Questions for Java Web Developers (list)
- How to check/uncheck checkboxes inwards jQuery (solution)
- How to download jQuery dynamically inwards a spider web page? (solution)
0 Response to "5 ways to redirect a spider web page using JavaScript together with jQuery"
Posting Komentar