HTML sayfasından yönlendirme


1579

Yüklenen başka bir sayfaya yönlendirmek için temel bir HTML sayfası ayarlamak mümkün müdür?


28
Modern web standartlarını takip etmek ve tarayıcılar arası işlevsellik sağlamak için bu gelişmiş yönlendirme jeneratörünü
Patartics Milán

1
Sunucu tarafı yeniden yönlendirme yapmak için .htaccess veya IIS eşdeğerini kullanın. Bu şekilde, fiziksel sayfanız kaybolsa bile yönlendirme yine de çalışır.
flith


2
Bu insider.zone aracı, yönlendirmelerimi küçük harfe çevirerek 404'lere neden oldu. Ayrıca, bu sayfa hakkında kimin yaptığıyla iletişim kurmanın bir yolu yoktur.
Dan Jacobson

Yanıtlar:


2150

Kullanmayı deneyin:

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

Not: Baş bölümüne yerleştirin.

Ayrıca, eski tarayıcılar için doğru şekilde yenilenmemesi durumunda hızlı bir bağlantı eklerseniz:

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

Olarak görünecek

Yönlendirme

Bu, ek bir tıklama ile gittiğiniz yere gitmenize izin verecektir.


151
Meta yenilemenin kullanımı World Wide Web Konsorsiyumu (W3C) tarafından önerilmez. Ref: en.wikipedia.org/wiki/Meta_refresh . Bu yüzden bunun yerine sunucu yönlendirmesini kullanmanız önerilir. JavaScript devre dışı bırakılabileceği için JavaScript yönlendirmeleri tüm cep telefonlarında çalışmayabilir.
NinethSense

61
FYI, 00 saniye sonra yenileme aracı. Neler olduğunu bilmek için kullanıcıya biraz daha zaman vermek isteyebilirsiniz.
Dennis

5
@Paul Draper, çalıştırdığınız sunucuya bağlıdır
Gal Margalit

9
XHTML5 özelliklerine uymak için etiket kapanışını ekledim.
ZenLulz

98
@ NinethSense'in yorumu meta yenilemeyi bir JavaScript yönlendirmesi gibi gösteriyor. Meta yenileme JS değildir ve JS devre dışı bırakıldığında da çalışmaya devam eder.
Druska

1104

Ben ikisini de kullanmak istiyorum meta ve JavaScript kodunu ve sadece bu durumda bir bağlantı olurdu.

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

Tamlık için, mümkünse, sunucu yönlendirmelerini kullanmak için en iyi yol olduğunu düşünüyorum, bu yüzden 301 durum kodu gönderin . Apache.htaccess kullanan dosyalar veya WordPress kullanan çok sayıda eklenti aracılığıyla bunu yapmak kolaydır . Tüm önemli içerik yönetim sistemleri için de eklentiler olduğundan eminim. Ayrıca, sunucunuzda yüklü ise, cPanel 301 yönlendirmeleri için çok kolay bir yapılandırmaya sahiptir.


12
Bu yönlendirme sayfası HTML5 ile çok daha özlü olabilir: pastebin.com/2qmfUZMk (tüm tarayıcılarda çalışır ve w3c doğrulamasını geçer)
enyo

9
@enyo bodyEtiketleri ve benzerlerini bırakmanın büyük bir hayranı değilim . Belki de doğrular ve ortak tarayıcılarda çalışır. Eminim sorunlara neden olan bazı saçaklar var ve fayda küçük görünüyor.
Billy Moon

9
@Fricker çünkü tıklamıyor olabilirler. Sesle kontrol ediyor, dokunarak veya bilinmeyen bir şekilde geziniyor olabilirler. Bağlantılar için standart HTML A özniteliğini kullanmak ve bunu düşünmek ve bir bağlantı olarak iletmek ve birisinin onunla nasıl etkileşime girmesi gerektiğini reçete etmemek gibi denetimler için standartları izlemek, erişilebilirlik kılavuzudur. Ayrıca, click hereekran okuyucuda gezinmek daha zor olacağından, bir bağlantıya sahip olmak önerilmez. Bağlantılar hedefi açıklayan metinde olmalıdır, böylece kullanıcı onu takip etmeden önce nereye varacaklarını bilir ve bununla etkileşime girer.
Billy Moon

2
@BillyMoon, Aslında "click" kelimesinin anlamı zaten bu anlamların tümünü içerecek şekilde aşırı yüklenmiş. "tıklayın" iyi olacak.
Pacerier

2
@BillyMoon hangi durumlarda tarayıcı 0 değer meta yenilemeyi yoksayar? Teşekkürler!
Gal Margalit

125

JavaScript

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

Meta etiketi

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

40

Ben ediyorum da senin yardım etmek standart bir bağlantı eklemek SEO insanlar:

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>

3
Yönlendirmeye ek olarak standart bir bağlantı mı kullanacaksınız? en.wikipedia.org/wiki/Canonical_link_element , Google'ın standart bir bağlantı yerine bir yönlendirme kullanmayı tercih ettiğini söylüyor .
LarsH

1
@larsH Peki SEO için en önemli şey, yönlendirme bağlantısı mı yoksa son hedef sayfa mı?
Chakotay


28

Kafanın içine yerleştirilen aşağıdaki meta etiket, tarayıcıya yeniden yönlendirmesini söyleyecektir:

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

Saniyeleri, yönlendirilmeden önce beklenecek saniye sayısı ile değiştirin ve URL'yi, yönlendirmesini istediğiniz URL ile değiştirin.

Alternatif olarak, JavaScript ile yeniden yönlendirebilirsiniz. Bunu bir komut dosyası etiketinin içine sayfanın herhangi bir yerine yerleştirin:

window.location = "URL"

28

Bu, önceki yanıtların toplamı ve .htaccess aracılığıyla HTTP Yenileme Üstbilgisi kullanan ek bir çözümdür

1. HTTP Yenileme Başlığı

Her şeyden önce, böyle bir yenileme üstbilgisi ayarlamak için .htaccess kullanabilirsiniz

Header set Refresh "3"

Bu, PHP'deheader() işlevi kullanmanın "statik" eşdeğeridir

header("refresh: 3;");

Bu çözümün her tarayıcı tarafından desteklenmediğini unutmayın.

2. JavaScript

Alternatif bir URL ile :

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

Alternatif bir URL olmadan:

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

JQuery ile:

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

3. Meta Yenileme

JavaScript ve yönlendirme başlıklarına bağımlılık istenmediğinde meta yenilemeyi kullanabilirsiniz

Alternatif bir URL ile:

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

Alternatif bir URL olmadan:

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

Kullanma <noscript>:

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

İsteğe bağlı olarak

Billy Moon tarafından önerildiği gibi, bir şeyler ters giderse bir yenileme bağlantısı sağlayabilirsiniz:

Otomatik olarak yönlendirilmiyorsanız: <a href='http://example.com/alternat_url.html'>Click here</a>

kaynaklar


12
"Via jQuery" örneğiniz herhangi bir jQuery kullanmaz.
Justin Johnson

2
setTimeoutBir dize ile arama yapmayın . Bunun yerine bir işlev iletin.
Oriol

".Htaccess üzerinden HTTP Yenileme Başlığı" - neden HTML sayfasından yönlendirme hakkında soru sormak önemlidir?
aktiviteyi azaltma

26

301 yönlendirmesi ayarlamak daha iyi olur . 301 yönlendirmeleri için Google'ın Web Yöneticisi Araçları makalesine bakın .


13
Soru özellikle temel bir .html sayfası ister. Sanırım asker .htaccess veya benzerini değiştiremez (örneğin Github Pages veya benzer şekilde sınırlı barındırma kullanarak). Bu gibi durumlarda 301 yapılamaz
Nicolas Raoul

26

Modern web standartlarına uymayı dört gözle bekliyorsanız, düz HTML meta yönlendirmelerinden kaçınmalısınız. Sunucu tarafı kodu oluşturamazsanız, bunun yerine JavaScript yönlendirmesini seçmelisiniz .

JavaScript devre dışı tarayıcıları desteklemek için bir noscriptöğeye bir HTML meta yönlendirme satırı ekleyin . noscriptİle birlikte iç içe meta yönlendirme canonicaletiketi de arama motoru sıralamalarını yardımcı olacaktır.

Yönlendirme döngülerinden kaçınmak istiyorsanız, location.replace()JavaScript işlevini kullanmalısınız .

Uygun bir istemci tarafı URL yönlendirme kodu şuna benzer (Internet Explorer 8 ve daha düşük bir düzeltmeyle ve gecikmeden):

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

2
w3.org/TR/WCAG10-HTML-TECHS/#meta-element<meta http-equiv="refresh" , W3C tarafından neden kullanımdan kaldırıldığına dair ayrıntıları içerir .
daxelrod

W3c'nin HTML yönlendirmelerine karşı sağladığı argümanlar Javascript yönlendirmeleri için de geçerlidir. Ayrıca, Javascript yönlendirmeleri HTML yönlendirmelerinin aksine javascript'in etkin olmasını gerektirir. Bu nedenle, HTML yönlendirmeleri, her ikisinin de kullanılabileceği durumlarda Javascript yönlendirmelerinden kesinlikle daha iyidir.
Maksimum

17

Bir META "yönlendirmesi" kullanabilirsiniz:

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

veya JavaScript yönlendirmesi (tüm kullanıcıların JavaScript'in etkin olmadığını unutmayın, bu nedenle onlar için her zaman bir yedekleme çözümü hazırlayın)

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

Ancak seçeneğiniz varsa mod_rewrite kullanmanızı tavsiye ederim .


5
mod_rewrite (yalnızca) Apache için geçerlidir.
Paul Draper

1
Apache ile ilgili: Neden mod_rewrite, basit bir yönlendirme direktifi ve ekstra modül olmadan değil?
vog

14

Sayfa yüklenir yüklenmez initişlev tetiklenir ve sayfa yeniden yönlendirilir:

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

    <body onload="init()">
    </body>
</html>

10

HTML kodunuzun <HEAD> ve </HEAD> etiketleri arasına aşağıdaki kodu yerleştirin:

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

Yukarıdaki HTML yönlendirme kodu, ziyaretçilerinizi anında başka bir web sayfasına yönlendirecektir. Bu content="0;, tarayıcının yeniden yönlendirmeden önce beklemesini istediğiniz saniye sayısına değiştirilebilir.


9

Aşağıdaki kodu <head>bölüme yazınız:

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

9

Bir jQuery Mobile uygulaması ile çalışırken bir sorun buldum , burada bazı durumlarda Meta başlık etiketim düzgün bir şekilde yeniden yönlendirme elde edemedi (jQuery Mobile her sayfa için otomatik olarak başlıkları okumuyor, bu yüzden JavaScript'i buraya koymadıkça da etkisiz karmaşıklığı). Bu durumda en kolay çözümü, JavaScript yönlendirmesini doğrudan belgenin gövdesine koymak oldu:

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

Bu benim için her durumda işe yarıyor gibi görünüyor.


8

Tüm sayfa türleri için çalışan basit yol, yalnızca metakafaya bir etiket eklemektir :

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

7

JavaScript kullanmalısınız. Aşağıdaki kodu başlık etiketlerinize yerleştirin:

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

7

HTTP Durum Kodu 301 veya 302 ile otomatik olarak yeniden yönlendirebilirsiniz.

PHP için:

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>

6
Bu bir HTML sayfasından gelen bir yönlendirme değildir.
bugmenot123

7

Kullanıcı index.html giriş sayfası göreli url yönlendiren bir komut dosyası kullanın

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

1
Yukarıdaki yöntemde yönlendirme URL'si göreli olabilir. örneğin: Giriş sayfasına veya web sitesinin kökündeki index.html ile ilgili herhangi bir sayfaya yönlendirmek istiyorsunuz. alan adınızı bilmenize gerek yok. ancak window.location.href = "xxx" ayarını yaptığınızda; alan adını bilmelisiniz.
Zolfaghari

6

Sadece iyi bir ölçü için:

<?php
header("Location: example@example.com", TRUE, 303);
exit;
?>

Komut dosyasının üzerinde yankı olmadığından emin olun, aksi takdirde yok sayılır. http://php.net/manual/en/function.header.php


9
Soru özellikle temel bir .html sayfası ister. Sanırım asker .htaccess veya benzerini değiştiremez (örneğin Github Pages veya benzer şekilde sınırlı barındırma kullanarak). PHP bu gibi durumlarda kullanılamaz.
Nicolas Raoul

Ben PHP (Köprü Öncesi Metin İşlemci) tarafından üretilen bir şey bir "temel HTML sayfası" düşünün. Sorunun hiçbir yerinde bir dosya türünden bahsedilmedi.
Edward

6

Gövde etiketinin onload olayını kullanmanız yeterlidir:

<body onload="window.location = 'http://example.com/'">


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>

4

Bunun için herhangi bir JavaScript koduna ihtiyacınız yoktur. Bunu <head>HTML sayfasının bölümüne yazın :

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

Sayfa 0 saniyede yüklenir yüklenmez sayfanıza gidebilirsiniz.


1
Bu zaten kabul cevap & En iyi yorumları kaplıdır - yinelenen bir gönderme daha cevabını düzenleme düşünün
RozzA

3

Onları anladığım kadarıyla, bu soru için şimdiye kadar gördüğüm tüm yöntemler eski konumu tarihe ekliyor gibi görünüyor. Sayfayı yeniden yönlendirmek, ancak geçmişte eski bir konuma sahip olmamak için replaceyöntemi kullanıyorum:

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

2

Bu, istediğim her şeye sahip bir yönlendirme çözümüdür, ancak kesip yapıştırmak için güzel bir temiz snippet'te bulamadı.

Bu snippet'in bir takım avantajları vardır:

  • millet kendi url üzerinde sahip herhangi bir sorgu dizesi params yakalamak ve tutmak sağlar
  • istenmeyen önbellekleme önlemek için bağlantı benzersiz yapar
  • kullanıcıları eski ve yeni site adları hakkında bilgilendirmenizi sağlar
  • ayarlanabilir bir geri sayım gösterir
  • parametrelerini koruduğu için derin bağlantı yönlendirmeleri için kullanılabilir

Nasıl kullanılır:

Tüm siteyi taşıdıysanız, eski sunucuda orijinal siteyi durdurun ve kök klasörde varsayılan index.html dosyası olarak bu dosyayla başka bir site oluşturun. Site ayarlarını, herhangi bir 404 hatası bu index.html sayfasına yönlendirilecek şekilde düzenleyin. Bu, eski siteye bir alt sayfa sayfasına bağlantıyla erişen herkesi yakalar.

Şimdi açılış komut dosyası etiketine gidin ve eski site ile newSite web adreslerini düzenleyin ve saniye değerini gerektiği gibi değiştirin.

Web sitenizi kaydedin ve başlatın. İş bitti - kahve zamanı.

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


1

<noscript>JS devre dışı bırakılmışsa JavaScript kullanarak yeniden yönlendirin .

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

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

0

Bu kodu kullanın:

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

Lütfen dikkat: kafa etiketine koyun.


Cevabımın neden iki kez düştüğünü bilmiyorum? düzgün çalışıyor
AmerllicA

Gönderdiğiniz aynı çözüm, daha önce birden çok kullanıcı tarafından zaten yayınlanmıştır.
Rahul Shah


Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.