Vraag Hoe kan ik doorsturen naar een andere webpagina?


Hoe kan ik de gebruiker van de ene naar de andere pagina omleiden met jQuery of pure JavaScript?


7738
2018-02-02 12:54


oorsprong


antwoorden:


Men leidt niet eenvoudigweg om met behulp van jQuery

jQuery is niet noodzakelijk, en window.location.replace(...) best een HTTP-omleiding simuleren.

window.location.replace(...) is beter dan gebruiken window.location.href, omdat replace() bewaart de oorspronkelijke pagina niet in de sessiegeschiedenis, wat betekent dat de gebruiker niet vast komt te zitten in een nooit eindigend back-button fiasco.

Als u iemand wilt simuleren die op een koppeling klikt, gebruik dan    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";

12915
2018-02-03 04:24



WAARSCHUWING: Dit antwoord is slechts als een mogelijke oplossing verstrekt; het is duidelijk niet de beste oplossing omdat het jQuery vereist. Geef liever de pure JavaScript-oplossing.

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

1472
2017-10-28 16:35



Standaard "vanilla" JavaScript-manier om een ​​pagina om te leiden:

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


Als je hier bent omdat je dat bent verliezen HTTP_REFERER bij het omleiden, blijf lezen:


Het volgende gedeelte is voor degenen die het gebruiken HTTP_REFERER als een van de vele veilige maatregelen (hoewel het geen grote beschermende maatregel is). Als je gebruikt Internet Explorer 8 of lager, deze variabelen raken verloren bij het gebruik van elke vorm van omleiding van JavaScript-pagina's (location.href, etc.).

Hieronder gaan we een alternatief implementeren voor IE8 & lager zodat we HTTP_REFERER niet verliezen. Anders kun je bijna altijd gewoon gebruiken window.location.href.

Testen tegen HTTP_REFERER (URL-plakken, sessie, etc.) kan nuttig zijn om te vertellen of een verzoek legitiem is. (Notitie: er zijn ook manieren om deze verwijzers te omzeilen / spoofen, zoals opgemerkt door de hangop-link in de reacties)


Eenvoudige oplossing voor cross-browser testen (fallback to 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; 
    }
}

508
2017-07-27 14:41



Gebruik:

// 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')

349
2018-01-28 04:28



Dit werkt voor elke browser:

window.location.href = 'your_url';

269
2017-10-22 23:45



Het zou helpen als je een beetje meer beschrijvend zou zijn in wat je probeert te doen. Als u paged data probeert te genereren, zijn er enkele opties in hoe u dit doet. U kunt afzonderlijke links genereren voor elke pagina waarnaar u direct wilt kunnen gaan.

<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>
...

Merk op dat de huidige pagina in het voorbeeld anders wordt behandeld in de code en met CSS.

Als u wilt dat de wisselgegevens worden gewijzigd via AJAX, zou jQuery hier binnenkomen. Wat u zou doen is een klikhandler toevoegen aan elk van de ankertags die overeenkomen met een andere pagina. Deze klik-handler zou een aantal jQuery-code oproepen die gaat en de volgende pagina ophaalt via AJAX en de tabel met de nieuwe gegevens bijwerkt. In het onderstaande voorbeeld wordt ervan uitgegaan dat u een webservice hebt die de nieuwe paginadata 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
    });
});

253
2018-02-02 13:18



ik denk ook dat location.replace(URL) is de beste manier, maar als u de zoekmachines op de hoogte wilt stellen van uw omleiding (ze analyseren JavaScript-code niet om de omleiding te zien), moet u de rel="canonical" metatag naar uw website.

Het toevoegen van een noscript-sectie met daarin een HTML-verversingsmetatag is ook een goede oplossing. Ik raad u aan dit te gebruiken JavaScript-omleidingstool om omleidingen te creëren. Het heeft ook ondersteuning voor Internet Explorer om de HTTP-verwijzing 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 -->

215
2018-04-25 10:12



Maar als iemand terug wil verwijzen naar de startpagina, kan hij het volgende fragment gebruiken.

window.location = window.location.host

Het zou handig zijn als je drie verschillende omgevingen hebt zoals ontwikkeling, enscenering en productie.

U kunt dit venster of het object window.location verkennen door deze woorden gewoon in de Chrome-console of te plaatsen FirebugDe console.


191
2017-10-30 12:15



JavaScript biedt u vele methoden om de huidige URL op te halen en te wijzigen die wordt weergegeven in de adresbalk van de browser. Al deze methoden gebruiken het Location-object, dat een eigenschap is van het Window-object. U kunt een nieuw Location-object met de huidige URL als volgt maken ..

var currentLocation = window.location;

Basisstructuur van een URL

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

enter image description here

  1. Protocol - Specificeert de protocolnaam die moet worden gebruikt om toegang te krijgen tot de bron op internet. (HTTP (zonder SSL) of HTTPS (met SSL))

  2. hostnaam - hostnaam geeft de host aan die eigenaar is van de resource. Bijvoorbeeld www.stackoverflow.com. Een server biedt services met de naam van de host.

  3. poort - Een poortnummer dat wordt gebruikt om een ​​specifiek proces te herkennen waaraan een internet- of ander netwerkbericht moet worden doorgestuurd wanneer het op een server arriveert.

  4. padnaam - Het pad geeft informatie over de specifieke bron binnen de host waartoe de webclient toegang wenst te krijgen. Bijvoorbeeld stackoverflow.com/index.html.

  5. query: een queryreeks volgt de padcomponent en biedt een reeks informatie die de resource voor een bepaald doel kan gebruiken (bijvoorbeeld als parameters voor een zoekopdracht of als gegevens die moeten worden verwerkt).

  6. hash - Het ankergedeelte van een URL, inclusief het hekje (#).

Met deze eigenschappen van het locatieobject hebt u toegang tot al deze URL-componenten

  1. hachee   -Sets of retourneert het ankergedeelte van een URL.
  2. gastheer   -sets of retourneert de hostnaam en de poort van een URL.
  3. hostname   -Sets of retourneert de hostnaam van een URL.
  4. href   -Sets of retourneert het geheel URL.
  5. pathname   -Sets of retourneert de padnaam van een URL.
  6. haven -Sets of retourneert het poortnummer dat de server gebruikt voor een URL.
  7. protocol   -Sets of retourneert het protocol van een URL.
  8. zoeken   -sets of retourneert het querygedeelte van een URL

Nu, als u een pagina wilt wijzigen of de gebruiker naar een andere pagina wilt omleiden, kunt u de href eigenschap van het Location-object zoals deze

U kunt de eigenschap href van het object Location gebruiken.

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

Locatie Object hebben ook deze drie methoden

  1. toewijzen() - Laadt een nieuw document.
  2. herladen () - Laadt het huidige document opnieuw.
  3. vervangen() - Vervangt het huidige document door een nieuw document

U kunt assign () gebruiken en methoden vervangen om ook naar andere pagina's zoals deze door te verwijzen

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

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

Hoe assign () en replace () verschilt- Het verschil tussen de methode replace () en de methode assign () (), is dat replace () de URL van het huidige document uit de documentgeschiedenis verwijdert, wat betekent dat het niet mogelijk is om de knop "terug" te gebruiken om terug te navigeren naar het originele document. Gebruik dus de methode assign () als u een nieuw document wilt laden en u de optie wilt geven om terug te gaan naar het originele document.


183
2017-12-23 13:35



Moet gewoon kunnen instellen met window.location.

Voorbeeld:

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

Hier is een post in het verleden over het onderwerp:

Hoe kan ik doorsturen naar een andere webpagina?


166
2018-02-16 14:42