Как мне перенаправить на другую веб-страницу?

Как я могу перенаправить пользователя с одной страницы на другую с помощью jQuery или чистого JavaScript?

Ответов (25)

Решение

Не просто перенаправить с помощью jQuery

jQuery не требуется и window.location.replace(...)лучше всего имитирует перенаправление HTTP.

window.location.replace(...) лучше, чем использование window.location.href, потому replace() что не сохраняет исходную страницу в истории сеанса, а это означает, что пользователь не застрянет в бесконечном фиаско с кнопкой возврата.

Если вы хотите имитировать, как кто-то нажимает на ссылку, используйте location.href

Если вы хотите имитировать перенаправление HTTP, используйте location.replace

Например:

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
var url = 'asdf.html';
window.location.href = url;

Вы можете сделать это без jQuery как:

window.location = "http://yourdomain.com";

И если вам нужен только jQuery, вы можете сделать это так:

$jq(window).attr("location","http://yourdomain.com");

Стандартный "ванильный" JavaScript способ перенаправления страницы

window.location.href = 'newPage.html';

Или проще: (поскольку windowэто Global)

location.href = 'newPage.html';

Если вы здесь, потому что теряете HTTP_REFERER при перенаправлении, продолжайте читать:

(В противном случае проигнорируйте эту последнюю часть)


Следующий раздел предназначен для тех, кто использует в HTTP_REFERER качестве одной из многих мер безопасности (хотя это не самая лучшая защитная мера). Если вы используете Internet Explorer 8 или более ранней версии, эти переменные теряются при использовании любой формы перенаправления страниц JavaScript (location.href и т. Д.).

Ниже мы собираемся реализовать альтернативу для IE8 и ниже, чтобы не потерять HTTP_REFERER. В противном случае вы почти всегда можете просто использовать window.location.href .

Проверка HTTP_REFERER (вставка URL, сеанс и т. Д.) Может помочь определить, является ли запрос законным. ( Примечание: есть также способы обойти / обманывать этих рефереров, как указано в ссылке droop в комментариях)


Простое решение для кросс-браузерного тестирования (возврат к window.location.href для Internet Explorer 9+ и всех других браузеров)

Использование: redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

Но если кто-то хочет перенаправить обратно на домашнюю страницу, он может использовать следующий фрагмент.

window.location = window.location.host

Было бы полезно, если у вас есть три разных среды: разработка, подготовка и производство.

Вы можете изучить этот объект window или window.location, просто введя эти слова в Chrome Console или Firebug Console.

jQuery не нужен. Ты можешь сделать это:

window.open("URL","_self","","")

Это так просто!

Наилучший способ инициировать HTTP-запрос - использовать document.loacation.href.replace('URL') .

Сначала напишите правильно. Вы хотите перейти в приложении по другой ссылке из вашего приложения по другой ссылке. Вот код:

window.location.href = "http://www.google.com";

И если вы хотите перемещаться по страницам в своем приложении, у меня также есть код, если хотите.

Это работает с jQuery:

$(window).attr("location", "http://google.fr");

Итак, вопрос в том, как сделать страницу перенаправления, а не как перенаправить на сайт?

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

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

Допустим, вы просто поместили этот фрагмент в redirect/index.html файл на своем веб-сайте и можете использовать его так.

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

И если вы перейдете по этой ссылке, она автоматически перенаправит вас на stackoverflow.com .

Ссылка на документацию

Вот как вы делаете простую страницу перенаправления с помощью JavaScript.

Редактировать:

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

Пример:

Процесс: сохранить главную => перенаправить страницу в гугл => гугл

Когда в Google: google => кнопка назад в браузере => магазин домой

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

if( url ) window.location.replace(url);

с участием

if( url ) window.location.href = url;

Попробуй это:

location.assign("http://www.google.com");

Фрагмент кода примера .

Есть много способов сделать это.

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com')
$(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

# Перенаправление HTML-страницы с использованием метода jQuery / JavaScript

Попробуйте этот пример кода:

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "Login.php";
    else
        window.location = "Logout.php";
}

Если вы хотите предоставить полный URL-адрес как window.location = "www.google.co.in";.

Вы можете перенаправить в jQuery так:

$(location).attr('href', 'http://yourPage.com/');

В функции щелчка просто добавьте:

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});

Исходный вопрос: «Как перенаправить с помощью jQuery?», Следовательно, ответ реализует jQuery >> Дополнительный вариант использования.


Чтобы просто перенаправить на страницу с JavaScript:

window.location.href = "/contact/";

Или, если вам нужна задержка:

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

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

$('a,img').on('click',function(e){
  e.preventDefault();
  $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

Представьте, что кто-то написал сценарий / плагин с 10000 строк кода. С помощью jQuery вы можете подключиться к этому коду, используя всего пару строк.

Я также считаю, что location.replace(URL) это лучший способ, но если вы хотите уведомить поисковые системы о своем перенаправлении (они не анализируют код JavaScript, чтобы увидеть перенаправление), вам следует добавить rel="canonical" метатег на свой сайт.

Добавление раздела noscript с метатегом обновления HTML в нем также является хорошим решением. Я предлагаю вам использовать этот инструмент перенаправления JavaScript для создания перенаправлений. Он также поддерживает Internet Explorer для передачи HTTP-реферера.

Пример кода без промедления выглядит так:

<!-- Place this snippet right after opening the head tag to make it work properly -->

<!-- This code is licensed under GNU GPL v3 -->
<!-- You are allowed to freely copy, distribute and use this code, but removing author credit is strictly prohibited -->
<!-- Generated by http://insider.zone/tools/client-side-url-redirect-generator/ -->

<!-- REDIRECTING STARTS -->
<link rel="canonical" href="https://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.com/";
    if(typeof IE_fix != "undefined") // IE8 and lower fix to pass the http referer
    {
        document.write("redirecting..."); // Don't remove this line or appendChild() will fail because it is called before document.onload to make the redirect as fast as possible. Nobody will see this text, it is only a tech fix.
        var referLink = document.createElement("a");
        referLink.href = url;
        document.body.appendChild(referLink);
        referLink.click();
    }
    else { window.location.replace(url); } // All other browsers
</script>
<!-- Credit goes to http://insider.zone/ -->
<!-- REDIRECTING ENDS -->

Вам нужно вставить эту строку в свой код:

$(location).attr("href","http://stackoverflow.com");

Если у вас нет jQuery, используйте JavaScript:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");

Используя JavaScript:

Способ 1:

window.location.href="http://google.com";

Способ 2:

window.location.replace("http://google.com");

Используя jQuery:

Метод 1: $ (местоположение)

$(location).attr('href', 'http://google.com');

Метод 2: функция многократного использования

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

Прежде чем я начну, jQuery - это библиотека JavaScript, используемая для управления DOM. Таким образом, вы не должны использовать jQuery для перенаправления страницы.

Цитата с Jquery.com:

Хотя jQuery может работать без серьезных проблем в старых версиях браузеров, мы не тестируем jQuery в них активно и, как правило, не исправляем ошибки, которые могут в них появиться.

Его нашли здесь: https://jquery.com/browser-support/

Таким образом, jQuery не является комплексным решением для обеспечения обратной совместимости.

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

Эта страница будет перенаправлена ​​в Google через 3000 миллисекунд.

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

Возможны следующие варианты:

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.history.back(); // Simulates a back button click
window.history.go(-1); // Simulates a back button click
window.history.back(-1); // Simulates a back button click
window.navigate("page.html"); // Same as window.location="url"

При использовании замены кнопка «Назад» не вернется на страницу перенаправления, как если бы ее никогда не было в истории. Если вы хотите, чтобы пользователь мог вернуться на страницу перенаправления, используйте window.location.href или window.location.assign . Если вы действительно используете опцию, которая позволяет пользователю вернуться на страницу перенаправления, помните, что когда вы входите на страницу перенаправления, она перенаправит вас обратно. Так что учитывайте это при выборе варианта перенаправления. В условиях, когда страница перенаправляется только тогда, когда пользователь выполняет какое-либо действие, тогда наличие страницы в истории кнопки «Назад» будет нормальным. Но если страница автоматически перенаправляется, вам следует использовать замену, чтобы пользователь мог использовать кнопку «Назад», не возвращаясь на страницу, которую отправляет перенаправление.

Вы также можете использовать метаданные для выполнения перенаправления страницы, как указано ниже.

МЕТА Обновить

<meta http-equiv="refresh" content="0;url=http://evil.com/" />

МЕТА Расположение

<meta http-equiv="location" content="URL=http://evil.com" />

BASE Hijacking

<base href="http://evil.com/" />

На этой странице можно найти множество других методов перенаправления ничего не подозревающего клиента на страницу, на которую он, возможно, не захочет заходить (ни один из них не зависит от jQuery):

https://code.google.com/p/html5security/wiki/RedirectionMethods

Я также хотел бы отметить, что люди не любят, когда их перенаправляют случайным образом. Перенаправляйте людей только тогда, когда это абсолютно необходимо. Если вы начнете перенаправлять людей случайным образом, они больше никогда не перейдут на ваш сайт.

Следующий абзац гипотетический:

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

Ознакомьтесь с рекомендациями Google для веб-мастеров о переадресации: https://support.google.com/webmasters/answer/2721217?hl=ru&ref_topic=6001971.

Вот забавная маленькая страничка, которая выталкивает вас со страницы.

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

Если вы объедините два примера страниц вместе, у вас будет младший цикл перенаправления, который будет гарантировать, что ваш пользователь никогда больше не захочет использовать ваш сайт.

JavaScript предоставляет вам множество методов для получения и изменения текущего URL-адреса, отображаемого в адресной строке браузера. Все эти методы используют объект Location, который является свойством объекта Window. Вы можете создать новый объект Location с текущим URL-адресом следующим образом.

var currentLocation = window.location;

Базовая структура URL

<protocol>//<hostname>:<port>/<pathname><search><hash>

введите описание изображения здесь

  1. Протокол - указывает имя протокола, которое будет использоваться для доступа к ресурсу в Интернете. (HTTP (без SSL) или HTTPS (с SSL))

  2. hostname - Имя хоста указывает хост, которому принадлежит ресурс. Например, www.stackoverflow.com. Сервер предоставляет услуги, используя имя хоста.

  3. порт - номер порта, используемый для распознавания определенного процесса, которому должно быть перенаправлено Интернет-сообщение или другое сетевое сообщение, когда оно поступает на сервер.

  4. pathname - путь дает информацию о конкретном ресурсе на хосте, к которому веб-клиент хочет получить доступ. Например, stackoverflow.com/index.html.

  5. query - строка запроса следует за компонентом пути и предоставляет строку информации, которую ресурс может использовать для некоторых целей (например, в качестве параметров для поиска или данных для обработки).

  6. hash - Якорная часть URL-адреса, включает знак решетки (#).

С помощью этих свойств объекта Location вы можете получить доступ ко всем этим компонентам URL.

  1. hash - устанавливает или возвращает якорную часть URL-адреса.
  2. host -Устанавливает или возвращает имя хоста и порт URL-адреса.
  3. hostname -Устанавливает или возвращает имя хоста URL-адреса.
  4. href -Устанавливает или возвращает весь URL-адрес.
  5. pathname - устанавливает или возвращает полное имя URL-адреса.
  6. порт -Устанавливает или возвращает номер порта, который сервер использует для URL-адреса.
  7. протокол - устанавливает или возвращает протокол URL-адреса.
  8. search - устанавливает или возвращает часть запроса URL-адреса

Теперь, если вы хотите изменить страницу или перенаправить пользователя на другую страницу, вы можете использовать href свойство объекта Location следующим образом

Вы можете использовать свойство href объекта Location.

window.location.href = "http://www.stackoverflow.com";

Объект местоположения также имеет эти три метода

  1. assign () - загружает новый документ.
  2. reload () - перезагружает текущий документ.
  3. replace () - заменяет текущий документ новым

Вы можете использовать методы assign () и replace также для перенаправления на другие страницы, подобные этим

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

Чем отличаются assign () и replace () - разница между методом replace () и методом assign () () заключается в том, что replace () удаляет URL-адрес текущего документа из истории документа, что означает, что использование невозможно. кнопку «назад», чтобы вернуться к исходному документу. Поэтому используйте метод assign (), если вы хотите загрузить новый документ и хотите предоставить возможность вернуться к исходному документу.

Вы можете изменить свойство href объекта местоположения, используя jQuery, также как это

$(location).attr('href',url);

И, следовательно, вы можете перенаправить пользователя на другой URL-адрес.

По сути, jQuery - это просто фреймворк JavaScript, и для выполнения некоторых вещей, таких как перенаправление в этом случае, вы можете просто использовать чистый JavaScript, поэтому в этом случае у вас есть 3 варианта использования ванильного JavaScript:

1) Определение местоположения с помощью замены , это заменит текущую историю страницы, означает , что это не представляется возможным использовать заднюю кнопку , чтобы вернуться к исходной странице.

window.location.replace("http://stackoverflow.com");

2) Используя назначение местоположения , вы сохраните историю, а с помощью кнопки «Назад» вы сможете вернуться на исходную страницу:

window.location.assign("http://stackoverflow.com");

3) Я рекомендую использовать один из этих предыдущих способов, но это может быть третий вариант с использованием чистого JavaScript:

window.location.href="http://stackoverflow.com";

Вы также можете написать функцию в jQuery для ее обработки, но не рекомендуется, так как это только одна строка чистой функции JavaScript, также вы можете использовать все вышеперечисленные функции без окна, если вы уже находитесь в области окна, например, window.location.replace("http://stackoverflow.com"); может быть location.replace("http://stackoverflow.com");

Также я показываю их все на изображении ниже:

location.replace location.assign

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

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

Обратите внимание, что текущая страница в примере обрабатывается по-разному в коде и с помощью CSS.

Если вы хотите, чтобы выгружаемые данные изменялись через AJAX, здесь может пригодиться jQuery. Вам нужно добавить обработчик кликов к каждому из тегов привязки, соответствующих другой странице. Этот обработчик кликов вызовет некоторый код jQuery, который переходит и выбирает следующую страницу через AJAX и обновляет таблицу новыми данными. В приведенном ниже примере предполагается, что у вас есть веб-служба, которая возвращает данные новой страницы.

$(document).ready( function() {
    $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1];
        $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

ВНИМАНИЕ: этот ответ был предоставлен только как возможное решение; Очевидно, это не лучшее решение, так как для этого требуется jQuery. Вместо этого предпочтите решение на чистом JavaScript.

$(location).attr('href', 'http://stackoverflow.com')

Это работает для любого браузера:

window.location.href = 'your_url';

Должен просто быть в состоянии установить using window.location .

Пример:

window.location = "https://stackoverflow.com/";

Вот предыдущая публикация на эту тему: Как мне перенаправить на другую веб-страницу?