Cara menghentikan redirect ke halaman lain di javascript

Question

Seringkali, kami perlu mengarahkan pengguna ke situs web lain atau halaman web lain di situs yang sama. Ada beberapa cara untuk mengarahkan ulang yang meliputi pengalihan JavaScript, pengalihan sisi server, dan pengalihan penyegaran meta HTML. Pengalihan pada dasarnya adalah mekanisme untuk mengirim pengguna ke alamat URL lain

Table of Contents Show

Implikasi Keamanan dan Efek Samping
Pengaruh pada SEO
Bagaimana cara berhenti mengalihkan ke halaman lain?
Bagaimana cara menghentikan pengalihan tag jangkar?
Bagaimana cara menghentikan pengalihan Ajax?

Motivasi untuk menggunakan pengalihan dapat bervariasi, dalam banyak kasus, karena

Anda pindah ke domain lain karena alasan apa pun, sehingga Anda dapat mengalihkan pengguna ke domain baru saat mereka mengakses konten di domain lama
Anda memiliki banyak halaman yang kontennya bervariasi berdasarkan lokasi, bahasa, browser, atau faktor lain yang menjadi dasar Anda mengarahkan pengguna ke halaman yang paling sesuai
Anda mengalihkan permintaan pengguna yang tidak diautentikasi atau tidak sah ke sumber daya ke halaman login
Anda mengirim pengguna ke halaman lain yang berkorelasi dengan konten situs saat ini

Semua ini secara praktis dicapai melalui objek Location yang berisi informasi URL. Ada beberapa cara untuk melakukan ini, dengan mengotak-atik properti yang berbeda dari objek Location. Dalam tutorial ini, kita akan melihat cara mengarahkan pengguna ke halaman web lain dalam JavaScript dan apa yang harus diwaspadai untuk meminimalkan potensi dampak SEO negatif

Objek window.location_ menunjukkan lokasi saat ini, atau lebih tepatnya, URL jendela/pengguna. Ini secara teknis adalah properti read-only, meskipun demikian, kita dapat memanipulasinya dengan menetapkan nilai baru (DOMStrings) ke propertinya. Awalan windows di objek

windows.location = "https://stackabuse.com";

0 dapat dihilangkan karena terletak secara hierarkis di bagian atas ruang lingkup

Properti

windows.location = "https://stackabuse.com";

1 menunjukkan URL saat ini sebagai sebuah String. Mengubah properti

windows.location = "https://stackabuse.com";

_2 juga akan secara otomatis mengarahkan pengguna ke nilai

windows.location = "https://stackabuse.com";

2 yang baru. Mengubah properti

windows.location = "https://stackabuse.com";

_2 semudah menetapkan nilai baru padanya

location.href = "https://stackabuse.com/";

Catatan. Baris kode yang setara secara fungsional adalah

windows.location = "https://stackabuse.com";

Perlu dicatat bahwa Anda dapat mengarahkan pengguna ke domain selain dari domain yang mereka gunakan saat ini dengan pendekatan ini, meskipun, masalah keamanan dapat muncul dari ini, jadi praktik tersebut harus dihindari jika memungkinkan

Pengalihan biasanya terkait dengan beberapa jenis peristiwa, seperti menekan tombol yang mengalihkan pengguna ke halaman web yang berbeda, atau peristiwa lain, seperti pengguna melakukan beberapa operasi di situs web (mengunggah gambar di media sosial, setelah itu mereka ' . Mari kita tulis fungsi sederhana yang mengarahkan ulang pengguna dengan mengklik tombol




    Redirection

Menyetel properti

windows.location = "https://stackabuse.com";

_2 serupa dengan apa yang dilakukan klik mouse

Metode

windows.location = "https://stackabuse.com";

6 memuat sumber daya di

windows.location = "https://stackabuse.com";

7 yang disediakan, dan menampilkannya di

windows.location = "https://stackabuse.com";

8. Ini sebenarnya adalah pendekatan yang lebih disukai untuk mengalihkan pengguna dibandingkan dengan mengatur properti

windows.location = "https://stackabuse.com";

2, karena ini juga memeriksa keamanan

windows.location = "https://stackabuse.com";

7 yang disediakan, memberikan pengecualian jika itu bukan tujuan yang aman. Manfaat lainnya adalah membuat entri baru dalam riwayat browser, memungkinkan pengguna untuk "Kembali" dengan anggun jika mereka mau.

Perlu juga dicatat bahwa




    Redirection

_1 tidak mengizinkan pengalihan lintas sumber. Anda hanya dapat mengalihkan ke domain yang sama tempat panggilan dilakukan, yang berdampak positif pada keamanan

Selain itu, ini dapat digunakan dengan cara yang sama seperti menetapkan nilai baru ke

windows.location = "https://stackabuse.com";

1. Mari kita tulis ulang halaman kita untuk menggunakan fungsi




    Redirection

3 sebagai gantinya




    Assigning

Metode




    Redirection

_4 dapat digunakan untuk mengganti sumber daya saat ini di

windows.location = "https://stackabuse.com";

8, dengan sumber daya yang dimuat dari

windows.location = "https://stackabuse.com";

7. Itu tidak benar-benar mengarahkan pengguna, dan tidak disimpan dalam riwayat browser. Batasan keamanan yang sama ada seperti pada metode




    Redirection

3, yang menjadikannya metode yang diinginkan untuk digunakan jika Anda ingin mengganti konten dengan halaman lain




    Replacing

Perlu juga dicatat bahwa metode




    Redirection

_3 memiliki potensi, kon. Jika pengguna ingin kembali ke halaman yang secara otomatis menjalankan metode




    Redirection

3, mereka akan diarahkan kembali ke halaman yang telah mereka coba kembali. Mereka kemudian memasuki lingkaran "kembali" melalui Tombol Kembali, tetapi dialihkan ke halaman lain karena metode




    Redirection

3

Jika Anda menggunakan




    Redirection

3, pastikan itu tidak dipanggil secara otomatis di halaman, dan pemanggilannya memerlukan tindakan pengguna, seperti memanggilnya dengan menekan tombol. Jika tidak - gunakan




    Assigning

2

Lihat panduan praktis dan praktis kami untuk mempelajari Git, dengan praktik terbaik, standar yang diterima industri, dan menyertakan lembar contekan. Hentikan perintah Googling Git dan benar-benar pelajari itu

Selain itu,




    Assigning

_2 adalah yang paling dekat dengan pengalihan HTTP, karena tautan asli tidak ditambahkan ke riwayat browser

Implikasi Keamanan dan Efek Samping

Keamanan yang disebutkan berlaku untuk semua metode di atas dan mengacu pada aspek-aspek berikut

Jika asal skrip yang memanggil metode tidak sama dengan asal halaman saat ini - ini akan diperlakukan sebagai pelanggaran keamanan dan DOMException dari tipe
```
    Assigning
    


    
```
4 akan dibuang. Artinya, pustaka dan layanan eksternal yang disematkan ke halaman Anda sendiri tidak akan dapat mengalihkan pengguna
Jika URL yang disimpan tidak valid,
```
    Assigning
    


    
```
5 akan dilempar
Jika Anda mengalihkan pengguna ke domain selain dari domain yang sudah mereka gunakan sebelumnya, CORS dapat memulai dan mencegahnya

Beberapa kemungkinan efek samping yang dapat terjadi karena masalah desain yang disebabkan oleh manusia adalah

Ketika pengalihan (selain
```
    Assigning
    


    
```
6) terjadi terlalu cepat (i. e. dalam waktu kurang dari 3 detik) dapat merusak tombol kembali pada browser. Ini berarti bahwa setiap kali Anda mencoba untuk kembali ke halaman sebelumnya, pengalihan akan terjadi sekali lagi hampir seketika, menciptakan putaran tak terbatas
Ini dapat dianggap sebagai Halaman Doorway (i. e halaman yang dibuat untuk manipulasi indeks SEO) yang tidak disarankan
Pengalihan yang direncanakan dan digunakan dengan buruk dapat menyebabkan pengalihan berantai, pengalihan antara dua halaman atau lebih

Pengaruh pada SEO

Ada banyak faktor yang memengaruhi SEO, dan banyak di antaranya yang sebenarnya tidak diketahui publik, agar tidak disalahgunakan. Padahal, yang pasti kode yang dioptimalkan dengan buruk dapat berdampak negatif pada SEO. Ini dapat menyebabkan waktu muat yang lama, rangkaian pengalihan, atau bahkan pengulangan. Banyak perayap web tidak akan mengeksekusi kode JavaScript yang dapat memengaruhi peringkat halaman secara negatif

Cara terbaik untuk mengatasi masalah ini mungkin

Untuk mengeluarkan dengan benar pengalihan HTTP di sisi server dengan salah satu kode status pengalihan (
```
    Assigning
    


    
```
7) atau untuk mengeluarkan
```
    Assigning
    


    
```
8 untuk halaman yang tidak lagi ingin Anda hosting atau tuju
Untuk memberi tahu mesin telusur tentang halaman duplikat dengan menambahkan
```
    Assigning
    


    
```
9 di bagian tersebut. Ini lebih mudah diterapkan daripada melakukan pekerjaan tambahan apa pun di sisi server, tetapi perlu diingat bahwa tidak semua perayap web akan menghargainya