jQueryまたは純粋なJavaScriptを使用して、ユーザーをあるページから別のページにリダイレクトするにはどうすればよいですか？

jQueryを使用してリダイレクトするだけではありません

jQueryは不要でありwindow.location.replace(...)、HTTPリダイレクトを最もよくシミュレートします。

window.location.replace(...)良く使うよりあるwindow.location.hrefので、replace()ユーザーは決して終わることのないバックボタンの大失敗で立ち往生しませんつまり、セッション履歴に発信ページを保持しません。

リンクをクリックする人をシミュレートする場合は、 location.href

HTTPリダイレクトをシミュレートする場合は、 location.replace

例えば：

// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");

// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";

警告：この回答は、考えられる解決策として提供されたものにすぎません。jQueryが必要なため、明らかに最善のソリューションではありません。代わりに、純粋なJavaScriptソリューションをお勧めします。

$(location).attr('href', 'http://stackoverflow.com')

ページをリダイレクトする標準の「バニラ」JavaScriptの方法

window.location.href = 'newPage.html';

またはもっと簡単に:(windowグローバルであるため）

location.href = 'newPage.html';

リダイレクト時にHTTP_REFERERが失われているためにここにいる場合は、以下を読み続けてください。

（それ以外の場合は、この最後の部分を無視してください）

次のセクションはHTTP_REFERER、多くのセキュリティ対策の1つとして使用しているユーザー向けです（ただし、これは優れた保護対策ではありません）。Internet Explorer 8以下を使用している場合、JavaScriptページリダイレクト（location.hrefなど）を使用すると、これらの変数は失われます。

以下では、HTTP_REFERERが失われないように、IE8以下の代替を実装します。それ以外の場合は、ほとんどの場合、単純にを使用できますwindow.location.href。

テストHTTP_REFERER（URLを貼り付け、セッション、など）ができ、要求が正当であるかどうかを伝えるのに役立ちます。（注：コメントのdroopのリンクに示されているように、これらのリファラーを回避/スプーフィングする方法もあります）

シンプルなクロスブラウザーテストソリューション（Internet Explorer 9以降および他のすべてのブラウザーのwindow.location.hrefへのフォールバック）

使用法： redirect('anotherpage.aspx');

function redirect (url) {
    var ua        = navigator.userAgent.toLowerCase(),
        isIE      = ua.indexOf('msie') !== -1,
        version   = parseInt(ua.substr(4, 2), 10);

    // Internet Explorer 8 and lower
    if (isIE && version < 9) {
        var link = document.createElement('a');
        link.href = url;
        document.body.appendChild(link);
        link.click();
    }

    // All other browsers can use the standard window.location.href (they don't lose HTTP_REFERER like Internet Explorer 8 & lower does)
    else { 
        window.location.href = url; 
    }
}

これを行う方法はたくさんあります。

// window.location
window.location.replace('http://www.example.com')
window.location.assign('http://www.example.com')
window.location.href = 'http://www.example.com'
document.location.href = '/path'

// window.history
window.history.back()
window.history.go(-1)

// window.navigate; ONLY for old versions of Internet Explorer
window.navigate('top.jsp')


// Probably no bueno
self.location = 'http://www.example.com';
top.location = 'http://www.example.com';

// jQuery
$(location).attr('href','http://www.example.com') $(window).attr('location','http://www.example.com')
$(location).prop('href', 'http://www.example.com')

これはすべてのブラウザで機能します。

window.location.href = 'your_url';

あなたがやろうとしていることについてもう少し説明的であるならば、それは助けになるでしょう。ページングされたデータを生成しようとしている場合、これを行う方法にはいくつかのオプションがあります。直接アクセスできるようにするページごとに個別のリンクを生成できます。

<a href='/path-to-page?page=1' class='pager-link'>1</a>
<a href='/path-to-page?page=2' class='pager-link'>2</a>
<span class='pager-link current-page'>3</a>
...

例の現在のページは、コードとCSSで異なる方法で処理されることに注意してください。

ページングされたデータをAJAX経由で変更したい場合は、jQueryが役立ちます。これは、異なるページに対応する各アンカータグにクリックハンドラーを追加することです。このクリックハンドラーは、AJAXを介して次のページに移動してフェッチし、新しいデータでテーブルを更新するjQueryコードを呼び出します。以下の例は、新しいページデータを返すWebサービスがあることを前提としています。

$(document).ready( function() { $('a.pager-link').click( function() {
        var page = $(this).attr('href').split(/\?/)[1]; $.ajax({
            type: 'POST',
            url: '/path-to-service',
            data: page,
            success: function(content) {
               $('#myTable').html(content);  // replace
            }
        });
        return false; // to stop link
    });
});

これもlocation.replace(URL)最善の方法だと思いますが、リダイレクトについて検索エンジンに通知したい場合（JavaScriptコードを分析してリダイレクトを確認することはありません）rel="canonical"、Webサイトにメタタグを追加する必要があります。

HTML更新メタタグを含むnoscriptセクションを追加することも良い解決策です。このJavaScriptリダイレクトツールを使用してリダイレクトを作成することをお勧めします。また、HTTPリファラーを渡すためのInternetExplorerもサポートしています。

遅延のないサンプルコードは次のようになります。

<!-- Place 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://yourdomain.com/"/>
<noscript>
    <meta http-equiv="refresh" content="0;URL=https://yourdomain.com/">
</noscript>
<!--[if lt IE 9]><script type="text/javascript">var IE_fix=true;</script><![endif]-->
<script type="text/javascript">
    var url = "https://yourdomain.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 -->

ただし、誰かがホームページにリダイレクトしたい場合は、次のスニペットを使用できます。

window.location = window.location.host

開発、ステージング、本番の3つの異なる環境があると便利です。

これらの単語をChromeコンソールまたはFirebugのコンソールに配置するだけで、このウィンドウまたはwindow.locationオブジェクトを探索できます。

JavaScriptは、ブラウザのアドレスバーに表示されている現在のURLを取得および変更するための多くのメソッドを提供します。これらのメソッドはすべて、WindowオブジェクトのプロパティであるLocationオブジェクトを使用します。次のように、現在のURLを持つ新しいLocationオブジェクトを作成できます。

var currentLocation = window.location;

URLの基本構造

<protocol>//<hostname>:<port>/<pathname><search><hash>

1. プロトコル-インターネット上のリソースにアクセスするために使用されるプロトコル名を指定します。（HTTP（SSLなし）またはHTTPS（SSLあり））

2. hostname-ホスト名は、リソースを所有するホストを指定します。たとえば、www.stackoverflow.com。サーバーは、ホストの名前を使用してサービスを提供します。

3. ポート-インターネットまたはその他のネットワークメッセージがサーバーに到着したときに転送される特定のプロセスを認識するために使用されるポート番号。

4. pathname-パスは、Webクライアントがアクセスしたいホスト内の特定のリソースに関する情報を提供します。たとえば、stackoverflow.com /index.htmlです。

5. query-クエリ文字列はパスコンポーネントの後に続き、リソースが何らかの目的で（たとえば、検索のパラメータとして、または処理されるデータとして）利用できる情報の文字列を提供します。

6. hash-URLのアンカー部分には、ハッシュ記号（＃）が含まれます。

これらのLocationオブジェクトプロパティを使用すると、これらすべてのURLコンポーネントにアクセスできます。

1. hash -URLのアンカー部分を設定または返します。
2. host -URLのホスト名とポートを設定または返します。
3. hostname -URLのホスト名を設定または返します。
4. href -URL全体を設定または返します。
5. pathname -URLのパス名を設定または返します。
6. ポート-Setsまたは戻りポート番号URLのサーバーの用途。
7. protocol -URLのプロトコルを設定または返します。
8. search -URLのクエリ部分を設定または返します

ここで、ページを変更したり、ユーザーを他のページにリダイレクトしたりする場合は、次のhrefようにLocationオブジェクトのプロパティを使用できます。

Locationオブジェクトのhrefプロパティを使用できます。

window.location.href = "http://www.stackoverflow.com";

ロケーションオブジェクトにもこれらの3つのメソッドがあります

1. assign（） -新しいドキュメントをロードします。
2. reload（） -現在のドキュメントをリロードします。
3. replace（） -現在のドキュメントを新しいドキュメントに置き換えます

assign（）メソッドとreplaceメソッドを使用して、これらのような他のページにリダイレクトすることもできます

location.assign("http://www.stackoverflow.com");

location.replace("http://www.stackoverflow.com");

assign（）とreplace（）の違い-replace（）メソッドとassign（）メソッド（）の違いは、replace（）がドキュメント履歴から現在のドキュメントのURLを削除することです。つまり、使用できません。元のドキュメントに戻るための「戻る」ボタン。したがって、新しいドキュメントをロードする場合は、assign（）メソッドを使用し、元のドキュメントに戻るオプションを指定します。

あなたは使用してロケーションオブジェクトのhrefプロパティを変更することができますjQueryのを、このようにも

$(location).attr('href',url);

したがって、ユーザーを他のURLにリダイレクトできます。

基本的に、jQueryは単なるJavaScriptフレームワークであり、この場合のリダイレクトなどの一部を実行するには、純粋なJavaScriptを使用できます。その場合、バニラJavaScriptを使用する3つのオプションがあります。

1）場所の置換を使用すると、ページの現在の履歴が置換されます。つまり、戻るボタンを使用して元のページに戻ることはできません。

window.location.replace("http://stackoverflow.com");

2）場所の割り当てを使用すると、履歴が保持され、戻るボタンを使用すると、元のページに戻ることができます。

window.location.assign("http://stackoverflow.com");

3）以前の方法のいずれかを使用することをお勧めしますが、これは純粋なJavaScriptを使用する3番目のオプションである可能性があります。

window.location.href="http://stackoverflow.com";

jQueryで関数を記述して処理することもできますが、これは1行の純粋なJavaScript関数であるためお勧めしません。また、既にウィンドウスコープ内にいる場合は、ウィンドウなしで上記のすべての関数を使用window.location.replace("http://stackoverflow.com");できます。location.replace("http://stackoverflow.com");

また、下の画像にそれらすべてを示しています。

を使用して設定できるはずwindow.locationです。

例：

window.location = "https://stackoverflow.com/";

この件に関する過去の投稿は次のとおりです。別のWebページにリダイレクトするにはどうすればよいですか。

始める前に、jQueryはDOM操作に使用されるJavaScriptライブラリです。したがって、ページリダイレクトにjQueryを使用しないでください。

Jquery.comからの引用：

古いブラウザバージョンではjQueryは大きな問題なく実行される可能性がありますが、jQueryを積極的にテストしておらず、通常、jQueryに発生する可能性のあるバグを修正していません。

ここで見つかりました： https://jquery.com/browser-support/

したがって、jQueryは、下位互換性のための万能のソリューションではありません。

生のJavaScriptを使用する次のソリューションはすべてのブラウザーで機能し、長い間標準であるため、クロスブラウザーをサポートするためのライブラリは必要ありません。

このページは3000ミリ秒後にGoogleにリダイレクトされます

<!DOCTYPE html>
<html>
    <head>
        <title>example</title>
    </head>
    <body>
        <p>You will be redirected to google shortly.</p>
        <script>
            setTimeout(function(){
                window.location.href="http://www.google.com"; // The URL that will be redirected too.
            }, 3000); // The bigger the number the longer the delay.
        </script>
    </body>
</html>

さまざまなオプションは次のとおりです。

window.location.href="url"; // Simulates normal navigation to a new page
window.location.replace("url"); // Removes current URL from history and replaces it with a new URL
window.location.assign("url"); // Adds new URL to the history stack and redirects to the new URL

window.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
window.navigate("page.html"); // Same as window.location="url"

置換を使用する場合、戻るボタンは、履歴にないかのようにリダイレクトページに戻りません。ユーザーがリダイレクトページに戻れるようにする場合は、window.location.hrefまたはを使用しますwindow.location.assign。ユーザーがリダイレクトページに戻ることができるオプションを使用する場合は、リダイレクトページに入ると、リダイレクトされることに注意してください。したがって、リダイレクトのオプションを選択するときは、それを考慮に入れてください。ユーザーがアクションを実行したときにのみページがリダイレクトされる状況では、ページを[戻る]ボタンの履歴に含めても問題ありません。ただし、ページが自動リダイレクトされる場合は、replaceを使用して、ユーザーがリダイレクトが送信するページに強制的に戻らずに戻るボタンを使用できるようにする必要があります。

次のように、メタデータを使用してページリダイレクトを実行することもできます。

METAリフレッシュ

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

METAの場所

<meta http-equiv="location" content="URL=http://evil.com" />

ベースハイジャック

<base href="http://evil.com/" />

疑いを持たないクライアントを行きたくないページにリダイレクトするためのさらに多くの方法がこのページにあります（それらの1つがjQueryに依存しているわけではありません）：

https://code.google.com/p/html5security/wiki/RedirectionMethods

また、人々はランダムにリダイレクトされることを好まないことも指摘したいと思います。どうしても必要な場合にのみ、ユーザーをリダイレクトします。あなたがランダムに人々をリダイレクトし始めるならば、彼らは二度とあなたのサイトに行くことはありません。

次の段落は架空のものです。

また、悪意のあるサイトとして報告される場合があります。その場合、ユーザーがサイトへのリンクをクリックすると、ユーザーのブラウザがサイトが悪意のあるものであると警告する可能性があります。また、人々があなたのサイトで悪い経験を報告している場合、検索エンジンがあなたの評価を落とし始めるかもしれません。

リダイレクトに関するGoogleウェブマスターガイドラインを確認してください。 https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971

これは、ページからあなたを追い出す楽しい小さなページです。

<!DOCTYPE html>
<html>
    <head>
        <title>Go Away</title>
    </head>
    <body>
        <h1>Go Away</h1>
        <script>
            setTimeout(function(){
                window.history.back();
            }, 3000);
        </script>
    </body>
</html>

2つのページの例を組み合わせると、ルート変更の幼児ループが発生し、ユーザーがサイトを二度と使用したくないことが保証されます。

var url = 'asdf.html';
window.location.href = url;

あなたはjQueryなしでそれをすることができます：

window.location = "http://yourdomain.com";

また、jQueryのみが必要な場合は、次のように実行できます。

$jq(window).attr("location","http://yourdomain.com");

これはjQueryで機能します：

$(window).attr("location", "http://google.fr");

＃jQuery / JavaScriptメソッドを使用したHTMLページのリダイレクト

このサンプルコードを試してください：

function YourJavaScriptFunction()
{
    var i = $('#login').val();
    if (i == 'login')
        window.location = "Login.php";
    else
        window.location = "Logout.php";
}

完全なURLをとして指定する場合window.location = "www.google.co.in";。

元の質問：「jQueryを使用してリダイレクトする方法は？」、したがって、答えはjQuery >>無料のユースケースを実装します。

JavaScriptを使用してページにリダイレクトするには：

window.location.href = "/contact/";

または、遅延が必要な場合：

setTimeout(function () {
  window.location.href = "/contact/";
}, 2000);   // Time in milliseconds

jQueryを使用すると、Webページから要素を簡単に選択できます。ページ上で必要なものを見つけたら、jQueryを使用して特殊効果を追加したり、ユーザーアクションに反応したり、選択した要素の内外でコンテンツを表示および非表示にしたりできます。これらのタスクはすべて、要素またはイベントを選択する方法を知ることから始まります。

$('a,img').on('click',function(e){ e.preventDefault(); $(this).animate({
    opacity: 0 //Put some CSS animation here
  }, 500);
  setTimeout(function(){
    // OK, finished jQuery staff, let's go redirect
    window.location.href = "/contact/";
  },500);
});

誰かが10000行のコードでスクリプト/プラグインを書いたと想像してみてください。jQueryを使用すると、このコードに1、2行で接続できます。

次の行をコードに含める必要があります。

$(location).attr("href","http://stackoverflow.com");

jQueryがない場合は、JavaScriptを使用してください。

window.location.replace("http://stackoverflow.com");
window.location.href("http://stackoverflow.com");

それで、問題はリダイレクトページを作る方法であり、ウェブサイトにリダイレクトする方法ではありませんか？

これにはJavaScriptを使用するだけで済みます。動的リダイレクトページを作成する小さなコードを次に示します。

<script>
    var url = window.location.search.split('url=')[1]; // Get the URL after ?url=
    if( url ) window.location.replace(url);
</script>

したがって、このスニペットをredirect/index.htmlWebサイトのファイルに入れるだけで、そのように使用できるとしましょう。

http://www.mywebsite.com/redirect?url=http://stackoverflow.com

そして、あなたがそのリンクに行くと、それは自動的にあなたをstackoverflow.comにリダイレクトします。

ドキュメントへのリンク

そして、それがあなたがJavaScriptでシンプルなリダイレクトページを作る方法です

編集：

注意すべき点も1つあります。window.location.replaceリダイレクトページに適していると思うのでコードを追加しましたが、使用window.location.replaceしてリダイレクトされると、ブラウザの[戻る]ボタンを押してもリダイレクトページに戻らないことを知っておく必要があります。その前のページに戻って、この小さなデモを見てください。

例：

プロセス：ホームを保存=>ページをグーグルにリダイレクト=>グーグル

グーグルにいるとき：グーグル=>ブラウザの戻るボタン=>家に保管

したがって、これがニーズに合っている場合は、すべて問題ないはずです。ブラウザの履歴にリダイレクトページを含めたい場合は、これを置き換えてください

if( url ) window.location.replace(url);

と

if( url ) window.location.href = url;

クリック機能で、次を追加するだけです。

window.location.href = "The URL where you want to redirect";
$('#id').click(function(){
    window.location.href = "http://www.google.com";
});

これを試して：

location.assign("http://www.google.com");

例のコードスニペット。

jQueryは必要ありません。あなたはこれを行うことができます：

window.open("URL","_self","","")

とても簡単です！

HTTPリクエストを開始する最良の方法は、を使用することdocument.loacation.href.replace('URL')です。

最初に正しく書いてください。別のリンクのアプリケーションから別のリンクのアプリケーション内をナビゲートしたい。コードは次のとおりです。

window.location.href = "http://www.google.com";

また、アプリケーション内のページをナビゲートしたい場合は、必要に応じてコードも用意しています。

次のようにjQueryでリダイレクトできます。

$(location).attr('href', 'http://yourPage.com/');

JavaScriptの使用：

方法1：

window.location.href="http://google.com";

方法2：

window.location.replace("http://google.com");

jQueryの使用：

方法1：$（場所）

$(location).attr('href', 'http://google.com');

方法2：再利用可能な機能

jQuery.fn.redirectTo = function(url){
    window.location.href = url;
}

jQuery(window).redirectTo("http://google.com");

JavaScriptとjQueryでは、次のコードを使用して、あるページを別のページにリダイレクトできます。

window.location.href="http://google.com";
window.location.replace("page1.html");

ECMAScript 6 + jQuery、85バイト

$({jQueryCode:(url)=>location.replace(url)}).attr("jQueryCode")("http://example.com")

私を殺さないでください、これは冗談です。それは冗談だ。冗談だよ。

これは、「jQueryを使用して」解決策を求めたという意味で、「質問に対する答えを提供」しました。この場合、何らかの方法でそれを方程式に強制する必要があります。

Ferrybigは明らかに冗談を説明する必要があります（まだ冗談ですが、レビューフォームには限られたオプションがあると確信しています）ので、それ以上の苦労はありません：

他の答えはattr()、locationまたはwindowオブジェクトでjQueryを不必要に使用していることです。

この答えもそれを乱用しますが、もっとばかげた方法で。これを使用attr()して場所を設定する代わりに、これを使用して場所を設定する関数を取得します。

関数にはjQueryCodejQueryがないにもかかわらず名前が付けられており、関数の呼び出しはsomethingCode、特に何かが言語でさえない場合は、ひどいものです。

「85バイト」はコードゴルフへの参照です。ゴルフは明らかにコードゴルフ以外でやるべきことではなく、さらにこの答えは明らかに実際にはゴルフではありません。

基本的に、しわがれます。

Javascript：

window.location.href='www.your_url.com';
window.top.location.href='www.your_url.com';
window.location.replace('www.your_url.com');

Jquery：

var url='www.your_url.com';
$(location).attr('href',url); $(location).prop('href',url);//instead of location you can use window

これが時間遅延リダイレクトです。遅延時間は任意に設定できます。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Your Document Title</title>
    <script type="text/javascript">
        function delayer(delay) {
            onLoad = setTimeout('window.location.href = "http://www.google.com/"', delay);
        }
    </script>
</head>

<body>
    <script>
        delayer(8000)
    </script>
    <div>You will be redirected in 8 seconds!</div>
</body>

</html>

これを行うには、主に3つの方法があります。

window.location.href='blaah.com';
window.location.assign('blaah.com');

そして...

window.location.replace('blaah.com');

最後の1つは、検索履歴にリダイレクトされる前に移動したページを保存しないため、従来のリダイレクトに最適です。ただし、JavaScriptでタブを開きたいだけの場合は、上記のいずれかを使用できます。1

編集：windowプレフィックスはオプションです。