Як перенаправити на іншу веб-сторінку?
Як перенаправити користувача з однієї сторінки на іншу за допомогою jQuery або чистого JavaScript?
Один не просто перенаправляє за допомогою 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";
ПОПЕРЕДЖЕННЯ: Ця відповідь був просто надано в якості можливого рішення; це, очевидно, не найкраще рішення, тому що для цього потрібно jQuery. Замість цього віддавайте перевагу чисте рішення JavaScript.

1540
Стандартний "vanilla" JavaScript-спосіб перенаправлення сторінки:
window.location.href = 'newPage.html';
Якщо ви тут, тому що ви втрачаєте HTTP_REFERER при перенаправлення, продовжуйте читати:
Наступний розділ призначений для тих, хто використовує HTTP_REFERER
як одну з багатьох безпечних заходів (хоча це не є великою захисною мірою). Якщо ви використовуєте Internet Explorer 8 або нижче, ці змінні губляться при використанні будь-якої форми перенаправлення сторінки JavaScript (location.href і т.д.).
Нижче ми збираємося реалізувати альтернативу для IE8 і нижче, щоб ми не втратили HTTP_REFERER. В іншому випадку ви майже завжди можете просто використовувати
window.location.href
.
Тестування в порівнянні з HTTP_REFERER
(вставкою URL, сеансом і т.д.) може бути корисним при визначенні того, чи є запит законним. (Примітка: існують також способи обходу / обману цих реферерів, як зазначено в описі посилань з помилкою)
Просте рішення для крос-браузерного тестування (відкат до 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.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')
Це працює для кожного браузера:
window.location.href = 'your_url';
Це допомогло б, якби ви були трохи більш наочними в тому, що ви намагаєтеся зробити. Якщо ви намагаєтеся генерувати Вивантажувані дані, є деякі варіанти в тому, як ви це робите. Ви можете створювати окремі посилання для кожної сторінки, з якої ви хочете напряму зв'язатися.
<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 }); });
Я також думаю, що location.replace(URL)
- кращий спосіб, але якщо ви хочете повідомити пошукові системи про свій перенаправлення (вони не аналізують код JavaScript для перегляду перенаправлення), ви повинні додати rel="canonical"
meta тег на ваш сайт.
Додавання розділу 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 -->
tag to make it work properly<!-- 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 -->
referer<!-- 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 -->
to make the redirect as fast as possible<!-- 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 -->
Але якщо хтось хоче перенаправити на домашню сторінку, він може використовувати наступний фрагмент.
window.location = window.location.host
Було б корисно, якби у вас було три різних середовища: розробка, постановка і виробництво.
Ви можете вивчити це вікно або об'єкт window.location, просто розмістивши ці слова в консолі Chrome або Firebug .
JavaScript надає вам безліч методів для отримання і зміни поточного URL-адреси, що відображається в адресному рядку браузера. Всі ці методи використовують об'єкт Location, який є властивістю об'єкта Window. Ви можете створити новий об'єкт Location, що має поточний URL, в такий спосіб.
var currentLocation = window.location;
Основна структура URL
<protocol>//<hostname>:<port>/<pathname><search><hash>
2019
Повинно просто бути налаштоване за допомогою window.location
.
приклад:
window.location = "https://stackoverflow.com/";
Ось попередня стаття на цю тему:
По суті, jQuery - це просто інфраструктура JavaScript, і для виконання деяких речей, таких як перенаправлення в цьому випадку, ви можете просто використовувати чистий JavaScript, тому в цьому випадку у вас є 3 варіанти використання vanilla 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");
Також я показую їх все на зображенні нижче:
Перш ніж почати, jQuery - це бібліотека JavaScript, що використовується для маніпуляцій з DOM. Тому ви не повинні використовувати jQuery для перенаправлення сторінки.
Цитата з Jquery.com:
Хоча jQuery може працювати без серйозних проблем в старіших версіях браузера, ми не активно тестуємо jQuery в них і зазвичай не виправляємо помилки які можуть з'явитися в них.
Він був знайдений тут: https://jquery.com/browser-support/
Таким чином, jQuery - це не все-все-і-все-рішення для забезпечення сумісності.
Наступне рішення, що використовує raw 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"
with a new URLwindow.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"
redirects to the new URLwindow.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
<meta http-equiv="refresh" content="0;url=http://evil.com/" />
Місцезнаходження META
<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=en>
Ось весела маленька сторінка, яка викидає вас з сторінки.
<!DOCTYPE html> <html> <head> <title>Go Away</title> </head> <body> <h1>Go Away</h1> <script> setTimeout(function(){ window.history.back(); }, 3000); </script> </body> </html>
Якщо ви об'єднаєте два приклади сторінок разом, у вас буде петля для новонароджених, яка гарантує, що ваш користувач більше ніколи не захоче використовувати ваш сайт.
var url = 'asdf.html'; window.location.href = url;
Ви можете зробити це без jQuery як:
window.location = "http://yourdomain.com";
І якщо ви хочете тільки jQuery, тоді ви можете зробити це як:
$jq(window).attr("location","http://yourdomain.com");
Це працює з jQuery:
$(window).attr("location", "http://google.fr");
# Пересилання 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";
.
Отже, питання полягає в тому, як зробити сторінку перенаправлення, а не як перенаправити на веб-сайт?
Для цього вам потрібно використовувати 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
Edit:
Є також одне зауваження. Я додав window.location.replace
в свій код, тому що я думаю, що він підходить до сторінці перенаправлення, але ви повинні знати, що при використанні window.location.replace
і ви перенаправляє, коли ви натискаєте кнопку "Назад" у своєму браузері , вона буде не повернулася на сторінку переадресації, і вона повернеться на сторінку перед нею, погляньте на цю маленьку демонстраційну річ.
приклад:
Процес: зберегти додому => перенаправити сторінку в google => Google
Коли в google: google => кнопка повернення в браузері => зберегти додому
Отже, якщо це відповідає вашим потребам, тоді все повинно бути добре. Якщо ви хочете включити сторінку переадресації в історію браузера, замініть це
if( url ) window.location.replace(url);
з
if( url ) window.location.href = url;
Ви повинні помістити цей рядок в свій код:
$(location).attr("href","http://stackoverflow.com");
Якщо у вас немає jQuery, перейдіть на JavaScript за допомогою:
window.location.replace("http://stackoverflow.com"); window.location.href("http://stackoverflow.com");
У вашій функції клацання просто додайте:
window.location.href = "The URL where you want to redirect"; $('#id').click(function(){ window.location.href = "http://www.google.com"; });
***** ОРИГІНАЛЬНИЙ ПИТАННЯ БУВ - "ЯК ПЕРЕГЛЯНУТИ ВИКОРИСТАННЯ JQUERY", HENCE THE ANSWER IMPLEMENTS 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 go redirect window.location.href = "/contact/"; },500); });
Уявіть, що хтось написав сценарій / плагін, який містить 10000 рядків коду? Ну, з jQuery ви можете підключитися до цього коду тільки одним рядком або двома.
jQuery не потрібно. Ви можете зробити це:
window.open("URL","_self","","")
Це так просто!
Кращий спосіб ініціювати HTTP-запит - document.loacation.href.replace('URL')
.
Спочатку напишіть правильно. Ви хочете переміщатися всередині програми для іншої посилання з вашого додатки для іншої посилання. Ось код:
window.location.href = "http://www.google.com";
І якщо ви хочете переміщатися по сторінках в своєму додатку, тоді у мене також є код, якщо ви хочете.
Ви можете перенаправити в jQuery наступним чином:
$(location).attr('href', 'http://yourPage.com/');
ECMAScript 6 + jQuery, 85 байт
$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")
Будь ласка, не вбивайте мене, це жарт. Це жарт. Це жарт.
Це "забезпечило відповідь на питання" в тому сенсі, що він попросив рішення "з використанням jQuery", яке в цьому випадку тягне за собою примусове його вкладення в рівняння.
Ferrybig, мабуть, потребує пояснення жарти (як і раніше жартома, я впевнений, що в формі огляду є обмежені можливості), тому без подальших церемоній:
Другие ответы используют jQuery attr()
для объектов location
или window
без необходимости.
Этот ответ также злоупотребляет им, но более смешно. Вместо того, чтобы использовать его для установки местоположения, это использует attr()
для извлечения функции, которая устанавливает местоположение.
Эта функция называется jQueryCode
, хотя ничего нет jQuery, и вызов функции somethingCode
просто ужасен, особенно когда что-то не является даже языком.