Redirect dari halaman HTML

1580

Apakah mungkin untuk mengatur halaman HTML dasar untuk mengalihkan ke halaman lain saat dimuat?

html redirect xhtml meta html-head chobo
sumber
28
Untuk mengikuti standar web modern dan menyediakan fungsionalitas lintas-browser, saya lebih suka menggunakan generator pengalihan
Patartics Milán
1
Gunakan .htaccess atau IIS setara untuk melakukan pengalihan sisi server. Dengan begitu, bahkan jika halaman fisik Anda hilang, pengalihan masih akan berfungsi.
flith
1
insider.zone/tools/client-side-url-redirect-generator Adalah alat kecil yang bagus yang memastikan kompatibilitas.
mackycheese21
2
Alat insider.zone membuat pengalihan saya semua huruf kecil, menyebabkan 404s. Plus tidak ada cara untuk menghubungi siapa pun yang membuat halaman tentang itu.
Dan Jacobson

Jawaban:

2152

Coba gunakan:

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

Catatan: Tempatkan di bagian kepala.

Selain itu untuk peramban yang lebih lama jika Anda menambahkan tautan cepat jika itu tidak menyegarkan dengan benar:

<p><a href="http://example.com/">Redirect</a></p>

Akan muncul sebagai

Arahkan ulang

Ini masih akan memungkinkan Anda untuk mencapai tujuan dengan klik tambahan.

Valerij
sumber
151
Penggunaan meta refresh tidak dianjurkan oleh World Wide Web Consortium (W3C). Ref: en.wikipedia.org/wiki/Meta_refresh . Jadi disarankan untuk menggunakan pengalihan server sebagai gantinya. Pengalihan JavaScript mungkin tidak berfungsi di semua ponsel karena JavaScript mungkin dinonaktifkan.
NinethSense
61
FYI, 0sarana untuk menyegarkan setelah 0 detik. Anda mungkin ingin memberi pengguna lebih banyak waktu untuk mengetahui apa yang terjadi.
Dennis
5
@Paul Draper, itu tergantung pada server yang Anda jalankan
Gal Margalit
9
Saya menambahkan penutupan tag untuk menghormati spesifikasi XHTML5.
ZenLulz
98
Komentar @ NinethSense membuat meta refresh tampak seperti pengalihan JavaScript. Refresh meta bukan JS dan masih akan berfungsi ketika JS dinonaktifkan.
Druska
1104

Saya akan menggunakan kedua meta , dan kode JavaScript dan akan memiliki tautan untuk berjaga-jaga.

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="refresh" content="0; url=http://example.com">
        <script type="text/javascript">
            window.location.href = "http://example.com"
        </script>
        <title>Page Redirection</title>
    </head>
    <body>
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
        If you are not redirected automatically, follow this <a href='http://example.com'>link to example</a>.
    </body>
</html>

Untuk kelengkapan, saya pikir cara terbaik, jika mungkin, adalah dengan menggunakan pengalihan server, jadi kirim kode status 301 . Ini mudah dilakukan melalui .htaccessfile menggunakan Apache , atau melalui banyak plugin menggunakan WordPress . Saya yakin ada juga plugin untuk semua sistem manajemen konten utama. Juga, cPanel memiliki konfigurasi yang sangat mudah untuk pengalihan 301 jika Anda menginstalnya di server Anda.

Billy Moon
sumber
12
Halaman pengalihan ini bisa lebih ringkas dengan HTML5: pastebin.com/2qmfUZMk (yang berfungsi di semua browser, dan melewati validasi w3c)
enyo
9
@enyo Saya bukan penggemar menjatuhkan bodytag dan sejenisnya. Mungkin ini valid, dan mungkin berfungsi di browser umum. Saya yakin ada beberapa kasus pinggiran yang menyebabkan masalah, dan manfaatnya kecil.
Billy Moon
9
@Fricker karena mereka mungkin tidak mengklik. Mereka mungkin mengendalikan melalui suara, mengetuk, atau menavigasi dengan cara yang tidak diketahui. Ini adalah pedoman aksesibilitas untuk mengikuti standar untuk kontrol, seperti menggunakan atribut HTML A standar untuk tautan, dan untuk memikirkannya, dan mengomunikasikannya sebagai tautan, dan tidak menentukan bagaimana seseorang harus berinteraksi dengannya. Juga, memiliki click heretautan tidak disarankan, karena pembaca layar akan lebih sulit untuk dinavigasi. Tautan harus berupa teks yang menjelaskan tujuan, sehingga pengguna tahu di mana mereka akan tiba sebelum mengikutinya, dan bagaimanapun mereka berinteraksi dengannya.
Billy Moon
2
@BillyMoon, Sebenarnya arti dari "klik" sudah kelebihan beban untuk memasukkan semua makna juga. "klik" akan baik-baik saja.
Pacerier
2
@BillyMoon dalam keadaan apa kadang-kadang browser mengabaikan 0 meta refresh nilai? Terima kasih!
Gal Margalit
125

JavaScript

<script type="text/javascript">
    window.location.href = "http://example.com";
</script>

Tag meta

<meta http-equiv="refresh" content="0;url=http://example.com">
amit_g
sumber
40

Saya juga akan menambahkan tautan kanonik untuk membantu orang SEO Anda :

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
lrkwz
sumber
3
Anda akan menggunakan tautan kanonik selain pengalihan? en.wikipedia.org/wiki/Canonical_link_element mengatakan bahwa Google lebih memilih penggunaan pengalihan daripada tautan kanonik.
LarsH
1
@ LarsH Jadi apa yang paling penting untuk SEO, apakah itu redirect link atau halaman tujuan akhir?
Chakotay
@ Chakotay See: Kapan Anda Memilih Redirect Canonical vs. 301?
Marc.2377
28

Tag meta berikut, ditempatkan di antara bagian dalam kepala, akan memberi tahu browser untuk mengalihkan:

<meta http-equiv="Refresh" content="seconds; url=URL">

Ganti detik dengan jumlah detik untuk menunggu sebelum dialihkan, dan ganti URL dengan URL yang Anda inginkan untuk dialihkan.

Atau, Anda dapat mengarahkan ulang dengan JavaScript. Tempatkan ini di dalam tag skrip di mana saja di halaman:

window.location = "URL"
Peter Olson
sumber
28

Ini adalah jumlah dari setiap jawaban sebelumnya ditambah solusi tambahan menggunakan HTTP Refresh Header via .htaccess

1. HTTP Refresh Header

Pertama-tama, Anda dapat menggunakan .htaccess untuk mengatur header refresh seperti ini

Header set Refresh "3"

Ini adalah "statis" yang setara dengan menggunakan header()fungsi dalam PHP

header("refresh: 3;");

Perhatikan bahwa solusi ini tidak didukung oleh setiap browser.

2. JavaScript

Dengan URL alternatif :

<script>
    setTimeout(function(){location.href="http://example.com/alternate_url.html"} , 3000);
</script>

Tanpa URL alternatif:

<script>
    setTimeout("location.reload(true);",timeoutPeriod);
</script>

Melalui jQuery:

<script>
    window.location.reload(true);
</script>

3. Meta Refresh

Anda dapat menggunakan meta refresh ketika dependensi pada JavaScript dan redirect header tidak diinginkan

Dengan URL alternatif:

<meta http-equiv="Refresh" content="3; url=http://example.com/alternate_url.html">

Tanpa URL alternatif:

<meta http-equiv="Refresh" content="3">

Menggunakan <noscript>:

<noscript>
    <meta http-equiv="refresh" content="3" />
</noscript>

Opsional

Seperti yang direkomendasikan oleh Billy Moon, Anda dapat memberikan tautan refresh jika terjadi kesalahan:

Jika Anda tidak dialihkan secara otomatis: <a href='http://example.com/alternat_url.html'>Click here</a>

Sumber daya

RafaSashi
sumber
12
Contoh "Via jQuery" Anda tidak menggunakan jQuery apa pun.
Justin Johnson
2
Jangan panggil setTimeoutdengan string. Lewatkan fungsi sebagai gantinya.
Oriol
"HTTP Refresh Header via .htaccess" - mengapa relevan jika ditanya tentang pengalihan dari halaman HTML?
mengurangi aktivitas
26

Akan lebih baik untuk menyiapkan pengalihan 301 . Lihat Alat Alat Webmaster Google 301 pengalihan .

Alex K
sumber
13
Pertanyaannya secara spesifik menanyakan halaman .html dasar. Saya kira penanya tidak dapat mengubah .htaccess atau yang serupa (misalnya menggunakan Halaman Github atau hosting yang serupa). 301 tidak dapat dilakukan dalam kasus-kasus seperti itu
Nicolas Raoul
26

Jika Anda ingin mengikuti standar web modern, Anda harus menghindari pengalihan meta HTML biasa. Jika Anda tidak dapat membuat kode sisi server, Anda harus memilih JavaScript redirect .

Untuk mendukung browser yang dinonaktifkan JavaScript, tambahkan baris pengalihan meta HTML ke noscriptelemen. The noscriptbersarang meta redirect dikombinasikan dengancanonical tag akan membantu peringkat mesin pencari Anda juga.

Jika Anda ingin menghindari pengalihan loop, Anda harus menggunakan location.replace() fungsi JavaScript.

Kode pengalihan URL sisi klien yang tepat terlihat seperti ini (dengan Internet Explorer 8 dan perbaikan yang lebih rendah dan tanpa penundaan):

<!-- Pleace 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://stackoverflow.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0; URL=https://stackoverflow.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://stackoverflow.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
2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element mencakup perincian tentang mengapa <meta http-equiv="refresh"ditinggalkan oleh W3C.
daxelrod
Argumen yang disediakan w3c terhadap pengalihan HTML juga berlaku untuk pengalihan Javascript. Selain itu, pengalihan Javascript memerlukan javascript diaktifkan, berbeda dengan pengalihan HTML. Oleh karena itu pengalihan HTML benar-benar lebih baik daripada pengalihan Javascript dalam kasus di mana orang dapat menggunakan keduanya.
Maks
17

Anda dapat menggunakan "redirect" META :

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

atau pengalihan JavaScript (perhatikan bahwa tidak semua pengguna mengaktifkan JavaScript, jadi selalu siapkan solusi cadangan untuk mereka)

<script language="javascript">
  window.location = "http://new.example.com/address";
</script>

Tapi saya lebih suka merekomendasikan menggunakan mod_rewrite , jika Anda memiliki opsi.

Czechnology
sumber
5
mod_rewrite (hanya) berlaku untuk Apache.
Paul Draper
1
Mengenai Apache: Mengapa mod_rewrite dan bukan arahan Redirect sederhana tanpa dan modul tambahan?
vog
14

Segera setelah halaman dimuat, initfungsi diaktifkan dan halaman dialihkan:

<!DOCTYPE html>
<html>
    <head>
        <title>Example</title>
        <script>
            function init()
            {
               window.location.href = "www.wherever.com";
            }
        </script>
    </head>

    <body onload="init()">
    </body>
</html>
kkk
sumber
10

Tempatkan kode berikut di antara tag <HEAD> dan </HEAD> dari kode HTML Anda:

<meta HTTP-EQUIV="REFRESH" content="0; url=http://example.com/index.html">

Kode pengalihan HTML di atas akan mengarahkan pengunjung Anda ke halaman web lain secara instan. The content="0;dapat berubah ke jumlah detik Anda ingin browser menunggu sebelum mengarahkan.

Muhammad Saqib
sumber
9

Masukkan kode berikut di <head>bagian:

<meta http-equiv="refresh" content="0; url=http://address/">
Sebi
sumber
9

Saya menemukan masalah ketika bekerja dengan aplikasi jQuery Mobile , di mana dalam beberapa kasus tag header Meta saya tidak akan mencapai pengalihan dengan benar (jQuery Mobile tidak membaca header secara otomatis untuk setiap halaman sehingga menempatkan JavaScript juga tidak efektif kecuali membungkusnya dengan kompleksitas). Saya menemukan solusi termudah dalam hal ini adalah dengan menempatkan pengalihan JavaScript langsung ke badan dokumen, sebagai berikut:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="refresh" content="0;url=myURL" />
    </head>

    <body>
        <p>You are not logged in!</p>
        <script language="javascript">
            window.location = "myURL";
        </script>
    </body>
</html>

Ini sepertinya bekerja dalam setiap kasus untuk saya.

orang Skotlandia
sumber
8

Cara sederhana yang berfungsi untuk semua jenis halaman adalah dengan menambahkan metatag di kepala:

<html>
    <head>
        ...
        <meta HTTP-EQUIV="REFRESH" content="seconds; url=your.full.url/path/filename">
        ...
    </head>
    <body>
        Don't put much content, just some text and an anchor.
        Actually, you will be redirected in N seconds (as specified in content attribute).
        That's all.
        ...
    </body>
</html>
P. BANERJEE
sumber
7

Anda harus menggunakan JavaScript. Tempatkan kode berikut di tag kepala Anda:

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
kriscross07
sumber
7

Anda dapat mengalihkan secara otomatis dengan Kode Status HTTP 301 atau 302.

Untuk PHP:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
Vô Vị
sumber
6
Itu bukan redirect dari halaman HTML.
bugmenot123
7

Saya menggunakan skrip yang mengalihkan pengguna dari index.html ke url relatif Halaman Login

<html>
  <head>
    <title>index.html</title>
  </head>
  <body onload="document.getElementById('lnkhome').click();">
    <a href="/Pages/Login.aspx" id="lnkhome">Go to Login Page<a>
  </body>
</html>
Zolfaghari
sumber
1
Redirect url dalam metode di atas bisa relatif. misalnya: Anda ingin mengalihkan ke halaman Login atau halaman relatif apa saja dengan index.html di root situs web. tidak perlu tahu nama domain Anda. tetapi ketika Anda mengatur window.location.href = "xxx"; Anda harus tahu nama domain.
Zolfaghari
6

Hanya untuk ukuran yang baik:

<?php
header("Location: [email protected]", TRUE, 303);
exit;
?>

Pastikan tidak ada gema di atas skrip jika tidak akan diabaikan. http://php.net/manual/en/function.header.php

Edward
sumber
9
Pertanyaannya secara spesifik menanyakan halaman .html dasar. Saya kira penanya tidak dapat mengubah .htaccess atau yang serupa (misalnya menggunakan Halaman Github atau hosting yang serupa). PHP tidak tersedia dalam kasus seperti itu.
Nicolas Raoul
Saya akan mempertimbangkan sesuatu yang dihasilkan oleh PHP (Pre-Hypertext Processor) sebagai "halaman HTML dasar". Tidak ada dalam pertanyaan yang menyebutkan jenis file.
Edward
6

Cukup gunakan event onload dari tag tubuh:

<body onload="window.location = 'http://example.com/'">
tepuk capozzi
sumber
5

Mesin silet untuk penundaan 5 detik:

<meta http-equiv="Refresh"
         content="5; [email protected]("Search", "Home", new { id = @Model.UniqueKey }))">
JoshYates1980
sumber
Itu bukan redirect dari halaman HTML.
mengurangi aktivitas
5 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Redirect to a page</title>
    </head>
    <body onload="window.location.assign('http://example.com')">

    </body>
</html>
PoM
sumber
4

Anda tidak memerlukan kode JavaScript apa pun untuk ini. Tulis ini di <head>bagian halaman HTML:

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

Segera setelah halaman dimuat pada 0 detik, Anda dapat pergi ke halaman Anda.

Yash Jain
sumber
1
ini sudah tercakup dalam jawaban yang diterima & komentar teratas - pertimbangkan untuk mengedit jawaban daripada memposting yang duplikat
RozzA
3

Sejauh yang saya mengerti, semua metode yang saya lihat sejauh ini untuk pertanyaan ini sepertinya menambah lokasi lama ke dalam sejarah. Untuk mengarahkan ulang halaman, tetapi tidak memiliki lokasi lama dalam sejarah, saya menggunakan replacemetode ini:

<script>
    window.location.replace("http://example.com");
</script>
Paul Ogilvie
sumber
2

Ini adalah solusi pengalihan dengan semua yang saya inginkan tetapi tidak dapat menemukan potongan bersih yang bagus untuk memotong & menempel.

Cuplikan ini memiliki sejumlah keunggulan:

  • memungkinkan Anda menangkap dan menyimpan setiap querystring params yang dimiliki orang di url mereka
  • membuat tautan menjadi tidak sesuai untuk menghindari caching yang tidak diinginkan
  • memungkinkan Anda memberi tahu pengguna nama-nama situs lama dan baru
  • menunjukkan hitungan mundur yang dapat diatur
  • dapat digunakan untuk pengalihan tautan dalam karena mempertahankan params

Cara Penggunaan:

Jika Anda memigrasikan seluruh situs maka pada server lama hentikan situs asli dan buat yang lain dengan file ini sebagai file index.html default di folder root. Edit pengaturan situs sehingga kesalahan 404 diarahkan ke halaman index.html ini. Ini menangkap siapa saja yang mengakses situs lama dengan tautan ke halaman sub-level dll.

Sekarang buka tag skrip pembuka dan edit alamat web oldsite dan newSite, dan ubah nilai detik sesuai kebutuhan.

Simpan dan mulai situs web Anda. Pekerjaan selesai - waktu untuk minum kopi.

<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<style>
body { margin: 200px; font: 12pt helvetica; }
</style>

</head>
<body>

</body>
<script type="text/javascript">

// Edit these to suit your needs.
var oldsite = 'http://theoldsitename.com'
var newSite = "https://thenewsitename.com";
var seconds = 20;  // countdown delay.

var path = location.pathname;
var srch = location.search;
var uniq = Math.floor((Math.random() * 10000) + 1);
var newPath = newSite + path + (srch === '' ? "?" + uniq : srch + "&" + uniq); 


document.write ('<p>As part of hosting improvements, the system has been migrated from ' + oldsite + ' to</p>');
document.write ('<p><a href="' + newPath + '">' + newSite + '</a></p>');
document.write ('<p>Please take note of the new website address.</p>');
document.write ('<p>If you are not automatically redirected please click the link above to proceed.</p>');
document.write ('<p id="dvCountDown">You will be redirected after <span id = "lblCount"></span>&nbsp;seconds.</p>');

function DelayRedirect() {
    var dvCountDown = document.getElementById("dvCountDown");
    var lblCount = document.getElementById("lblCount");
    dvCountDown.style.display = "block";
    lblCount.innerHTML = seconds;
    setInterval(function () {
        seconds--;
        lblCount.innerHTML = seconds;
        if (seconds == 0) {
            dvCountDown.style.display = "none";
            window.location = newPath;
        }
    }, 1000);
}
DelayRedirect()

</script>
</html>
Luaskan cuplikan

Wombat yang dikalahkan
sumber
1

Redirect menggunakan JavaScript, <noscript>seandainya JS dinonaktifkan.

<script>
    window.location.replace("https://google.com");
</script>

<noscript>
    <a href="https://google.com">Click here if you are not redirected automatically.</a>
</noscript>
Arya Beezadhur
sumber
0

Gunakan kode ini:

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

Harap perhatikan: taruh di tag kepala.

Amerika
sumber
Saya tidak tahu mengapa jawaban saya turun dua kali? itu berfungsi dengan baik
AmerllicA
Solusi yang sama diposting oleh Anda sudah diposting oleh banyak pengguna sebelumnya.
Rahul Shah
0

Anda dapat melakukannya di javascript:

location = "url";
GameMaster1928
sumber
0

Anda bisa menggunakan ini

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

mgcarpizo
sumber