다른 웹 페이지로 리디렉션하려면 어떻게합니까?


7723

jQuery 또는 순수 JavaScript를 사용하여 한 페이지에서 다른 페이지로 사용자를 리디렉션하려면 어떻게해야합니까?


147
나는 계속 window.location = url; 그리고 window.location.href = url; 그것들은 어떻게 다릅니 까? 그들이 있습니까? BTW, window.location.replace (url)에 대해 몰랐습니다. 좋은.
David M. Miller

100
window.locationwindow.location.href동작 측면에서 와 동일 합니다. window.location객체를 반환합니다. 설정 .href되어 있지 않으면 window.location기본적으로 매개 변수를 변경합니다 .href. 결론 : 어느 쪽이든 괜찮습니다.
랩터

10
var url = "웹 사이트 이름"$ (location) .attr ( 'href', url);
미친 과학자

31
@MadScientist 그것은 거꾸로하는 방법입니다. 위치 객체는 HTML 요소가 아니며 jquery 객체를 사용하여 설정하는 것은 잘못된 것 같습니다. 직선 JS 코드가 너무 단순 할 때 왜 이것을 사용하겠습니까?
Juan Mendes

1
왜 리디렉션 하시겠습니까? 로그인 양식을 제출하지 않아야합니까? 대상 페이지에 논리가 없어도 양식을 다른 페이지에 제출할 수 있습니다.
Dimt

답변:


14805

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

// Another method for doing redirecting with JavaScript is this:
window.location = "https://stackoverflow.com";

78
제출 버튼 추가의 경우 false 반환; 또한 당신의 기능 내부
Abhi

134
문제는 자바 스크립트에 관한 것이지만 사용자가 자바 스크립트를 사용 중지 한 경우 메타 새로 고침을 장애 복구로 사용할 수 있다는 점에 주목할 가치가 있습니다.
Hoppe

22
@ NicolòMartini If (IE) document.write ( "");
Jeff Noel

48
이미 jQuery를 사용하고 있다면을 사용하십시오 $(location).attr('href',url);. window.location.href일부 브라우저에서 동작이 일정하지 않은 것 같습니다. 사실 Firefox 버전에서는 플랫 아웃이 작동하지 않습니다. window.locationIE 버전에서 직접 작동하지 않는 설정에 대한 이야기를 들었습니다 .
노즈

8
"더 좋습니다"를 제거해야합니다. 답변의 뒷부분에서 언급했듯이 최상의 솔루션은 상황에 맞는 것입니다. OP는 "자바 스크립트로 HTTP 리디렉션을 어떻게 에뮬레이트 할 수
있습니까

1684

경고 : 이 답변은 가능한 해결책으로 만 제공되었습니다. jQuery가 필요하기 때문에 분명히 최상의 솔루션 은 아닙니다 . 대신 순수한 JavaScript 솔루션을 선호하십시오.

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

63
이것은 질문에 대한 문자 그대로의 대답입니다. Jquery를 이미 사용 중이므로 이미로드 한 경우보다 대역폭 효율적이며 바로 가기를 사용하는 것이 더 명확합니다.
barrymac

27
더 중요한 것은, jQuery를 사용하여이 작업을 수행 할 수있는 방법이 있습니까? 이것은 window.location.href = url의 래퍼 일뿐입니다. 그러나 jQuery에 어떤 기능이 있다면, window.location.href = url; jQuery 코어가 현재 환경 (브라우저, OS 등)에서 작동하지 않습니까?
Chris

271
이런 식으로 jQuery를 방정식에 강제하는 것은 특히 어리 석고 무의미합니다. 특히 window.location요소가 아니기 때문에 속성이 없기 때문입니다.
Tim Down

10
어떻게 든 곳은 아직 최근의 jQuery 버전에서 작동 의심 .attr()실제로 특성 (즉, 설정 .setAttribute())
ThiefMaster

156
@deltaray 이것은 위에서 언급 한 것처럼 리디렉션하는 또 다른 방법 이 아닙니다 . 위치 객체 주위의 의미없는 래퍼입니다. 이것은 i.stack.imgur.com/ssRUr.gif를
JCM

676

페이지를 리디렉션하는 표준 "vanilla"JavaScript 방법

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

또는 더 간단하게 : ( window글로벌 이므로 )

location.href = 'newPage.html';

당신이 있기 때문에 여기 경우 손실 리디렉션, 계속 읽어 때 HTTP_REFERER를 :

(그렇지 않으면이 마지막 부분을 무시하십시오)


다음 섹션은 HTTP_REFERER많은 보안 조치 중 하나로 사용하는 사람들을위한 것입니다 (비록 훌륭한 보호 조치는 아니지만). 당신이 사용하는 경우 인터넷 익스플로러 8 이하 자바 스크립트 페이지 리디렉션 (같이 location.href 등)의 어떤 형태를 사용하는 경우, 이러한 변수는 손실됩니다.

아래에서 우리는 IE8 이하 의 대안을 구현하여 HTTP_REFERER를 잃지 않도록합니다. 그렇지 않으면 거의 항상을 사용할 수 있습니다 window.location.href.

HTTP_REFERERURL 붙여 넣기, 세션 등을 테스트 하면 요청이 합법적인지 여부를 알 수 있습니다 . ( 참고 : 의견에 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; 
    }
}

60
참고 사항 : 보안 조치로 리퍼러를 확인하는 것은 어려운 해결책입니다. duckduckgo.com/?q=referrer+
스푸핑

리퍼러 URL에 HTTP GET 세션 ID가있는 경우 세션이 유효한지 확인하는 데 사용할 수 있습니다.
Andrew Fox

@mcpDESIGNS 사용하려고 location.assign하셨나요? IE8을 사용하는 앱에서 사용하며 HTTP_REFERER헤더를 잃지 않습니다 .
Buzinas

적어도 2012 년에는 작동하지 않았거나 IE8 패치가 수정되어 아마도 들었습니다.
Mark Pieszak-Trilon.io

1
HTTP_REFERER에 대한 언급은 window.open의 문제를 이해하는 데 도움이되었으며 여기에서 해결책을 찾았습니다 : stackoverflow.com/questions/7580613/… . 그런데 IE11에서 문제가 있습니다!
Dov Miller

427

이를 수행하는 많은 방법이 있습니다.

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

8
window.navigate이전 IE 전용입니다 (Firefox / Chrome에서 지원하지 않음). 모든 옵션을 열거하려면에 대해 잊지 마십시오 document.location.
Rob W

document.location = document.referrer; 목록에 추가하십시오. 이것은 History.back처럼 작동하지 않고 페이지를 다시 새로 고칩니다.
Ali Humayun

.attr ()은 jQuery 3.0.0에서 작동하지 않습니다. 대신 .val ()을 사용하십시오.
Rivalu가

4
@ LéoLam Google이라는 검색 엔진이있는 이유입니다. :-) Google에서 각각을 검색하여 차이점을 찾을 수 있습니다. 당신은 무작위로 하나를 선택하고 싶지 않습니다.
나는 가장 바보 같은 사람이다


330

이것은 모든 브라우저에서 작동합니다.

window.location.href = 'your_url';

8
document.location.replace(redirectURL)첫 페이지를 브라우저 기록에 포함시키지 않으려 는 경우 에도 수행 할 수 있습니다.
jazzcat

298

당신이하려는 일에 대해 조금 더 설명하면 도움이 될 것입니다. 페이징 된 데이터를 생성하려는 경우이를 수행하는 방법에 대한 몇 가지 옵션이 있습니다. 직접 연결하려는 각 페이지에 대해 별도의 링크를 생성 할 수 있습니다.

<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 코드를 호출합니다. 아래 예에서는 새 페이지 데이터를 반환하는 웹 서비스가 있다고 가정합니다.

$(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
    });
});

252

또한 이것이 location.replace(URL)최선의 방법 이라고 생각 하지만 리디렉션에 대해 검색 엔진에 알리려면 (리디렉션을보기 위해 JavaScript 코드를 분석하지 않음) rel="canonical"메타 태그를 웹 사이트에 추가해야합니다 .

HTML 새로 고침 메타 태그가 포함 된 noscript 섹션을 추가하는 것도 좋은 해결책입니다. 이 JavaScript 리디렉션 도구 를 사용하여 리디렉션을 만드는 것이 좋습니다 . 또한 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 -->

228

그러나 누군가 홈 페이지로 다시 리디렉션하려면 다음 스 니펫을 사용할 수 있습니다.

window.location = window.location.host

개발, 준비 및 프로덕션과 같은 세 가지 환경이있는 경우 도움이됩니다.

Chrome 콘솔이나 Firebug 의 콘솔에이 단어를 넣으면이 window 또는 window.location 객체를 탐색 할 수 있습니다 .


window.location.replace (window.location.protocol + "//"+ window.location.host)
moala

13
window.location = '/'
Iftah

213

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. 경로 이름-경로는 웹 클라이언트가 액세스하려는 호스트 내의 특정 리소스에 대한 정보를 제공합니다. 예를 들어 stackoverflow.com/index.html입니다.

  5. query-쿼리 문자열은 경로 구성 요소를 따르며 리소스가 검색 목적 또는 처리 할 데이터 등의 용도로 활용할 수있는 정보 문자열을 제공합니다.

  6. 해시-URL의 앵커 부분에는 해시 부호 (#)가 포함됩니다.

이러한 Location 객체 속성을 사용하면 이러한 모든 URL 구성 요소에 액세스 할 수 있습니다

  1. hash -URL의 앵커 부분을 설정하거나 반환합니다.
  2. host -URL의 호스트 이름과 포트를 설정하거나 반환합니다.
  3. hostname -URL의 호스트 이름을 설정하거나 반환합니다.
  4. href가 -Sets 또는 반환 전체 URL.
  5. pathname -URL의 경로 이름을 설정하거나 반환합니다.
  6. 포트 -Sets 또는 반환 포트 번호에게 URL의 서버 사용합니다.
  7. protocol -URL의 프로토콜을 설정하거나 반환합니다.
  8. search -URL의 쿼리 부분을 설정하거나 반환

이제 페이지를 변경하거나 사용자를 다른 페이지로 리디렉션 href하려면 Location 객체 의 속성을 다음과 같이 사용할 수 있습니다

Location 객체의 href 속성을 사용할 수 있습니다.

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

위치 객체 에는이 세 가지 방법이 있습니다

  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 () 메서드를 사용하고 원래 문서로 다시 이동하는 옵션을 제공하고 싶습니다.

다음 과 같이 jQuery 를 사용하여 위치 객체 href 속성을 변경할 수 있습니다

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

따라서 사용자를 다른 URL로 리디렉션 할 수 있습니다.


203

기본적으로 jQueryJavaScript 프레임 워크 이며이 경우 리디렉션 과 같은 작업을 수행 하기 위해 순수 JavaScript 만 사용할 수 있으므로이 경우 바닐라 JavaScript를 사용하는 3 가지 옵션이 있습니다.

1) location replace를 사용 하면 현재 페이지 기록이 바뀌므로 뒤로 버튼을 사용 하여 원래 페이지로 돌아갈 수 없습니다.

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

2) location assign을 사용 하면 기록이 유지되고 뒤로 버튼을 사용하면 원래 페이지로 돌아갈 수 있습니다.

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

3) 위의 방법 중 하나를 사용하는 것이 좋지만 순수한 JavaScript를 사용하는 세 번째 옵션이 될 수 있습니다.

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

jQuery에서 함수를 작성하여 처리 할 수는 있지만 한 줄의 순수 JavaScript 함수이므로 권장하지 않습니다. 또한 이미 창 범위에있는 경우 창없이 위의 모든 함수를 사용할 window.location.replace("http://stackoverflow.com");수 있습니다.location.replace("http://stackoverflow.com");

또한 아래 이미지에 모두 표시합니다.

location.replace location.assign


1
경우에 따라 후자가 제대로 작동하지 않으므로 너무 사용 assign()하는 것이 좋습니다 href=.
marsze


169

시작하기 전에 jQuery는 DOM 조작에 사용되는 JavaScript 라이브러리입니다. 따라서 페이지 리디렉션에 jQuery를 사용해서는 안됩니다.

Jquery.com의 인용문 :

이전 버전의 브라우저에서는 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. 사용자가 리디렉션 페이지로 돌아갈 수있는 옵션을 사용하는 경우 리디렉션 페이지를 입력하면 다시 리디렉션됩니다. 따라서 리디렉션 옵션을 선택할 때이를 고려하십시오. 사용자가 작업을 수행 할 때만 페이지가 리디렉션되는 조건에서 뒤로 버튼 기록에 페이지가 있으면 괜찮습니다. 그러나 페이지가 자동으로 리디렉션되는 경우 사용자가 리디렉션이 보내는 페이지로 다시 돌아 가지 않고 뒤로 버튼을 사용할 수 있도록 바꾸기를 사용해야합니다.

메타 데이터를 사용하여 다음과 같이 페이지 리디렉션을 실행할 수도 있습니다.

메타 새로 고침

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

메타 위치

<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=ko&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>

두 페이지 예를 결합하면 재 라우팅이 반복되어 사용자가 사이트를 다시는 사용하고 싶지 않을 것입니다.


5
필요하지 않다고 말하여 jQuery에 대한 그의 요청을 처리합니다. JQuery에는 JavaScript에 유용한 유용한 바로 가기가 많이 있지만 리디렉션에 대한 바로 가기는 필요하지 않습니다. JQuery는 JavaScript 일뿐입니다. 더 이상 없습니다. 리디렉션을 호출하는 일반적인 방법은 jQuery를 사용하여 자신의 함수와 작동합니다.
Patrick W. McMahon

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

145

jQuery없이 다음과 같이 할 수 있습니다.

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

그리고 jQuery 만 원한다면 다음과 같이 할 수 있습니다.

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

JQuery는 미래의 브라우저 변경 / 더 이상 사용되지 않는 것을 제거 할 수 있으므로 더 좋은 아이디어 일 것입니다.
Epirocks

@Epirocks jQuery에 이것을 위해 설계된 API가 있다면, 그것은 유효한 이유 일 수 있습니다 (그러나이 API가 변경 될지 의심 스럽지만) 여기 예제는 비 DOM 객체를 래핑 할 수있는 jQuery의 기능을 잘못 사용하는 것입니다. 일부 방법은 여전히 ​​작동합니다.
1j01

'일부 방법은 여전히 ​​작동합니다'라는 사실은 추상화하여 의미하는 것입니다. 예. JQuery 없이는 할 수 있지만 JQuery 없이는 할 수 있습니다.
Epirocks

144

이것은 jQuery와 함께 작동합니다.

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

작동한다고해서 반드시해야한다는 의미는 아닙니다. 이것은 설정 주위에 무의미한 간접적입니다window.location
1j01

89

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 사용"은 정확하지 않습니다. 완전한 URL이 아니기 때문에 완전한 URL을 사용하는 예는 작동하지 않습니다. 프로토콜이 없으므로 상대 URL로 해석됩니다.
1j01

80

이 줄을 코드에 넣어야합니다.

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

jQuery가 없으면 JavaScript를 사용하십시오.

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

80

원래 질문 : "jQuery를 사용하여 리디렉션하는 방법"이 답은 jQuery >> 무료 사용 사례를 구현합니다.


JavaScript를 사용하여 페이지로 리디렉션하려면

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

또는 지연이 필요한 경우 :

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

jQuery를 사용하면 웹 페이지에서 쉽게 요소를 선택할 수 있습니다. 페이지에서 원하는 것을 찾은 다음 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를 사용하면 한두 줄만으로이 코드에 연결할 수 있습니다.


자바 스크립트 헤더 : 대신 초 단위로 시간을 할 수 있습니까?
PythonMaster202

79

그렇다면 문제는 웹 사이트로 리디렉션하는 방법이 아니라 리디렉션 페이지를 만드는 방법입니다.

이를 위해 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://stackoverflow.com

그리고 해당 링크로 이동하면 자동으로 stackoverflow.com 으로 리디렉션됩니다 .

설명서 링크

이것이 바로 자바 스크립트로 간단한 리디렉션 페이지 를 만드는 방법입니다

편집하다:

주의해야 할 것이 하나 있습니다. window.location.replace리디렉션 페이지에 적합하다고 생각하기 때문에 코드에 추가 했지만 사용 window.location.replace하고 리디렉션 할 때 브라우저에서 뒤로 버튼을 누르면 리디렉션 페이지로 돌아 가지 않는다는 것을 알아야합니다. 그 전에 페이지로 돌아가서이 작은 데모를보십시오.

예:

프로세스 : store home => google로 리디렉션 페이지 => google

Google에있을 때 : google => 브라우저의 뒤로 버튼 => 매장 저장

따라서 이것이 귀하의 요구에 적합하면 모든 것이 잘되어야합니다. 브라우저 기록에 리디렉션 페이지를 포함하려면

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

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

74

클릭 기능에서 다음을 추가하십시오.

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


57

jQuery가 필요하지 않습니다. 당신은 이것을 할 수 있습니다 :

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

그렇게 쉽습니다!

HTTP 요청을 시작하는 가장 좋은 방법은입니다 document.loacation.href.replace('URL').


52

먼저 올바르게 작성하십시오. 응용 프로그램 내에서 다른 링크에 대한 다른 링크를 탐색하려고합니다. 코드는 다음과 같습니다.

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

그리고 응용 프로그램 내에서 페이지를 탐색하려면 원하는 경우 코드도 있습니다.


52

다음과 같이 jQuery에서 리디렉션 할 수 있습니다.

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

45

JavaScript와 jQuery에서는 다음 코드를 사용하여 한 페이지를 다른 페이지로 리디렉션 할 수 있습니다.

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

45

ECMAScript 6 + jQuery, 85 바이트

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

제발 날 죽이지 마, 이건 장난이야 그것은 농담. 이건 농담이야.

이것은 "질문에 대한 해답을 제공한다"는 점에서 "jQuery를 사용하는"솔루션을 요청했다는 점에서이 방법으로 방정식에 강제로 포함시킨다.

Ferrybig은 분명히 농담을 설명해야합니다 (여전히 농담, 검토 양식에 제한된 옵션이 있다고 확신합니다).

다른 답변 jQuery의 사용 attr()상의를 location하거나 window불필요하게 객체.

이 답변은 또한 그것을 남용하지만, 더 우스운 방식으로. 이를 사용하여 위치를 설정하는 대신attr() 하는 함수를 검색하는 합니다.

함수는 jQueryCodejQuery가 없어도 이름이 지정 somethingCode되며 특히 언어가 아닌 경우 함수를 호출하는 것은 끔찍합니다.

"85 바이트"는 코드 골프에 대한 참조입니다. 골프는 분명히 코드 골프 밖에서해야 할 일이 아니며,이 답변은 실제로 골프가 아닙니다.

기본적으로 울부 짖습니다.


45

자바 스크립트 :

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

1
jQuery에 URL을 변수로 저장해야하지만 바닐라가 아닌 이유가 있습니까?
ESR

43

자바 스크립트 사용 :

방법 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");

41

다음은 시간 지연 리디렉션입니다. 지연 시간을 원하는대로 설정할 수 있습니다.

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

5
더 나은 방법 : setTimeout (function () {window.location.href = " google.com "}, 지연);
dikkini

39

이를 수행하는 세 가지 주요 방법이 있습니다.

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

과...

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

마지막 리디렉션은 검색 기록에서 리디렉션되기 전에 방문한 페이지를 저장하지 않기 때문에 기존 리디렉션에 가장 적합합니다. 그러나 JavaScript로 탭을 열려면 위의 것을 사용할 수 있습니다. 1

편집 : window접두사는 선택 사항입니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.