Pertanyaan Bagaimana cara mengalihkan ke halaman web lain?


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


7738
2018-02-02 12:54


asal


Jawaban:


Satu tidak hanya redirect menggunakan jQuery

jQuery tidak diperlukan, dan window.location.replace(...) terbaik akan mensimulasikan redirect HTTP.

window.location.replace(...) lebih baik daripada menggunakan window.location.href, karena replace() tidak menyimpan laman asli dalam riwayat sesi, yang berarti pengguna tidak akan terjebak dalam kegagalan tombol-belakang 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";

12915
2018-02-03 04:24



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

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

1472
2017-10-28 16:35



Cara JavaScript standar "vanilla" untuk mengalihkan halaman:

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


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


Bagian berikut adalah untuk mereka yang menggunakan HTTP_REFERER sebagai salah satu dari banyak tindakan aman (meskipun itu bukan ukuran perlindungan yang baik). 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 kami akan menerapkan alternatif untuk IE8 & lebih rendah sehingga kami tidak kehilangan HTTP_REFERER. Kalau tidak, Anda hampir selalu dapat menggunakannya window.location.href.

Pengujian terhadap HTTP_REFERER (URL paste, sesi, dll.) bisa membantu dalam memberi tahu apakah suatu permintaan itu sah. (catatan: ada juga cara-cara untuk bekerja-sekitar / spoof pengarah ini, sebagaimana dicatat oleh tautan droop di komentar)


Solusi pengujian lintas-browser sederhana (fallback to 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; 
    }
}

508
2017-07-27 14:41



Menggunakan:

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



Ini berfungsi untuk setiap browser:

window.location.href = 'your_url';

269
2017-10-22 23:45



Akan membantu jika Anda sedikit lebih deskriptif dalam apa yang Anda coba lakukan. Jika Anda mencoba menghasilkan data paged, ada beberapa opsi dalam cara Anda melakukan ini. Anda dapat membuat tautan terpisah untuk setiap laman 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 paged diubah melalui AJAX, ini adalah tempat jQuery akan masuk. Apa yang akan Anda lakukan adalah menambahkan handler klik ke masing-masing tag anchor yang sesuai dengan halaman yang berbeda. Penangan 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
    });
});

253
2018-02-02 13:18



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

Menambahkan bagian noscript dengan tag meta refresh HTML di dalamnya, juga merupakan solusi yang baik. Saya menyarankan Anda untuk menggunakan ini Alat pengalihan JavaScript 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 -->

215
2018-04-25 10:12



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

window.location = window.location.host

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

Anda dapat menjelajahi jendela atau objek window.location ini hanya dengan memasukkan kata-kata ini di Konsol Chrome atau PembakarKonsol.


191
2017-10-30 12:15



JavaScript menyediakan 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 dari suatu URL

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

enter image description here

  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 dikirim oleh Internet atau pesan jaringan lainnya ketika tiba di server.

  4. pathname - Path memberikan info tentang sumber daya tertentu 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 dimanfaatkan oleh 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 anchor dari URL.
  2. tuan rumah   - Set atau mengembalikan nama host dan port URL.
  3. nama host   -Mengatur atau mengembalikan nama host dari suatu URL.
  4. href   -Mengatur atau mengembalikan keseluruhan URL.
  5. nama jalan   -Mengatur atau mengembalikan nama path dari URL.
  6. Pelabuhan -Mengatur atau mengembalikan nomor port yang digunakan server untuk URL.
  7. protokol   -Mengatur atau mengembalikan protokol URL.
  8. pencarian   - Set atau mengembalikan porsi kueri dari suatu URL

Sekarang Jika Anda ingin mengubah halaman atau mengarahkan pengguna ke halaman lain yang dapat Anda gunakan href milik objek Lokasi seperti ini

Anda dapat menggunakan properti href dari objek Lokasi.

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

Objek Lokasi juga memiliki tiga metode ini

  1. menetapkan() - Memuat dokumen baru.
  2. muat ulang () - Muat ulang dokumen saat ini.
  3. menggantikan() - Mengganti dokumen saat ini dengan yang baru

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

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

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

Bagaimana assign () dan ganti () berbeda- Perbedaan antara ganti () metode dan assign () metode (), adalah bahwa ganti () menghapus URL dokumen saat ini dari sejarah 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.


183
2017-12-23 13:35



Seharusnya hanya bisa mengatur menggunakan window.location.

Contoh:

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

Berikut adalah posting terakhir tentang masalah ini:

Bagaimana cara mengalihkan ke halaman web lain?


166
2018-02-16 14:42