[Javascript] 別のWebページにリダイレクトするにはどうすればよいですか?


Answers

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

jQueryは不要で、 window.location.replace(...)はHTTPリダイレクトをシミュレートするのに最適です。

replace()はセッション履歴に元のページを保持しないため、 window.location.replace(...)window.location.hrefを使用するよりも優れています。これは、ユーザーが終わりのないバックエンドに詰まることなく、ボタンの大失敗。

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

HTTPリダイレクトをシミュレートする場合は、 location.replace使用し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";
Question

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




まず正しく書いてください。 アプリケーション内で、別のリンク用の別のリンクを探したい場合。 ここにコードです:

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

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




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..com。 サーバーは、ホスト名を使用してサービスを提供します。

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

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

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

  6. hash - URLのアンカー部分。ハッシュ記号(#)が含まれます。

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

  1. hash - URLのアンカー部分を設定または返します。
  2. host :URLのホスト名とポートを設定する、または設定状態を返す。
  3. hostname - URLのホスト名を取得または設定します。
  4. href - URL全体を設定するか返す。
  5. pathname - URLのパス名を取得または設定します。
  6. port - サーバがURLに使用するポート番号を設定する、または設定値を返します。
  7. protocol - URLのプロトコルを設定または返します。
  8. search - URLのクエリー部分を設定または返す

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

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

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

ロケーションオブジェクトには、次の3つのメソッドもあります

  1. assign() - 新しい文書を読み込みます。
  2. reload() - 現在のドキュメントをリロードします。
  3. replace() - 現在のドキュメントを新しいドキュメントに置き換えます。

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

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

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

assign()とreplace()の違い - replace()メソッドとassign()メソッド()の違いは、replace()は現在のドキュメントのURLをドキュメント履歴から削除するということです。つまり、元の文書に戻るための「戻る」ボタン。 したがって、新しい文書を読み込みたい場合はassign()メソッドを使用し、元の文書に戻るオプションを与える場合は使用してください。

このようにjQueryを使用して位置オブジェクトのhrefプロパティを変更することもできます

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

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




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



基本的にjQueryJavaScriptのフレームワークです。この場合リダイレクトのようなものをいくつか実行するには、純粋なJavaScriptを使用できます。この場合、バニラJavaScriptを使用する3つのオプションがあります。

1)ロケーション置換を使用すると、ページの現在の履歴が置き換えられます。つまり、元のページに戻るために戻るボタンを使用することはできません。

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

2)ロケーションアサインを使用すると履歴が保存され、戻るボタンを使用すると元のページに戻ることができます:

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

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

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

また、jQueryで関数を記述することもできますが、これは単なるJavaScript関数なので、ウィンドウのスコープ内にある場合はwindow以外の関数をすべて使用できます(例: window.location.replace("http://.com"); location.replace("http://.com");ことができますlocation.replace("http://.com");

また、私はそれらのすべてを下の画像に示します:




ページをリダイレクトする標準的な "バニラ" JavaScript方法:

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

リダイレクト時にHTTP_REFERERを失っているのでここにいる場合は、次のように読んでください:

次のセクションは、多くの安全対策の1つとしてHTTP_REFERERを使用HTTP_REFERERている人向けです(しかし、これは大きな保護手段ではありません)。 Internet Explorer 8以下を使用してInternet Explorer 8場合は、JavaScriptページリダイレクト(location.hrefなど)のいずれかの形式を使用すると、これらの変数が失われます。

以下では、HTTP_REFERERを失わないようにIE8以下の代替手段を実装する予定です。 それ以外の場合は、ほとんどの場合window.location.href使用するwindow.location.hrefです。

HTTP_REFERER (URL貼り付け、セッションなど)に対するテストは、リクエストが正当なものかどうかを知るのに役立ちます。 注:コメント内のドループのリンクに記載されているように、これらのリファラーを回避/偽装する方法もあります)

簡単なクロスブラウザテストソリューション(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; 
    }
}






ECMAScript 6 + jQuery、85バイト

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

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

これは、「質問への答えを提供する」という意味で、「jQueryを使用する」というソリューションを求めていました。この場合は、何らかの形で方程式に強制する必要があります。

Ferrybigは明らかに冗談が説明されている必要があります(まだ冗談ですが、レビューフォームにはオプションが限られていると確信しています)。

その他の答えは、不必要にlocationまたはwindowオブジェクトにjQueryのattr()していlocation

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

この関数はjQueryCodeという名前が付けられていますが、 somethingCode jQueryはありませんが、関数somethingCodeを呼び出すのは恐ろしいことです。

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

基本的には、うんざりします。




これはjQueryで動作します:

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



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

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

それは簡単です!

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




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



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

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



あなたのクリック機能では、

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



#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";としたい場合はwindow.location = "www.google.co.in";




つかいます:

// 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')



*****オリジナルの質問があった - 「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行で接続できます。




始める前に、jQueryはDOM操作に使用されるJavaScriptライブラリです。 ですから、ページリダイレクトにjQueryを使用するべきではありません。

Jquery.comからの引用:

jQueryは古いバージョンのブラウザでは大きな問題を起こすことなく動作するかもしれませんが、jQueryを積極的にテストするのではなく、一般的には表示される可能性のあるバグを修正しません。

それはここに見つかりました: https://jquery.com/browser-support/ : 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/" />

あなたの疑いのないクライアントを、望んでいないかもしれないページにリダイレクトするもっと多くのメソッドがこのページにあります(それらのどれもjQueryに依存していません):

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

私は、人々がランダムにリダイレクトされるのは好きではないことを指摘したいと思います。 絶対に必要なときにのみリダイレクトしてください。 人々をランダムにリダイレクトし始めると、あなたのサイトには決して行きません。

次の部分は仮説です。

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

リダイレクトに関するGoogleのウェブマスター向けガイドライン: https://support.google.com/webmasters/answer/2721217?hl=en&ref_topic=6001971 : 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つのページの例を組み合わせると、再ルーティングの幼児ループが発生します。これは、ユーザーがあなたのサイトを再び使用したくないことを保証します。




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

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



これはすべてのブラウザで動作します:

window.location.href = 'your_url';



ここでは、時間遅延リダイレクトがあります。 あなたはあなたが望むものに遅延時間を設定することができます:

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



jQueryを使わずに以下のようにすることができます:

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

jQueryだけが必要な場合は、次のようにすることができます。

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



私はちょうどさらに新しいjQueryメソッドでこのばかげたことを更新しなければなりませんでした:

var url = 'http://www.fiftywaystoleaveyourlocation.com';
$(location).prop('href', url);



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

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

そして...

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

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

編集: window接頭辞はオプションです。




警告:この回答は単に解決策として提供されています。 それはjQueryを必要とするので 、明らかに最良の解決策ではありません 。 代わりに、純粋なJavaScriptソリューションを好む。

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



この行をコードに記述する必要があります:

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

jQueryをお持ちでない場合は、JavaScriptを使用してください:

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






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

window.location = window.location.host

開発、ステージング、および制作の3つの異なる環境がある場合に役立ちます。

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




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

<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"メタタグをあなたのウェブサイトに追加します。

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

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

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



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

これにはJavaScriptを使用する必要があります。 動的リダイレクトページを作成する小さなコードをいくつか紹介します。

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

つまり、このスニペットをあなたのウェブサイトのredirect/index.htmlファイルに入れて、そうすることができます。

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

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

ドキュメントへのリンク

JavaScriptを使って簡単なリダイレクトページを作成する方法です

編集:

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

例:

プロセス: home => google => googleに ページをリダイレクトする

google: google => ブラウザの戻るボタン => 店舗ホーム

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

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

〜と

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