REDIRECT ANOTHER PAGE USING JQUERY

When an HTTPhường. request for one page automatically goes lớn another page then it is called a redirection. The redirection of a web page is used for different reasons e.g. redirecting khổng lồ a different domain name e.g. when you move your trang web from one URL to another URL or redirecting lớn a more recent version of a page you are looking at it. There are many ways khổng lồ redirect a web page và different web technologies provide different ways e.g. Java provides sendRedirect() & forward() method for redirection. The redirection can also be divided into two categories, client side và VPS side. In client side, redirection client is responsible for routing request to lớn another URL but in server side redirection, its server"s job khổng lồ redirect to lớn a new page. The jQuery & JavaScript are mostly used for client side redirection and there are a number of ways to lớn redirect a website page using JavaScript In this tutorial, we"ll examine some of the most popular & comtháng ways lớn redirect a website page using JavaScript and jQuery.

How lớn redirect a website page using JavaScript

Before looking at the jQuery code, let"s first learn how to redirect a web page by using plain JavaScript. It provides several simple ways to lớn achieve sầu this task without loading an external JavaScript library lượt thích jQuery.

Redirection using window.location.href of Javascript

The most comtháng way to redirect an URL using JavaScript is just setting the href attribute of the window.location object. This simulates normal navigation khổng lồ a new page. I don"t think any task can be simpler than this, just assign a new URL. For example, if you are redirecting URL A lớn URL B then just put the URL B here as shown in the following example: window .location .href = "http://newURL.com" ; Tip: You should remember that window.location.href loads page from browser"s cabịt & does not always skết thúc the request to the server. So, if you have an old version of the page available in the cabịt then it will redirect to lớn there instead of loading a fresh page from the hệ thống.

Redirection using replace() function

Another way khổng lồ redirect to lớn a website page in jQuery is by using the replace() function of the window.location object. This method removes current URL from the history and replaces it with a new URL. Here is an example of how lớn use this function for redirection: window .location .replace ("url" ); Tip: Use the replace() method if you want to lớn want to lớn redirect to lớn a new page & don"t allow the user to navigate lớn the original page using the bachồng button.

Redirection using window assign() function

You can also use the window.location.assign() function to redirect a website page using JavaScript. This function adds new URL to the history staông xã & redirected to the new URL, which means, unlike replace() function you can use the baông chồng button lớn go baông chồng to lớn the original document. Here is how you can use this method lớn redirect lớn a new đường dẫn window .location .assign("url" ); Tip: Use the assign() method for redirection if you want to lớn allow the user to lớn use the bachồng button to lớn go baông xã lớn the original document.

Redirection using navigate function

This function is same as window.location="url" và it also loads the page from the cabịt instead of directly requesting it from the hệ thống. Here is an example khổng lồ use the navigate() function for redirection khổng lồ a new page window .navigate ("page.html" ); This code is similar khổng lồ the first method và the page will be loaded from the cabít if available instead of sending a new request khổng lồ the VPS.

How to lớn redirect website page using jQuery

The jQuery API also allows you to redirect a web page khổng lồ another URL in just one line of code. Though this is not the ideal way of using jQuery và but since we all use jQuery for different needs in a website project, it makes sense khổng lồ leverage it for whatever feature we can. You can use the attr() function of jQuery khổng lồ redirect a website page as shown below: var url = "http://google.com" ; $ (location).attr("href" ,url); There is a slight difference in using attr() vs window.location.href of JavaScript. The $(location).attr("href", url) will request a fresh page from VPS, while window.location.href loads pages from cache. Here is a complete web page which redirects to lớn another URL using jQuery: How to lớn redirect a webpage using jQuery

Redirecting lớn another URL ..

và here is the output of this web page when you run it on a website browser e.g. mạng internet explorer, chrome or edge:

Bạn đang xem: Redirect another page using jquery

You can see that page is redirecting, once the redirect will be complete, the URL và page title will also be replaced by the target URL.  See Head First jQuery to lớn learn more about jQuery và its powerful API.

How khổng lồ redirect khổng lồ the previous page

Another case of redirection is going khổng lồ the previous page, here are some of the comtháng way khổng lồ go to the previous page using JavaScript"s window object: window .history .baông chồng (); // Simulates a bachồng button cliông chồng window .history .go (- 1 ); // Simulates a back button cliông chồng window .history .baông xã (- 1 ); // Simulates a baông chồng button cliông chồng All three methods simulate a back button cliông xã programmatically. You can use any of the methods you want to lớn use. That"s all about how khổng lồ redirect a web request to lớn another web page using JavaScript and jQuery. As you have sầu seen there are multiple ways to lớn redirect but there is subtle differences between them e.g. $(location).attr("href", url) gọi of jQuery will open a fresh page from the hệ thống, but the Javascript window.location.href loads pages from cabít. Similarly, the window.location.assign(url) adds new URL to lớn the document history & redirected khổng lồ the new URL but window.location.replace("URL") removes current URL from history & replaces it with a new URL. Further Reading The Complete jQuery Course: From Beginner To Advanced! Up and Running with jQuery jQuery Fundamentals By Dan Wahlin Other jQuery tutorials you may like to explore

Xem thêm: Bí Quyết Mua Nhà Trả Góp Cực Hay Phải Học, Mua Nhà Trả Góp

5 Books khổng lồ learn jQuery for Web developers (books) How lớn get current URL, Parameters, & Hash using jQuery? (solution) How to lớn modify more than one element in one line? (example) jQuery Hello World Example (program) Free jQuery eBooks và PDFs (download) How khổng lồ use more than one jQuery UI DatePicker in JSPhường. page? (example) How to lớn create tab-based UI using jQuery? (example) Top 20 jQuery Interview Questions for Java Web Developers (list) How to lớn check/unkiểm tra checkboxes in jQuery (solution) How to tải về jQuery dynamically in a website page? (solution)
Thanks for reading this article. If you lượt thích this article then please cốt truyện with your friends và colleagues. If you have any question or feedbaông xã then please drop a bình luận.