Перенаправление на другую страницу с помощью javascript

Menus

Icon BarMenu IconAccordionTabsVertical TabsTab HeadersFull Page TabsHover TabsTop NavigationResponsive TopnavNavbar with IconsSearch MenuSearch BarFixed SidebarSide NavigationResponsive SidebarFullscreen NavigationOff-Canvas MenuHover Sidenav ButtonsSidebar with IconsHorizontal Scroll MenuVertical MenuBottom NavigationResponsive Bottom NavBottom Border Nav LinksRight Aligned Menu LinksCentered Menu LinkEqual Width Menu LinksFixed MenuSlide Down Bar on ScrollHide Navbar on ScrollShrink Navbar on ScrollSticky NavbarNavbar on ImageHover DropdownsClick DropdownsDropdown in TopnavDropdown in SidenavResp Navbar DropdownSubnavigation MenuDropupMega MenuMobile MenuCurtain MenuCollapsed SidebarCollapsed SidepanelPaginationBreadcrumbsButton GroupVertical Button GroupSticky Social BarPill NavigationResponsive Header

Redirect a Webpage

There are a couple of ways to redirect to another webpage with JavaScript. The most popular ones are and :

Example

// Simulate
a mouse click:window.location.href = «http://www.w3schools.com»;// Simulate an HTTP redirect:window.location.replace(«http://www.w3schools.com»);

Note: The difference between href and replace, is that removes the URL of the current document from the document history, meaning that it is not possible to use the «back» button to navigate back to the original document.

Tip: For more information about the Location Object, read our Location Object Reference.

Что такое redirect и с какой целью он было создан?

В переводе с английского redirect означает «перенаправлять, переадресовывать». И правда, с помощью redirect-а происходит автоматическое перенаправление пользователей на другие страницы веб-ресурсов по заранее заданному анкору (ссылке).

Каждый из вас хоть раз сталкивался с такими ситуациями, когда заходишь на один сайт, а он перенаправляет тебя на ту же страницу, только расположенную по новой ссылке. Также случаются и перенаправления пользователей на другие страницы или рекламу. Все это реализовано при помощи редиректов.

Благодаря такому механизму можно гибко управлять переадресацией: устанавливать переход на новые страницы с задержкой, в случае изменения домена перенаправлять пользователя на новый адрес по url без дополнительных действий последнего, открывать страницы в новой вкладке, организовывать redirect back при неудачной перессылке и т.д.

За такие действия в JavaScript отвечает объект document.location. На самом деле этот объект обладает рядом свойств, которые нужны для получения полной информации о веб-странице (page).

На данный момент я расскажу об одном свойстве, которое используется для перенаправления страниц – href. Если же есть желание углубить знания, то поищите информацию в документации.

JavaScript Redirect Methods

You can redirect a web page via JavaScript using a number of methods. We will quickly list them and conclude with the recommended one.

In JavaScript, window.location or simply location object is used to get information about the location of the current web page (document) and also to modify it. The following is a list of possible ways that can be used as a JavaScript redirect:

// Sets the new location of the current window.
window.location = "https://www.example.com";

// Sets the new href (URL) for the current window.
window.location.href = "https://www.example.com";

// Assigns a new URL to the current window.
window.location.assign("https://www.example.com");

// Replaces the location of the current window with the new one.
window.location.replace("https://www.example.com");

// Sets the location of the current window itself.
self.location = "https://www.example.com";

// Sets the location of the topmost window of the current window.
top.location = "https://www.example.com";

Though the above lines of JS code accomplish a similar job in terms of redirection, they have slight differences in their usage. For example, if you use top.location redirect within an iframe, it will force the main window to be redirected. Another point to keep in mind is that location.replace() replaces the current document by moving it from the history, hence making it unavailable via the Back button of the browser.

It is better to know your alternatives but if you want a cross-browser compliant JavaScript redirect script, our recommendation will be to use the following in your projects:

window.location.href = "https://www.example.com";

Simply insert your target URL that you want to redirect to in the above code. You can also check this page to read more about how window.location works. Now, let’s continue with our examples.

JavaScript Redirect: Redirect the Page After an Event or User Action

Sometimes, you may want to send the user to another page after a certain event or action takes place, such as a button click, an option selection, a layout change, a form submission, a file upload, an image drag, a countdown timer expiration or things like that. In such cases, you can either use a condition check or assign an event to an element for performing the redirect. You can use the following two examples to give you a basic idea:

<script>
// Check if the condition is true and then redirect.
if ( ... ) {
  window.location.href = "https://www.example.com";
}
</script>

The above code will do the redirection if the condition is true.

<script>
// onclick event is assigned to the #button element.
document.getElementById("button").onclick = function() {
  window.location.href = "https://www.example.com";
};
</script>

The above code will do the redirection when the user clicks the #button element.

This is how JavaScript redirect basically works. We hope that the above examples will help you while handling your web page redirects.