Bagaimana cara mengarahkan ke halaman web lain?

7723

Bagaimana saya bisa mengarahkan pengguna dari satu halaman ke halaman lain menggunakan jQuery atau JavaScript murni?

venkatachalam
sumber
147
Saya terus melihat kedua window.location = url; dan window.location.href = url; Bagaimana mereka berbeda? Apakah mereka? BTW, saya tidak tahu tentang window.location.replace (url). Bagus.
David M. Miller
100
window.locationsama dengan window.location.href, dalam hal perilaku. window.locationmengembalikan objek. Jika .hreftidak disetel, window.locationdefault untuk mengubah parameter .href. Kesimpulan: Gunakan salah satu baik-baik saja.
Raptor
10
var url = "nama situs web" $ (lokasi) .attr ('href', url);
Mad Scientist
31
@ MadScientist Itu adalah cara mundur untuk melakukannya. Objek lokasi bukan elemen HTML dan menggunakan objek jquery untuk mengaturnya sepertinya salah. Mengapa Anda menggunakannya ketika kode JS lurus sangat sederhana?
Juan Mendes
1
Mengapa Anda ingin mengarahkan ulang? Formulir login tidak boleh dikirimkan? Dan bahkan jika tidak ada logika di halaman target, Anda masih dapat mengirimkan formulir ke halaman lain.
Dimt

Jawaban:

14810

Seseorang tidak hanya mengarahkan ulang menggunakan jQuery

jQuery tidak perlu, dan window.location.replace(...)akan paling baik mensimulasikan pengalihan HTTP.

window.location.replace(...)lebih baik daripada menggunakan window.location.href, karena replace()tidak menjaga halaman asal dalam riwayat sesi, yang berarti pengguna tidak akan terjebak dalam kegagalan tombol kembali yang tidak pernah berakhir.

Jika Anda ingin mensimulasikan seseorang yang mengklik tautan, gunakan location.href

Jika Anda ingin mensimulasikan pengalihan HTTP, gunakan location.replace

Sebagai contoh:

// 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";

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";
Ryan McGeary
sumber
78
dalam hal tombol kirim tambahkan kembali salah; juga di dalam fungsi Anda
Abhi
134
Pertanyaannya adalah tentang javascript khusus, tetapi mungkin perlu dicatat bahwa meta refresh dapat digunakan sebagai gagal kembali jika pengguna telah menonaktifkan javascript
Hoppe
22
@ NicolòMartini If (IE) document.write ("");
Jeff Noel
48
Jika Anda sudah menggunakan jQuery, gunakan saja $(location).attr('href',url);. window.location.hreftampaknya memiliki perilaku tidak konstan di beberapa browser, pada kenyataannya, itu tidak berfungsi di versi Firefox saya. Saya pernah mendengar tentang pengaturan window.locationlangsung tidak berfungsi dalam versi IE.
Noz
8
"lebih baik" harus dihapus. Seperti yang dinyatakan kemudian dalam jawaban, solusi terbaik adalah situasional. OP tidak bertanya "bagaimana saya bisa meniru pengalihan HTTP dengan Javascript ..."
MadMaardigan
1684

PERINGATAN: Jawaban ini hanya diberikan sebagai solusi yang memungkinkan; itu jelas bukan solusi terbaik, karena membutuhkan jQuery. Sebaliknya, lebih suka solusi JavaScript murni.

$(location).attr('href', 'http://stackoverflow.com')
Boris Guéry
sumber
63
Ini adalah jawaban literal untuk pertanyaan itu. Jika Anda sudah menggunakan Jquery dan karena itu sudah dimuat maka akan lebih efisien bandwidth dan tentu saja lebih jelas untuk menggunakan cara pintas
barrymac
27
Lebih penting lagi, apakah ada cara untuk melakukan ini dengan jQuery yang hilang? Ini hanya pembungkus untuk window.location.href = url; Tetapi jika jQuery memiliki beberapa fungsi itu, if window.location.href = url; tidak akan berfungsi di lingkungan saat ini (browser, OS, dll.) jQuery core dapat mengganti rugi?
Chris
271
Memaksa jQuery ke dalam persamaan dengan cara ini hanya konyol dan tidak berguna, terutama karena window.locationbukan merupakan elemen dan karena itu tidak memiliki atribut.
Tim Down
10
Entah bagaimana saya ragu ini masih bekerja dengan versi jQuery terbaru di mana .attr()sebenarnya menetapkan atribut (yaitu .setAttribute())
ThiefMaster
156
@deltaray Ini bukan cara lain untuk mengarahkan ulang, seperti dikatakan di atas, ini adalah pembungkus yang tidak berarti di sekitar objek lokasi, yang bahkan bukan elemen! Ini mengingatkan saya pada i.stack.imgur.com/ssRUr.gif
JCM
676

Cara standar JavaScript "vanilla" untuk mengarahkan ulang halaman

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

Atau lebih sederhana: (karena windowGlobal)

location.href = 'newPage.html';

Jika Anda di sini karena Anda kehilangan HTTP_REFERER saat mengalihkan, terus membaca:

(Kalau tidak, abaikan bagian terakhir ini)


Bagian berikut adalah untuk mereka yang menggunakan HTTP_REFERERsebagai salah satu dari banyak tindakan keamanan (meskipun itu bukan tindakan perlindungan yang bagus). Jika Anda menggunakan Internet Explorer 8 atau lebih rendah, variabel-variabel ini hilang ketika menggunakan segala bentuk pengalihan halaman JavaScript (location.href, dll.).

Di bawah ini kita akan menerapkan alternatif untuk IE8 & lebih rendah sehingga kita tidak kehilangan HTTP_REFERER. Jika tidak, Anda hampir selalu dapat digunakan window.location.href.

Pengujian terhadap HTTP_REFERER(penyisipan URL, sesi, dll.) Dapat membantu memberi tahu apakah suatu permintaan sah. ( Catatan: ada juga cara untuk mengatasi / memalsukan rujukan ini, seperti yang dicatat oleh tautan droop di komentar)


Solusi pengujian lintas-browser sederhana (mundur ke window.location.href untuk Internet Explorer 9+ dan semua browser lainnya)

Pemakaian: 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; 
    }
}
Mark Pieszak - Trilon.io
sumber
60
Catatan kaki: memeriksa rujukan sebagai langkah pengamanan adalah solusi yang buruk. duckduckgo.com/?q=referrer+spoofing
droope
Jika Anda memiliki ID sesi GET HTTP di URL pengarah, ia dapat digunakan untuk memeriksa validitas sesi terhadap sesi.
Andrew Fox
@ mcpDESIGNS Anda yakin sudah mencoba menggunakan location.assign? Saya gunakan di aplikasi saya dengan IE8, dan saya tidak kehilangan HTTP_REFERERheader.
Buzinas
Setidaknya kembali pada tahun 2012 itu tidak berfungsi, mungkin patch IE8 kemudian memperbaikinya - itu bagus untuk didengar!
Mark Pieszak - Trilon.io
1
Penyebutan Anda tentang HTTP_REFERER membantu saya memahami masalah yang saya alami dengan window.open dan saya menemukan solusinya di sini: stackoverflow.com/questions/7580613/… . Ngomong-ngomong, saya mengalami masalah di IE11!
Dov Miller
427

Ada banyak cara untuk melakukan ini.

// 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')
Govind Singh
sumber
8
window.navigateini hanya untuk IE lama (Firefox / Chrome tidak mendukung ini). Jika Anda ingin menghitung semua opsi, jangan lupakan document.location.
Rob W
document.location = document.referrer; Harap tambahkan juga dalam daftar. Ini tidak berfungsi seperti History.back melainkan membuat halaman Refresh lagi.
Ali Humayun
.attr () tidak akan berfungsi di jQuery 3.0.0. gunakan .val () sebagai gantinya.
Rivalus
4
@ LéoLam Itu sebabnya ada mesin pencari bernama Google. :-) Anda dapat mencari masing-masing di Google dan menemukan perbedaannya. Anda tidak ingin memilih satu secara acak.
Saya Orang yang Paling Bodoh
Anda juga dapat melihat dokumen, developer.mozilla.org/en-US/docs/Web/API/Location
John Balvin Arias
330

Ini berfungsi untuk setiap browser:

window.location.href = 'your_url';
Fred
sumber
8
Anda juga dapat melakukannya document.location.replace(redirectURL)jika Anda tidak ingin halaman pertama ada dalam riwayat browser
jazzcat
298

Akan membantu jika Anda sedikit lebih deskriptif dalam apa yang Anda coba lakukan. Jika Anda mencoba untuk menghasilkan data halaman, ada beberapa opsi dalam cara Anda melakukan ini. Anda dapat membuat tautan terpisah untuk setiap halaman yang ingin Anda dapatkan secara langsung.

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

Perhatikan bahwa halaman saat ini dalam contoh ditangani secara berbeda dalam kode dan dengan CSS.

Jika Anda ingin data halaman diubah melalui AJAX, ini adalah tempat jQuery akan masuk. Yang akan Anda lakukan adalah menambahkan handler klik ke masing-masing tag anchor yang sesuai dengan halaman yang berbeda. Handler klik ini akan memanggil beberapa kode jQuery yang masuk dan mengambil halaman berikutnya melalui AJAX dan memperbarui tabel dengan data baru. Contoh di bawah ini mengasumsikan bahwa Anda memiliki layanan web yang mengembalikan data halaman baru.

$(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
    });
});
tvanfosson
sumber
252

Saya juga berpikir itu location.replace(URL)adalah cara terbaik, tetapi jika Anda ingin memberi tahu mesin pencari tentang pengalihan Anda (mereka tidak menganalisis kode JavaScript untuk melihat pengalihan), Anda harus menambahkan rel="canonical"tag meta ke situs web Anda.

Menambahkan bagian noscript dengan tag meta penyegaran HTML di dalamnya, juga merupakan solusi yang baik. Saya sarankan Anda untuk menggunakan alat pengalihan JavaScript ini untuk membuat pengalihan. Ini juga memiliki dukungan Internet Explorer untuk melewati pengarah HTTP.

Kode contoh tanpa penundaan terlihat seperti ini:

<!-- 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 -->
Patartics Milán
sumber
228

Tetapi jika seseorang ingin mengarahkan kembali ke beranda maka ia dapat menggunakan cuplikan berikut.

window.location = window.location.host

Akan sangat membantu jika Anda memiliki tiga lingkungan berbeda seperti pengembangan, pementasan, dan produksi.

Anda dapat menjelajahi objek window atau window.location ini dengan hanya meletakkan kata-kata ini di Chrome Console atau Firebug 's Console.

Nadeem Yasin
sumber
window.location.replace (window.location.protocol + "//" + window.location.host)
moala
13
lebih sederhana: window.location = '/'
Iftah
213

JavaScript memberi Anda banyak metode untuk mengambil dan mengubah URL saat ini yang ditampilkan di bilah alamat browser. Semua metode ini menggunakan objek Lokasi, yang merupakan properti dari objek Window. Anda dapat membuat objek Lokasi baru yang memiliki URL saat ini sebagai berikut ..

var currentLocation = window.location;

Struktur Dasar suatu URL

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

masukkan deskripsi gambar di sini

  1. Protokol - Menentukan nama protokol yang digunakan untuk mengakses sumber daya di Internet. (HTTP (tanpa SSL) atau HTTPS (dengan SSL))

  2. hostname - Nama host menentukan host yang memiliki sumber daya. Misalnya, www.stackoverflow.com. Server menyediakan layanan menggunakan nama host.

  3. port - Nomor port yang digunakan untuk mengenali proses tertentu yang akan diteruskan Internet atau pesan jaringan lainnya ketika tiba di server.

  4. pathname - Path memberikan info tentang sumber daya spesifik dalam host yang ingin diakses oleh klien Web. Misalnya, stackoverflow.com/index.html.

  5. kueri - String kueri mengikuti komponen jalur, dan memberikan serangkaian informasi yang dapat digunakan sumber daya untuk beberapa tujuan (misalnya, sebagai parameter untuk pencarian atau sebagai data yang akan diproses).

  6. hash - Bagian anchor dari URL, termasuk tanda hash (#).

Dengan properti objek Lokasi ini, Anda dapat mengakses semua komponen URL ini

  1. hash -Mengatur atau mengembalikan bagian jangkar URL.
  2. host -Mengatur atau mengembalikan nama host dan port URL.
  3. hostname -Mengatur atau mengembalikan nama host dari URL.
  4. href -Mengatur atau mengembalikan seluruh URL.
  5. pathname -Mengatur atau mengembalikan nama jalur URL.
  6. port -Mengatur atau mengembalikan nomor port yang digunakan server untuk URL.
  7. protokol -Mengatur atau mengembalikan protokol URL.
  8. cari -Mengatur atau mengembalikan bagian kueri dari URL

Sekarang Jika Anda ingin mengubah halaman atau mengarahkan pengguna ke halaman lain, Anda dapat menggunakan hrefproperti dari objek Lokasi seperti ini

Anda dapat menggunakan properti href dari objek Location.

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

Lokasi Obyek juga memiliki tiga metode ini

  1. assign () - Memuat dokumen baru.
  2. reload () - Memuat ulang dokumen saat ini.
  3. replace () - Mengganti dokumen saat ini dengan yang baru

Anda dapat menggunakan assign () dan mengganti metode juga untuk mengarahkan ulang ke halaman lain seperti ini

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

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

Bagaimana menetapkan () dan mengganti () berbeda - Perbedaan antara metode replace () dan metode assign () (), adalah mengganti () menghapus URL dokumen saat ini dari riwayat dokumen, berarti tidak mungkin untuk menggunakan tombol "kembali" untuk menavigasi kembali ke dokumen asli. Jadi, gunakan metode assign () jika Anda ingin memuat dokumen baru, dan ingin memberikan opsi untuk menavigasi kembali ke dokumen asli.

Anda dapat mengubah properti objek href properti menggunakan jQuery juga seperti ini

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

Dan karenanya Anda dapat mengarahkan pengguna ke beberapa url lainnya.

Nikhil Agrawal
sumber
203

Pada dasarnya jQuery hanyalah kerangka kerja JavaScript dan untuk melakukan beberapa hal seperti pengalihan dalam hal ini, Anda dapat menggunakan JavaScript murni, jadi dalam hal ini Anda memiliki 3 opsi menggunakan vanilla JavaScript:

1) Menggunakan lokasi menggantikan , ini akan menggantikan sejarah saat halaman, berarti bahwa tidak mungkin untuk menggunakan kembali tombol untuk kembali ke halaman asli.

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

2) Menggunakan penetapan lokasi , ini akan menyimpan riwayat untuk Anda dan dengan menggunakan tombol kembali, Anda dapat kembali ke halaman asli:

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

3) Saya sarankan menggunakan salah satu cara sebelumnya, tetapi ini bisa menjadi pilihan ketiga menggunakan JavaScript murni:

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

Anda juga dapat menulis fungsi dalam jQuery untuk menanganinya, tetapi tidak disarankan karena ini hanya satu fungsi garis JavaScript murni, juga Anda dapat menggunakan semua fungsi di atas tanpa jendela jika Anda sudah berada dalam cakupan jendela, misalnya window.location.replace("http://stackoverflow.com");bisa sajalocation.replace("http://stackoverflow.com");

Saya juga menunjukkan semuanya pada gambar di bawah ini:

location.replace location.assign

Alireza
sumber
1
Saya sarankan menggunakan assign()lebih href=karena yang terakhir tidak berfungsi dengan baik untuk saya dalam beberapa kasus.
Marsars
169

Sebelum saya mulai, jQuery adalah pustaka JavaScript yang digunakan untuk manipulasi DOM. Jadi Anda tidak boleh menggunakan jQuery untuk pengalihan halaman.

Kutipan dari Jquery.com:

Sementara jQuery mungkin berjalan tanpa masalah besar di versi browser yang lebih lama, kami tidak secara aktif menguji jQuery di dalamnya dan umumnya tidak memperbaiki bug yang mungkin muncul di dalamnya.

Itu ditemukan di sini: https://jquery.com/browser-support/

Jadi jQuery bukanlah solusi akhir-semua dan semua-untuk kompatibilitas mundur.

Solusi berikut ini menggunakan JavaScript baku berfungsi di semua browser dan telah standar untuk waktu yang lama sehingga Anda tidak memerlukan pustaka untuk dukungan lintas browser.

Halaman ini akan dialihkan ke Google setelah 3000 milidetik

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

Pilihan yang berbeda adalah sebagai berikut:

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"

Saat menggunakan ganti, tombol kembali tidak akan kembali ke halaman pengalihan, seolah-olah itu tidak pernah ada dalam sejarah. Jika Anda ingin pengguna dapat kembali ke halaman pengalihan kemudian gunakan window.location.hrefatau window.location.assign. Jika Anda menggunakan opsi yang memungkinkan pengguna kembali ke halaman pengalihan, ingatlah bahwa ketika Anda memasuki halaman pengalihan, itu akan mengarahkan Anda kembali. Jadi, pertimbangkan hal itu saat memilih opsi untuk pengalihan Anda. Dalam kondisi di mana halaman hanya dialihkan ketika tindakan dilakukan oleh pengguna maka memiliki halaman dalam sejarah tombol kembali akan baik-baik saja. Tetapi jika halaman auto redirect maka Anda harus menggunakan ganti sehingga pengguna dapat menggunakan tombol kembali tanpa dipaksa kembali ke halaman yang dikirimkan redirect.

Anda juga dapat menggunakan meta data untuk menjalankan redirect halaman seperti yang diikuti.

META Segarkan

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

Lokasi META

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

BASE Hijacking

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

Banyak lagi metode untuk mengarahkan klien Anda yang tidak menaruh curiga ke halaman yang mungkin tidak mereka inginkan dapat ditemukan di halaman ini (tidak satu pun dari mereka yang bergantung pada jQuery):

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

Saya juga ingin menunjukkan, orang tidak suka diarahkan secara acak. Hanya mengarahkan orang ketika benar-benar dibutuhkan. Jika Anda mulai mengarahkan ulang orang secara acak, mereka tidak akan pernah mengunjungi situs Anda lagi.

Paragraf berikutnya adalah hipotetis:

Anda juga dapat dilaporkan sebagai situs jahat. Jika itu terjadi maka ketika orang mengklik tautan ke situs Anda, browser pengguna dapat memperingatkan mereka bahwa situs Anda berbahaya. Apa yang mungkin juga terjadi adalah mesin pencari dapat mulai menurunkan peringkat Anda jika orang melaporkan pengalaman buruk di situs Anda.

Harap tinjau Pedoman Webmaster Google tentang pengalihan: https://support.google.com/webmasters/answer/2721217?hl=id&ref_topic=6001971

Ini adalah halaman kecil yang menyenangkan yang menendang Anda keluar dari halaman.

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

Jika Anda menggabungkan dua contoh halaman bersama-sama, Anda akan memiliki lingkaran pengalihan rute bayi yang akan menjamin bahwa pengguna Anda tidak akan pernah ingin menggunakan situs Anda lagi.

Patrick W. McMahon
sumber
5
Saya menjawab permintaannya untuk jQuery dengan mengatakan itu tidak diperlukan. JQuery memiliki banyak cara pintas yang bermanfaat untuk JavaScript tetapi tidak perlu cara pintas apa pun untuk pengalihan. JQuery hanyalah JavaScript. Tidak ada lagi. Cara normal untuk memanggil pengalihan akan bekerja dengan fungsinya menggunakan jQuery.
Patrick W. McMahon
165
var url = 'asdf.html';
window.location.href = url;
Ben Lee
sumber
145

Anda dapat melakukannya tanpa jQuery sebagai:

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

Dan jika Anda hanya menginginkan jQuery maka Anda dapat melakukannya seperti:

$jq(window).attr("location","http://yourdomain.com");
Kalajengking
sumber
JQuery bisa dibilang ide yang lebih baik karena bisa mengabstraksi perubahan / penghentian peramban di masa depan
Epirocks
@Epirocks Jika ada API di jQuery yang dirancang untuk ini, itu bisa menjadi alasan yang valid (meskipun diragukan API ini akan pernah berubah), tetapi contoh di sini hanya menyalahgunakan fitur jQuery di mana Anda dapat membungkus objek non-DOM dan beberapa metode akan tetap berfungsi.
1j01
Fakta bahwa 'beberapa metode akan tetap berfungsi' adalah persis apa yang saya maksudkan dengan cara abstrak. Ya, Anda dapat melakukannya tanpa JQuery, tetapi Anda dapat melakukan apa pun tanpa JQuery.
Epirocks
144

Ini bekerja dengan jQuery:

$(window).attr("location", "http://google.fr");
xloadx
sumber
Hanya karena berfungsi, tidak berarti Anda harus melakukannya. Ini adalah tipuan yang tidak berguna di sekitar pengaturanwindow.location
1j01
89

# Pengalihan Halaman HTML Menggunakan jQuery / JavaScript

Coba kode contoh ini:

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

Jika Anda ingin memberikan URL lengkap sebagai window.location = "www.google.co.in";.

Sakthi Karthik
sumber
"Menggunakan jQuery" adalah um, tidak akurat. Dan contoh menggunakan URL lengkap tidak akan berfungsi, karena itu bukan URL lengkap. Tidak ada protokol, jadi itu akan ditafsirkan sebagai URL relatif.
1j01
80

Anda harus meletakkan baris ini dalam kode Anda:

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

Jika Anda tidak memiliki jQuery, gunakan JavaScript:

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");
Ratan Ashish
sumber
80

Pertanyaan awal: "Bagaimana cara mengarahkan ulang menggunakan jQuery?", Maka jawabannya mengimplementasikan jQuery >> Kasus penggunaan gratis.


Untuk hanya mengarahkan ulang ke halaman dengan JavaScript:

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

Atau jika Anda membutuhkan penundaan:

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

jQuery memungkinkan Anda memilih elemen dari halaman web dengan mudah. Anda dapat menemukan apa pun yang Anda inginkan pada halaman dan kemudian menggunakan jQuery untuk menambahkan efek khusus, bereaksi terhadap tindakan pengguna, atau menampilkan dan menyembunyikan konten di dalam atau di luar elemen yang telah Anda pilih. Semua tugas ini dimulai dengan mengetahui cara memilih elemen atau acara .

$('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);
});

Bayangkan seseorang menulis skrip / plugin dengan 10.000 baris kode. Dengan jQuery Anda dapat terhubung ke kode ini hanya dengan satu atau dua baris.

SergeDirect
sumber
Header Javascript: Mungkinkah melakukannya dalam hitungan detik?
PythonMaster202
79

Jadi, pertanyaannya adalah bagaimana membuat halaman pengalihan, dan bukan bagaimana mengarahkan ke situs web?

Anda hanya perlu menggunakan JavaScript untuk ini. Berikut adalah beberapa kode kecil yang akan membuat halaman pengalihan dinamis.

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

Jadi katakan saja Anda memasukkan potongan ini ke redirect/index.htmlfile di situs web Anda, Anda dapat menggunakannya seperti itu.

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

Dan jika Anda membuka tautan itu, secara otomatis akan mengarahkan Anda ke stackoverflow.com .

Tautan ke Dokumentasi

Dan itulah bagaimana Anda membuat halaman pengarahan ulang sederhana dengan JavaScript

Edit:

Ada juga satu hal yang perlu diperhatikan. Saya telah menambahkan window.location.replacedalam kode saya karena saya pikir itu cocok dengan halaman pengalihan, tetapi, Anda harus tahu bahwa ketika menggunakan window.location.replacedan Anda diarahkan, ketika Anda menekan tombol kembali di browser Anda itu tidak akan kembali ke halaman pengalihan, dan itu akan kembali ke halaman sebelumnya, lihatlah demo kecil ini.

Contoh:

Prosesnya: store home => redirect halaman ke google => google

Ketika di google: google => tombol kembali di browser => store home

Jadi, jika ini sesuai dengan kebutuhan Anda maka semuanya akan baik-baik saja. Jika Anda ingin memasukkan halaman pengalihan dalam riwayat browser, ganti ini

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

dengan

if( url ) window.location.href = url;
iConnor
sumber
74

Pada fungsi klik Anda, cukup tambahkan:

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

jQuery tidak diperlukan. Kamu bisa melakukan ini:

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

Sangat mudah!

Cara terbaik untuk memulai permintaan HTTP adalah dengan document.loacation.href.replace('URL').

MayorMonty
sumber
52

Pertama tulis dengan benar. Anda ingin menavigasi di dalam aplikasi untuk tautan lain dari aplikasi Anda untuk tautan lain. Ini kodenya:

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

Dan jika Anda ingin menavigasi halaman dalam aplikasi Anda maka saya juga memiliki kode, jika Anda mau.

Anup
sumber
52

Anda dapat mengarahkan ulang di jQuery seperti ini:

$(location).attr('href', 'http://yourPage.com/');
Azam Alvi
sumber
45

Dalam JavaScript dan jQuery kita dapat menggunakan kode berikut untuk mengarahkan ulang satu halaman ke halaman lain:

window.location.href="http://google.com";
window.location.replace("page1.html");
Peter Mortensen
sumber
45

ECMAScript 6 + jQuery, 85 byte

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

Tolong jangan bunuh aku, ini lelucon. Itu lelucon. Ini sebuah lelucon.

Ini memang "memberikan jawaban untuk pertanyaan", dalam arti bahwa ia meminta solusi "menggunakan jQuery" yang dalam hal ini mengharuskan memaksa ke dalam persamaan entah bagaimana.

Ferrybig rupanya membutuhkan lelucon yang dijelaskan (masih bercanda, saya yakin ada opsi terbatas pada formulir ulasan), jadi tanpa basa-basi lagi:

Jawaban lain menggunakan jQuery attr()di objek locationatau windowtidak perlu.

Jawaban ini juga melecehkannya, tetapi dengan cara yang lebih konyol. Alih-alih menggunakannya untuk mengatur lokasi, ini menggunakan attr()untuk mengambil fungsi yang mengatur lokasi.

Fungsi ini dinamai jQueryCodemeskipun tidak ada jQuery tentang hal itu, dan memanggil fungsi somethingCodehanya mengerikan, terutama ketika sesuatu bahkan bukan bahasa.

"85 byte" adalah referensi ke Code Golf. Golf jelas bukan sesuatu yang harus Anda lakukan di luar kode golf, dan lebih jauh jawaban ini jelas bukan golf.

Pada dasarnya, ngeri.

1j01
sumber
45

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
lalithkumar
sumber
1
Apakah ada alasan untuk menyimpan url di jQuery sebagai variabel, tetapi tidak dengan Vanilla?
ESR
43

Menggunakan JavaScript:

Metode 1:

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

Metode 2:

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

Menggunakan jQuery:

Metode 1: $ (lokasi)

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

Metode 2: Fungsi Dapat Digunakan Kembali

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

jQuery(window).redirectTo("http://google.com");
Kalpesh Panchal
sumber
41

Berikut adalah pengalihan waktu tunda. Anda dapat mengatur waktu tunda untuk apa pun yang Anda inginkan:

<!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>
Stefan Gruenwald
sumber
5
lebih baik lakukan ini: setTimeout (function () {window.location.href = " google.com "}, tunda);
dikkini
39

Ada tiga cara utama untuk melakukan ini,

window.location.href='blaah.com';
window.location.assign('blaah.com');

dan...

window.location.replace('blaah.com');

Yang terakhir adalah yang terbaik, untuk pengalihan tradisional, karena itu tidak akan menyimpan halaman yang Anda kunjungi sebelum diarahkan ke riwayat pencarian Anda. Namun, jika Anda hanya ingin membuka tab dengan JavaScript, Anda dapat menggunakan salah satu di atas. 1

EDIT: windowAwalan adalah opsional.

Ben
sumber