Hoe kan ik de gebruiker van de ene pagina naar de andere omleiden met jQuery of pure JavaScript?
Antwoord 1, autoriteit 100%
Men leidt niet zomaar om met jQuery
jQuery is niet nodig, en window.location.replace(...) simuleert het beste een HTTP-omleiding.
window.location.replace(...) is beter dan het gebruik van window.location.href, omdat replace() dat niet doet bewaar de oorspronkelijke pagina in de sessiegeschiedenis, wat betekent dat de gebruiker niet vast komt te zitten in een nooit eindigend fiasco met terugknop.
Als u wilt simuleren dat iemand op een link klikt, gebruikt u
location.href
Als u een HTTP-omleiding wilt simuleren, gebruikt u location.replace
Bijvoorbeeld:
// 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";
Antwoord 2, autoriteit 11%
WAARSCHUWING: dit antwoord is slechts gegeven als mogelijke oplossing; het is duidelijk niet de beste oplossing, omdat het jQuery vereist. Geef in plaats daarvan de voorkeur aan de pure JavaScript-oplossing.
$(location).attr('href', 'http://stackoverflow.com')
Antwoord 3, autoriteit 5%
Standaard "vanille" JavaScript-manier om een pagina om te leiden
window.location.href = 'newPage.html';
Of eenvoudiger: (aangezien window Globaal is)
location.href = 'newPage.html';
Als je hier bent omdat je HTTP_REFERER verliest bij het omleiden, lees dan verder:
(Negeer dit laatste deel anders)
Het volgende gedeelte is bedoeld voor degenen die HTTP_REFERER gebruiken als een van de vele beveiligingsmaatregelen (hoewel het geen geweldige beveiligingsmaatregel is). Als u Internet Explorer 8 of lager gebruikt, gaan deze variabelen verloren wanneer u een formulier gebruikt van JavaScript-paginaomleiding (location.href, enz.).
Hieronder gaan we een alternatief implementeren voor IE8 & lager zodat we HTTP_REFERER niet verliezen. Anders kun je bijna altijd gewoon window.location.href gebruiken.
Testen tegen HTTP_REFERER (URL plakken, sessie, etc.) kan helpen bepalen of een verzoek legitiem is.
(Opmerking: er zijn ook manieren om deze verwijzers te omzeilen / te spoofen, zoals aangegeven door de link van droop in de opmerkingen)
Eenvoudige testoplossing voor meerdere browsers (terugval op window.location.href voor Internet Explorer 9+ en alle andere browsers)
Gebruik: 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;
}
}
Antwoord 4, autoriteit 3%
Er zijn veel manieren om dit te doen.
// 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')
Antwoord 5, autoriteit 2%
Dit werkt voor elke browser:
window.location.href = 'your_url';
Antwoord 6, autoriteit 2%
Het zou helpen als je wat meer beschrijvend was in wat je probeert te doen. Als u gewisselde gegevens probeert te genereren, zijn er enkele opties om dit te doen. U kunt afzonderlijke links genereren voor elke pagina waar u direct naartoe wilt.
<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>
...
Houd er rekening mee dat de huidige pagina in het voorbeeld anders wordt behandeld in de code en met CSS.
Als u wilt dat de paginagegevens worden gewijzigd via AJAX, is dit waar jQuery van pas komt. Wat u zou doen, is een klikhandler toevoegen aan elk van de ankertags die overeenkomen met een andere pagina. Deze klikhandler zou een jQuery-code aanroepen die de volgende pagina via AJAX ophaalt en de tabel bijwerkt met de nieuwe gegevens. In het onderstaande voorbeeld wordt ervan uitgegaan dat u een webservice heeft die de nieuwe paginagegevens retourneert.
$(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
});
});
Antwoord 7, autoriteit 2%
Ik denk ook dat location.replace(URL) de beste manier is, maar als je de zoekmachines wilt informeren over je omleiding (ze analyseren de JavaScript-code niet om de omleiding te zien) je moet de rel="canonical" metatag aan je website toevoegen.
Het toevoegen van een noscript sectie met een HTML refresh meta tag erin, is ook een goede oplossing. Ik raad je aan om deze JavaScript te gebruiken omleidingstool om omleidingen te maken. Het heeft ook Internet Explorer-ondersteuning om de HTTP-verwijzer door te geven.
Voorbeeldcode zonder vertraging ziet er als volgt uit:
<!-- 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 -->
Antwoord 8, autoriteit 2%
Maar als iemand wil terugverwijzen naar de startpagina, kan hij het volgende fragment gebruiken.
window.location = window.location.host
Het zou handig zijn als je drie verschillende omgevingen hebt als ontwikkeling, staging en productie.
Je kunt dit window of window.location-object verkennen door deze woorden in Chrome Console of Firebug‘s console.
Antwoord 9
JavaScript biedt u vele methoden om de huidige URL die in de adresbalk van de browser wordt weergegeven, op te halen en te wijzigen. Al deze methoden gebruiken het object Location, dat een eigenschap is van het object Window. U kunt als volgt een nieuw locatie-object maken dat de huidige URL heeft..
var currentLocation = window.location;
Basisstructuur van een URL
<protocol>//<hostname>:<port>/<pathname><search><hash>
-
Protocol — Specificeert de protocolnaam die moet worden gebruikt om toegang te krijgen tot de bron op internet. (HTTP (zonder SSL) of HTTPS (met SSL))
-
hostnaam — Hostnaam specificeert de host die eigenaar is van de resource. Bijvoorbeeld www.stackoverflow.com. Een server levert diensten met behulp van de naam van de host.
-
poort — Een poortnummer dat wordt gebruikt om een specifiek proces te herkennen waarnaar een internet- of ander netwerkbericht moet worden doorgestuurd wanneer het op een server aankomt.
-
padnaam — Het pad geeft informatie over de specifieke bron binnen de host waartoe de webclient toegang wil. Bijvoorbeeld stackoverflow.com/index.html.
-
query — Een queryreeks volgt de padcomponent en levert een reeks informatie die de bron voor een bepaald doel kan gebruiken (bijvoorbeeld als parameters voor een zoekopdracht of als gegevens die moeten worden verwerkt).
-
hash — Het ankergedeelte van een URL, inclusief het hekje (#).
Met deze locatie-objecteigenschappen heeft u toegang tot al deze URL-componenten
- hash – Stelt het ankergedeelte van een URL in of retourneert.
- host -Sets
of retourneert de hostnaam en poort van een URL. - hostnaam -Sets of
retourneert de hostnaam van een URL. - href – Stelt of retourneert de gehele
URL. - padnaam – Stelt de padnaam van een URL in of geeft deze terug.
- poort – Stelt of retourneert het poortnummer dat de server gebruikt voor een URL.
- protocol -Stelt het protocol van een URL in of retourneert.
- zoeken -Sets
of retourneert het zoekgedeelte van een URL
Als u nu een pagina wilt wijzigen of de gebruiker naar een andere pagina wilt omleiden, kunt u de eigenschap href van het Location-object op deze manier gebruiken
U kunt de eigenschap href van het object Location gebruiken.
window.location.href = "http://www.stackoverflow.com";
Locatie-object heeft ook deze drie methoden
- assign() — Laadt een nieuw document.
- reload() — Laadt het huidige document opnieuw.
- replace() — Vervangt het huidige document door een nieuwe
U kunt de methoden assign() en vervangen ook gebruiken om door te verwijzen naar andere pagina’s zoals deze
location.assign("http://www.stackoverflow.com");
location.replace("http://www.stackoverflow.com");
Hoe assign() en Replace() verschillen — Het verschil tussen de Replace()-methode en de assign()-methode(), is dat Replace() de URL van de huidige document uit de documentgeschiedenis, betekent dat het niet mogelijk is om de “terug”-knop te gebruiken om terug te navigeren naar het originele document. Gebruik dus de methode assign() als u een nieuw document wilt laden en de mogelijkheid wilt geven om terug te gaan naar het originele document.
U kunt de href-eigenschap van het locatie-object wijzigen met jQuery en ook op deze manier
$(location).attr('href',url);
En daarom kunt u de gebruiker omleiden naar een andere url.
Antwoord 10
In feite is jQuery slechts een JavaScript-framework en voor sommige dingen zoals omleiding in dit geval, kun je gewoon puur JavaScript gebruiken , dus in dat geval heb je 3 opties met vanilla JavaScript:
1) Door locatie vervangen te gebruiken, wordt de huidige geschiedenis van de pagina vervangen, wat betekent dat het niet mogelijk is om de knop terug te gebruiken om terug te gaan naar het origineel pagina.
window.location.replace("http://stackoverflow.com");
2) Door locatie toewijzen te gebruiken, wordt de geschiedenis voor u bewaard en met de terug-knop kunt u teruggaan naar de oorspronkelijke pagina:
window.location.assign("http://stackoverflow.com");
3) Ik raad aan om een van die vorige manieren te gebruiken, maar dit kan de derde optie zijn met pure JavaScript:
window.location.href="http://stackoverflow.com";
Je kunt ook een functie in jQuery schrijven om het af te handelen, maar dit wordt niet aanbevolen omdat het maar één regel pure JavaScript-functie is, je kunt ook alle bovenstaande functies zonder venster gebruiken als je al in het bereik van het venster zit, bijvoorbeeld window.location.replace("http://stackoverflow.com"); kan location.replace("http://stackoverflow.com");
zijn
Ik laat ze ook allemaal zien op de afbeelding hieronder:
Antwoord 11
Moet gewoon kunnen instellen met window.location.
Voorbeeld:
window.location = "https://stackoverflow.com/";
Hier is een eerdere post over dit onderwerp: Hoe stuur ik om naar een andere webpagina?
Antwoord 12
Voordat ik begin, is jQuery een JavaScript-bibliotheek die wordt gebruikt voor DOM-manipulatie. Je zou jQuery dus niet moeten gebruiken voor het omleiden van een pagina.
Een citaat van Jquery.com:
Hoewel jQuery zonder grote problemen zou kunnen werken in oudere browserversies,
we testen jQuery er niet actief in en repareren over het algemeen geen bugs
die erin kan voorkomen.
Het is hier gevonden:
https://jquery.com/browser-support/
JQuery is dus niet de ultieme oplossing voor achterwaartse compatibiliteit.
De volgende oplossing met onbewerkte JavaScript werkt in alle browsers en is al lange tijd standaard, dus u hebt geen bibliotheken nodig voor ondersteuning voor meerdere browsers.
Deze pagina wordt na 3000 milliseconden omgeleid naar Google
<!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>
Verschillende opties zijn als volgt:
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"
Als u vervang gebruikt, gaat de terug-knop niet terug naar de omleidingspagina, alsof deze nooit in de geschiedenis heeft gestaan. Als je wilt dat de gebruiker terug kan gaan naar de omleidingspagina, gebruik dan window.location.href of window.location.assign. Als u een optie gebruikt waarmee de gebruiker terug kan gaan naar de omleidingspagina, onthoud dan dat wanneer u de omleidingspagina opent, deze u terug zal omleiden. Houd daar dus rekening mee bij het kiezen van een optie voor uw omleiding. Onder omstandigheden waarbij de pagina alleen wordt omgeleid wanneer een actie door de gebruiker wordt uitgevoerd, is het oké om de pagina in de geschiedenis van de terugknop te hebben. Maar als de pagina automatisch omleidt, moet u vervangen gebruiken, zodat de gebruiker de terug-knop kan gebruiken zonder gedwongen terug te gaan naar de pagina die de omleiding verzendt.
U kunt als volgt ook metagegevens gebruiken om een paginaomleiding uit te voeren.
META vernieuwen
<meta http-equiv="refresh" content="0;url=http://evil.com/" />
META-locatie
<meta http-equiv="location" content="URL=http://evil.com" />
BASE-kaping
<base href="http://evil.com/" />
Veel meer methoden om uw nietsvermoedende klant om te leiden naar een pagina die ze misschien niet willen bezoeken, zijn te vinden op deze pagina (geen van hen is afhankelijk van jQuery):
https://code.google.com/p/html5security/wiki/RedirectionMethods
Ik wil er ook op wijzen dat mensen er niet van houden om willekeurig doorverwezen te worden. Stuur mensen alleen door als dat echt nodig is. Als je mensen willekeurig omleidt, zullen ze nooit meer naar je site gaan.
De volgende alinea is hypothetisch:
Het kan ook zijn dat u wordt gerapporteerd als een kwaadaardige site. Als dat gebeurt, kan de browser van de gebruiker hen waarschuwen dat uw site kwaadaardig is wanneer mensen op een link naar uw site klikken. Wat ook kan gebeuren, is dat zoekmachines uw beoordeling kunnen verlagen als mensen een slechte ervaring op uw site melden.
Lees de richtlijnen voor webmasters van Google over omleidingen:
https://support.google.com/webmasters/answer/2721217 ?hl=nl&ref_topic=6001971
Hier is een leuke kleine pagina die je van de pagina gooit.
<!DOCTYPE html>
<html>
<head>
<title>Go Away</title>
</head>
<body>
<h1>Go Away</h1>
<script>
setTimeout(function(){
window.history.back();
}, 3000);
</script>
</body>
</html>
Als u de twee paginavoorbeelden combineert, krijgt u een kleine omleidingslus die garandeert dat uw gebruiker uw site nooit meer zal willen gebruiken.
Antwoord 13
var url = 'asdf.html';
window.location.href = url;
Antwoord 14
Je kunt dat doen zonder jQuery als:
window.location = "http://yourdomain.com";
En als u alleen jQuery wilt, kunt u het als volgt doen:
$jq(window).attr("location","http://yourdomain.com");
Antwoord 15
Dit werkt met jQuery:
$(window).attr("location", "http://google.fr");
Antwoord 16
# HTML-paginaomleiding met de jQuery/JavaScript-methode
Probeer deze voorbeeldcode:
function YourJavaScriptFunction()
{
var i = $('#login').val();
if (i == 'login')
window.location = "Login.php";
else
window.location = "Logout.php";
}
Als u een volledige URL wilt opgeven als window.location = "www.google.co.in";.
Antwoord 17
Oorspronkelijke vraag: “Hoe omleiden met jQuery?”, vandaar dat het antwoord jQuery >> Gratis gebruiksvoorbeeld implementeert.
Om gewoon om te leiden naar een pagina met JavaScript:
window.location.href = "/contact/";
Of als u een vertraging nodig heeft:
setTimeout(function () {
window.location.href = "/contact/";
}, 2000); // Time in milliseconds
jQuery stelt u in staat om gemakkelijk elementen van een webpagina te selecteren. U kunt op een pagina alles vinden wat u maar wilt en vervolgens jQuery gebruiken om speciale effecten toe te voegen, te reageren op gebruikersacties of inhoud binnen of buiten het geselecteerde element te tonen en te verbergen. Al deze taken beginnen met het weten hoe een element of een evenement te selecteren .
$('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);
});
Stel je voor dat iemand een script/plug-in heeft geschreven met 10.000 regels code. Met jQuery kunt u met slechts een paar regels verbinding maken met deze code.
Antwoord 18
U moet deze regel in uw code plaatsen:
$(location).attr("href","http://stackoverflow.com");
Als je geen jQuery hebt, gebruik dan JavaScript:
window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
Antwoord 19
Dus de vraag is hoe je een omleidingspagina maakt en niet hoe je omleidt naar een website?
U hoeft hiervoor alleen JavaScript te gebruiken. Hier is een kleine code die een dynamische omleidingspagina zal maken.
<script>
var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
if( url ) window.location.replace(url);
</script>
Stel dat je dit fragment gewoon in een redirect/index.html-bestand op je website plaatst, dan kun je het zo gebruiken.
http://www.mywebsite.com/redirect?url=http://stackoverflow.com
En als u naar die link gaat, wordt u automatisch doorgestuurd naar stackoverflow.com.
En zo maak je een Eenvoudige omleidingspagina met JavaScript
Bewerken:
Er is ook één ding om op te merken. Ik heb window.location.replace in mijn code toegevoegd omdat ik denk dat het past bij een omleidingspagina, maar je moet weten dat wanneer je window.location.replace gebruikt en je krijgt doorverwezen, wanneer u op de terug-knop in uw browser drukt, keert het niet terug naar de omleidingspagina en gaat het terug naar de pagina ervoor, kijk eens naar dit kleine demo-ding.
Voorbeeld:
Het proces: home store => pagina omleiden naar google => google
Wanneer bij google: google => terug-knop in browser => winkel thuis
Dus als dit aan uw behoeften voldoet, zou alles in orde moeten zijn. Als u de omleidingspagina in de browsergeschiedenis wilt opnemen, vervangt u deze
if( url ) window.location.replace(url);
met
if( url ) window.location.href = url;
Antwoord 20
Voeg gewoon toe aan uw klikfunctie:
window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
window.location.href = "http://www.google.com";
});
Antwoord 21
Probeer dit:
location.assign("http://www.google.com");
Antwoord 22
jQuery is niet nodig. U kunt dit doen:
window.open("URL","_self","","")
Zo eenvoudig is het!
De beste manier om een HTTP-verzoek te starten is met document.loacation.href.replace('URL').
Antwoord 23
Schrijf eerst goed. U wilt binnen een applicatie navigeren naar een andere link vanuit uw applicatie naar een andere link. Hier is de code:
window.location.href = "http://www.google.com";
En als je door pagina’s binnen je applicatie wilt navigeren, heb ik ook code, als je wilt.
Antwoord 24
Je kunt in jQuery als volgt omleiden:
$(location).attr('href', 'http://yourPage.com/');
Antwoord 25
JavaScript gebruiken:
Methode 1:
window.location.href="http://google.com";
Methode 2:
window.location.replace("http://google.com");
JQuery gebruiken:
Methode 1: $(locatie)
$(location).attr('href', 'http://google.com');
Methode 2: Herbruikbare functie
jQuery.fn.redirectTo = function(url){
window.location.href = url;
}
jQuery(window).redirectTo("http://google.com");
Antwoord 26
In JavaScript en jQuery kunnen we de volgende code gebruiken om de ene pagina om te leiden naar een andere pagina:
window.location.href="http://google.com";
window.location.replace("page1.html");
Antwoord 27
ECMAScript 6 + jQuery, 85 bytes
$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")
Dood me alsjeblieft niet, dit is een grap. Het is een grap. Dit is een grap.
Dit gaf “een antwoord op de vraag”, in de zin dat het om een oplossing vroeg “met behulp van jQuery”, wat in dit geval inhoudt dat het op de een of andere manier in de vergelijking wordt gedwongen.
Ferrybig moet blijkbaar de grap uitleggen (nog steeds een grapje, ik weet zeker dat er beperkte opties zijn op het beoordelingsformulier), dus zonder verder oponthoud:
Andere antwoorden gebruiken jQuery’s attr() onnodig op de location of window objecten.
Dit antwoord misbruikt het ook, maar op een meer belachelijke manier. In plaats van het te gebruiken om de locatie in te stellen, gebruikt dit attr() om een functie op te halen die de locatie instelt.
De functie heet jQueryCode hoewel er niets jQuery aan is, en het aanroepen van een functie somethingCode is gewoon verschrikkelijk, vooral als het iets niet eens een taal is.
De “85 bytes” is een verwijzing naar Code Golf. Golfen is duidelijk niet iets wat je buiten codegolf moet doen, en bovendien is dit antwoord duidelijk niet echt golfen.
Eigenlijk ineenkrimpen.
Antwoord 28
Javascript:
window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');
Jquery:
var url='www.your_url.com';
$(location).attr('href',url);
$(location).prop('href',url);//instead of location you can use window
Antwoord 29
Hier is een omleiding met vertraging. U kunt de vertragingstijd instellen op wat u maar wilt:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Document Title</title>
<script type="text/javascript">
function delayer(delay) {
onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
}
</script>
</head>
<body>
<script>
delayer(8000)
</script>
<div>You will be redirected in 8 seconds!</div>
</body>
</html>
Antwoord 30
Er zijn drie manieren om dit te doen,
window.location.href='blaah.com';
window.location.assign('blaah.com');
en…
window.location.replace('blaah.com');
De laatste is het beste voor een traditionele omleiding, omdat het de pagina waarnaar u ging voordat u werd omgeleid, niet wordt opgeslagen in uw zoekgeschiedenis. Als u echter alleen een tabblad met JavaScript wilt openen, kunt u een van de bovenstaande opties gebruiken. 1
EDIT: Het voorvoegsel window is optioneel.