Ketika permintaan HTTP untuk satu halaman secara otomatis masuk ke halaman lain maka itu disebut redirection. Pengalihan halaman web digunakan untuk alasan yang berbeda seperti mengarahkan ke domain yang berbeda e. g. ketika Anda memindahkan situs web Anda dari satu URL ke URL lain atau mengalihkan ke versi yang lebih baru dari halaman yang Anda lihat. Ada banyak cara untuk mengalihkan halaman web dan teknologi web yang berbeda menyediakan cara yang berbeda seperti Java menyediakan metode sendRedirect() dan forward() untuk pengalihan.
Pengalihan juga dapat dibagi menjadi dua kategori, sisi klien dan sisi server. Di sisi klien, klien pengalihan bertanggung jawab untuk merutekan permintaan ke URL lain tetapi di pengalihan sisi server, tugas server adalah mengarahkan ke halaman baru
JQuery dan JavaScript sebagian besar digunakan untuk pengalihan sisi klien dan ada sejumlah cara untuk mengarahkan ulang halaman web menggunakan JavaScript. Dalam tutorial ini, kita akan memeriksa beberapa cara yang paling populer dan umum untuk mengarahkan ulang halaman web menggunakan JavaScript dan jQuery
Cara mengarahkan ulang halaman web menggunakan JavaScript
Sebelum melihat kode jQuery, pertama-tama mari kita pelajari cara mengarahkan halaman web dengan menggunakan JavaScript biasa. Ini menyediakan beberapa cara sederhana untuk mencapai tugas ini tanpa memuat pustaka JavaScript eksternal seperti jQuery1. Pengalihan menggunakan jendela. lokasi. href dari Javascript
Cara paling umum untuk mengalihkan URL menggunakan JavaScript hanyalah menyetel atribut href dari jendela. objek lokasi. Ini mensimulasikan navigasi normal ke halaman baru. Saya tidak berpikir ada tugas yang lebih sederhana dari ini, cukup tetapkan URL baruMisalnya, jika Anda mengarahkan ulang URL A ke URL B maka masukkan saja URL B di sini seperti yang ditunjukkan pada contoh berikut
window.location.href="//newURL.com"; Kiat. Anda harus ingat jendela itu. lokasi. href memuat halaman dari cache browser dan tidak selalu mengirim permintaan ke server. Jadi, jika Anda memiliki halaman versi lama yang tersedia di cache, maka itu akan dialihkan ke sana alih-alih memuat halaman baru dari server.
2. Pengalihan menggunakan fungsi replace()
Cara lain untuk mengalihkan ke halaman web di jQuery adalah dengan menggunakan fungsi replace() dari window.location objek. Metode ini menghapus URL saat ini dari riwayat dan menggantinya dengan URL baru. Berikut adalah contoh cara menggunakan fungsi ini untuk pengalihan.window.location.replace("url"); _
Tip. Gunakan metode replace() jika Anda ingin mengalihkan ke halaman baru dan tidak mengizinkan pengguna menavigasi ke halaman asli menggunakan .
3. Pengalihan menggunakan fungsi windowassign()
Anda juga dapat menggunakan jendela. lokasi. Assign() berfungsi untuk mengarahkan ulang halaman web menggunakan JavaScript. Fungsi ini menambahkan URL baru ke tumpukan riwayat dan dialihkan ke URL baru, yang berarti, tidak seperti fungsi replace() Anda dapat menggunakan tombol kembali untuk kembali ke dokumen asli. Inilah cara Anda dapat menggunakan metode ini untuk mengarahkan ulang ke url baruwindow.location.assign("url");
Tip. Gunakan metode assign() untuk pengalihan jika Anda ingin mengizinkan pengguna menggunakan tombol kembali untuk kembali ke dokumen asli
4. Pengalihan menggunakan fungsi navigasi
Fungsi ini sama dengan jendela. location="url" dan juga memuat halaman dari cache alih-alih langsung memintanya dari server. Berikut adalah contoh penggunaan fungsi navigate() untuk pengalihan ke halaman baruwindow.navigate("page.html");
Kode ini mirip dengan metode pertama dan halaman akan dimuat dari cache jika tersedia alih-alih mengirimkan permintaan baru ke server
Cara redirect halaman web menggunakan jQuery
API jQuery juga memungkinkan Anda untuk mengalihkan halaman web ke URL lain hanya dalam satu baris kode. Meskipun ini bukan cara yang ideal untuk menggunakan jQuery dan tetapi karena kita semua menggunakan jQuery untuk kebutuhan yang berbeda dalam proyek web, masuk akal untuk memanfaatkannya untuk fitur apa pun yang kita bisa. Anda dapat menggunakan fungsi attr() jQuery untuk mengalihkan halaman web seperti yang ditunjukkan di bawah ini.var url = "//google.com"; $(location).attr('href',url);_
Ada sedikit perbedaan dalam penggunaan attr() vs window. lokasi. href JavaScript. $(lokasi). attr('href', url) akan meminta halaman baru dari server, sedangkan window. lokasi. href memuat halaman dari cache.
Ini adalah halaman web lengkap yang dialihkan ke URL lain menggunakan
<html> <head> <title>How to redirect a webpage using jQuery</title> </head> <body> <h2>Redirecting to another URL ..</h2> <script src="//code.jquery.com/jquery-1.6.2.min.js"></script> <script> $(document).ready(function() { var url = "//javarevisited.blogspot.com"; $(location).attr('href',url); }); </script> </body> </html>
dan inilah output dari halaman web ini ketika Anda menjalankannya di browser web e. g. penjelajah internet, chrome atau edge
Anda dapat melihat bahwa halaman sedang dialihkan, setelah pengalihan selesai, URL dan judul halaman juga akan diganti dengan URL target. Lihat jQuery Head First untuk mempelajari jQuery lebih lanjut dan API canggihnya
Cara mengalihkan ke halaman sebelumnya
Kasus pengalihan lainnya adalah ke halaman sebelumnya, berikut adalah beberapa cara umum untuk pergi ke halaman sebelumnya menggunakan objek jendela JavaScriptwindow.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_
Ketiga metode ini mensimulasikan klik tombol kembali secara terprogram. Anda dapat menggunakan salah satu metode yang ingin Anda gunakan
Itu semua tentang cara mengalihkan permintaan web ke halaman web lain menggunakan JavaScript dan jQuery. Seperti yang telah Anda lihat, ada banyak cara untuk mengarahkan ulang tetapi ada perbedaan halus di antara keduanya, e. g. $(lokasi). attr('href', url) panggilan jQuery akan membuka halaman baru dari server, tetapi jendela Javascript . lokasi. href memuat halaman dari cache.
Begitu pula dengan jendela. lokasi. menetapkan (url) menambahkan URL baru ke riwayat dokumen dan dialihkan ke URL baru tetapi jendela. lokasi. replace("URL") menghapus URL saat ini dari riwayat dan menggantinya dengan URL baru
Tutorial jQuery lain yang mungkin ingin Anda jelajahi
- 5 Buku untuk mempelajari jQuery untuk pengembang Web (buku)
- Bagaimana cara mendapatkan URL, Parameter, dan Hash saat ini menggunakan jQuery?
- Bagaimana cara memodifikasi lebih dari satu elemen dalam satu baris?
- Contoh jQuery Hello World (program)
- eBuku dan PDF jQuery gratis ()
- Bagaimana cara menggunakan lebih dari satu jQuery UI DatePicker di halaman JSP?
- Bagaimana cara membuat UI berbasis tab menggunakan jQuery?
- 20 Pertanyaan Wawancara jQuery Teratas untuk Pengembang Web Java (daftar)
- Cara mencentang/menghapus centang pada kotak centang di jQuery (solusi)
- Bagaimana cara mengunduh jQuery secara dinamis di halaman web?
Terima kasih telah membaca artikel ini. Jika Anda menyukai artikel ini, silakan bagikan dengan teman dan kolega Anda. Jika Anda memiliki pertanyaan atau umpan balik, silakan berikan komentar