HTMLページからリダイレクト

1580

ロード時に別のページにリダイレクトする基本的なHTMLページを設定することは可能ですか？

html  redirect  xhtml  meta  html-head 
— チョボ
ソース
28
最新のWeb標準に従い、クロスブラウザー機能を提供するために、私はこの高度なリダイレクトジェネレーター
— PatarticsMilánSep
1
.htaccessまたはIISの同等の機能を使用して、サーバー側のリダイレクトを実行します。そうすれば、物理ページが消えてもリダイレクトは機能します。
— flith 2017年
1
insider.zone/tools/client-side-url-redirect-generatorは、互換性を保証する素晴らしい小さなツールです。
— mackycheese21
2
そのInsider.zoneツールにより、リダイレクトがすべて小文字になり、404が発生しました。さらに、それについてページを作った人に連絡する方法はありません。
— Dan Jacobson、

回答:

2152

使ってみてください：

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

注：ヘッドセクションに配置します。

さらに、古いブラウザでは、正しく更新されない場合に備えてクイックリンクを追加すると、次のようになります。

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

として表示されます

リダイレクト

これにより、追加のクリックで目的の場所に到達できます。

— バレライ
ソース
151
メタリフレッシュの使用は、World Wide Web Consortium（W3C）では推奨されていません。参照：en.wikipedia.org/wiki/Meta_refresh。したがって、代わりにサーバーリダイレクトを使用することをお勧めします。JavaScriptが無効になっている可能性があるため、すべての携帯電話でJavaScriptリダイレクトが機能しない場合があります。
— NinethSense 2012
61
参考までに、00秒後に更新することを意味します。何が起こっているかを知るために、ユーザーにもう少し時間を与えることができます。
— Dennis
5
@Paul Draper、実行しているサーバーに依存
— Gal Margalit
9
XHTML5仕様を尊重するために、タグクロージャーを追加しました。
— ZenLulz 2013年
98
@NinethSenseのコメントにより、メタリフレッシュはJavaScriptリダイレクトのように見えます。メタ更新はJS ではなく、JSが無効になっていても機能します。
— Druska
1104

私はmetaとJavaScriptコードの両方を使用し、念のためリンクを設定します。

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

完全を期すために、可能であればサーバーのリダイレクトを使用するのが最善の方法だと思うので、301ステータスコードを送信します。これは、Apache.htaccessを使用するファイル、またはWordPressを使用する多数のプラグインを介して簡単に実行できます。私はすべての主要なコンテンツ管理システム用のプラグインもあると確信しています。また、サーバーにインストールされている場合、cPanelは301リダイレクトの設定が非常に簡単です。

— ビリー・ムーン
ソース
12
：このリダイレクトページでは、HTML5とはるかに簡潔にすることができpastebin.com/2qmfUZMk （すべてのブラウザで動作し、W3Cの検証を通過する）
— enyo
9
@enyo私はbodyタグなどを落とすのはあまり好きではありません。おそらくそれは検証され、おそらく一般的なブラウザで動作します。問題を引き起こすいくつかのフリンジケースがあると私は確信しています、そして利益は小さいようです。
— ビリームーン
9
@Frickerはクリックしていない可能性があるためです。彼らは、音声、タップ、または何らかの未知の方法でナビゲートすることによって制御している可能性があります。これは、リンクに標準のHTML A属性を使用するなどのコントロールの標準に従い、それを考え、それをリンクとして通信するためのアクセシビリティガイドラインです。また、click hereスクリーンリーダーの操作が難しくなるため、リンクを使用することはお勧めしません。リンクはリンク先を説明するテキストにする必要があります。そうすることで、ユーザーはリンク先に到達する前にどこに到着するかがわかりますが、それを操作します。
— ビリームーン
2
@BillyMoon、実際には、「クリック」の意味は、それらの意味もすべて含むようにすでに多重定義されています。「クリック」で問題ありません。
— Pacerier 2014年
2
@BillyMoonブラウザーはどのような状況で0値のメタリフレッシュを無視しますか？ありがとう！
— Gal Margalit
125

JavaScript

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

メタタグ

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

私は考えもあなたを助けるために正規のリンクを追加SEOの人々を：

<link rel="canonical" href="http://www.example.com/product.php?item=swedish-fish"/>
— lrkwz
ソース
3
リダイレクトに加えて正規リンクを使用しますか？en.wikipedia.org/wiki/Canonical_link_elementは、Googleが正規リンクの代わりにリダイレクトの使用を好むと述べています。
— LarsH
1
@larsHでは、SEOにとって最も重要なのは、リダイレクトリンクですか、それとも最終的な宛先ページでしょうか。
— Chakotay 2014
— Marc.2377
28

ヘッドの内側に配置された次のメタタグは、ブラウザにリダイレクトを指示します。

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

secondsをリダイレクト前に待機する秒数に置き換え、URLをリダイレクト先のURLに置き換えます。

または、JavaScriptを使用してリダイレクトすることもできます。これをスクリプトタグ内のページの任意の場所に配置します。

window.location = "URL"
— ピーターオルソン
ソース
28

これは、以前のすべての回答と、.htaccessを介したHTTPリフレッシュヘッダーを使用した追加のソリューションの合計です

1. HTTPリフレッシュヘッダー

まず、.htaccessを使用して、次のような更新ヘッダーを設定できます。

Header set Refresh "3"

これは、PHPでheader()関数を使用するのと同じ「静的」です

header("refresh: 3;");

このソリューションはすべてのブラウザでサポートされているわけではないことに注意してください。

2. JavaScript

代替URLの場合：

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

代替URLなし：

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

jQuery経由：

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

3.メタリフレッシュ

JavaScriptとリダイレクトヘッダーへの依存が望ましくない場合は、メタリフレッシュを使用できます。

代替URLの場合：

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

代替URLなし：

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

使用<noscript>：

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

必要に応じて

Billy Moonが推奨するように、何か問題が発生した場合の更新リンクを提供できます。

自動的にリダイレクトされない場合： <a href='http://example.com/alternat_url.html'>Click here</a>

資源

— ラーファさし
ソース
12
「Via jQuery」の例では、jQueryを使用していません。
— ジャスティンジョンソン
2
setTimeout文字列で呼び出さないでください。代わりに関数を渡します。
— Oriol
「.htaccessを介したHTTP更新ヘッダー」-HTMLページからのリダイレクトについて尋ねる質問に関連する理由
— 活動の削減
26

301リダイレクトを設定することをお勧めします。Googleのウェブマスターツールの記事301リダイレクトをご覧ください。

— アレックスK
ソース
13
質問は具体的に基本的な.htmlページを要求します。質問者は.htaccessなどを変更できないと思います（たとえば、Githubページまたは同様に制限されたホスティングを使用）。そのような場合、301は実行できません。
— ニコラスラウル
26

最新のWeb標準に従うことを楽しみにしている場合は、プレーンHTMLメタリダイレクトを回避する必要があります。サーバー側のコードを作成できない場合は、JavaScriptリダイレクトを選択する必要があります代わりに。

JavaScriptが無効なブラウザーをサポートするには、noscript要素にHTMLメタリダイレクト行を追加します。noscriptと組み合わせて、ネストされたメタリダイレクトcanonicalタグが同様にあなたの検索エンジンのランキングを助けます。

リダイレクトループを避けたい場合は、 location.replace() JavaScript関数ます。

適切なクライアント側のURLリダイレクトコードは次のようになります（Internet Explorer 8以下の修正と遅延なし）。

<!-- 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で廃止された理由の詳細が含まれています。
— daxelrod 2016
w3cがHTMLリダイレクトに対して提供する引数は、JavaScriptリダイレクトにも適用されます。さらに、JavaScriptリダイレクトでは、HTMLリダイレクトとは対照的に、JavaScriptを有効にする必要があります。したがって、HTMLリダイレクトは、両方を使用できる場合、JavaScriptリダイレクトよりも厳密に優れています。
— 最大
17

METAの「リダイレクト」を使用できます。

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

またはJavaScriptリダイレクト（すべてのユーザーがJavaScriptを有効にしているわけではないため、常にバックアップソリューションを準備してください）

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

ただし、オプションがある場合は、mod_rewriteを使用することをお勧めします。

— チェコ語
ソース
5
mod_rewrite（のみ）はApacheに適用されます。
— ポールドレイパー2014
1
Apacheについて：なぜmod_rewriteで、追加のモジュールなしの単純なRedirectディレクティブではないのですか？
— 2017年
14

ページが読み込まれるとすぐに、init関数が実行され、ページがリダイレクトされます。

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

    <body onload="init()">
    </body>
</html>
— kkk
ソース
10

HTMLコードの<HEAD>タグと</ HEAD>タグの間に次のコードを配置します。

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

上記のHTMLリダイレクトコードは、訪問者を別のWebページに即座にリダイレクトします。content="0;あなたはブラウザがリダイレクトする前に待機する秒数に変更してもよいです。

— ムハンマドサキブ
ソース
9

<head>セクションに次のコードを挿入します。

<meta http-equiv="refresh" content="0; url=http://address/">
— セビ
ソース
9

jQuery Mobileアプリケーションの操作中に問題が見つかりました。場合によっては、メタヘッダータグがリダイレクトを適切に実行できないことがあります（jQuery Mobileは各ページのヘッダーを自動的に読み取らないため、JavaScriptを配置しても、ラップしない限り効果がありません。複雑）。この場合の最も簡単な解決策は、次のように、JavaScriptリダイレクトをドキュメントの本文に直接挿入することです。

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

これはすべての場合にうまくいくようです。

— スコッツマン
ソース
8

すべてのタイプのページで機能する簡単な方法metaは、ヘッドにタグを追加することです。

<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.バネルジー
ソース
7

JavaScriptを使用する必要があります。次のコードをヘッドタグに配置します。

<script type="text/javascript">
 window.location.assign("http://www.example.com")
</script>
— クリスクロス07
ソース
7

HTTPステータスコード301または302によって自動リダイレクトできます。

PHPの場合：

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— ヴォーヴ
ソース
6
これは、HTMLページからのリダイレクトではありません。
— bugmenot123 2017年
7

ユーザーをindex.htmlからログインページの相対 URLにリダイレクトするスクリプトを使用しています

<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
上記のメソッドのリダイレクトURLは相対である場合があります。例：ログインページまたはWebサイトのルートにあるindex.htmlによって任意の相対ページにリダイレクトする場合。ドメイン名を知っている必要はありません。しかしwindow.location.href = "xxx"を設定すると、ドメイン名を知っている必要があります。
— ゾルファガリ
6

ちょうど良い尺度のために：

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

スクリプトの上にエコーがないことを確認してください。エコーがない場合は無視されます。 http://php.net/manual/en/function.header.php

— エドワード
ソース
9
質問は具体的に基本的な.htmlページを要求します。質問者は.htaccessなどを変更できないと思います（たとえば、Github Pagesまたは同様の制限されたホスティングを使用して）。そのような場合、PHPは使用できません。
— Nicolas Raoul 2013
PHP（Pre-Hypertext Processor）によって生成されたものを「基本的なHTMLページ」と見なします。質問のどこにも、ファイルの種類についての記述はありませんでした。
— エドワード
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
ソース
4

これにはJavaScriptコードは必要ありません。これを<head>HTMLページのセクションに記述します。

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

ページが0秒で読み込まれるとすぐに、ページに移動できます。

— ヤシュ・ジャイン
ソース
1
これはすでに承認済みの回答とトップコメントでカバーされています-重複する回答を投稿するよりも回答を編集することを検討してください
— RozzA
3

私が理解している限り、この質問でこれまでに見た方法はすべて、古い場所を履歴に追加しているようです。ページをリダイレクトするが、履歴に古い場所がない場合は、次のreplaceメソッドを使用します。

<script>
    window.location.replace("http://example.com");
</script>
— ポール・オギルビー
ソース
2

これは、私が欲しかったすべてのリダイレクトソリューションですが、カットアンドペーストするためのきれいなスニペットでは見つかりませんでした。

このスニペットには多くの利点があります。

  • 人々がURLに持っているクエリ文字列パラメータをキャッチして保持することができます
  • リンクを不必要にして、不要なキャッシュを回避します
  • 古いサイト名と新しいサイト名をユーザーに通知できます
  • 設定可能なカウントダウンを示しています
  • パラメータを保持するため、ディープリンクリダイレクトに使用できます

使い方：

サイト全体を移行した場合は、古いサーバーで元のサイトを停止し、このファイルをルートフォルダーのデフォルトのindex.htmlファイルとして別のサイトを作成します。サイトの設定を編集して、404エラーがこのindex.htmlページにリダイレクトされるようにします。これは、下位レベルのページへのリンクなどを使用して古いサイトにアクセスするすべてのユーザーをキャッチします。

次に、開始スクリプトタグに移動して、oldsiteおよびnewSite Webアドレスを編集し、必要に応じて秒の値を変更します。

Webサイトを保存して開始します。仕事完了-コーヒーの時間。

<!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が無効になっている場合は、JavaScriptを使用してリダイレクトします。

<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

このコードを使用してください：

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

注意してください： ヘッドタグに入れてください。

— アメリカ
ソース
なぜ私の回答が2回反対票を投じるのかわかりませんか？それは適切に動作します
— AmerllicA
あなたが投稿した同じソリューションは、すでに以前に複数のユーザーによって投稿されています。
— Rahul Shah
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.