HTML 페이지에서 리디렉션

1578

로드시 다른 페이지로 리디렉션하도록 기본 HTML 페이지를 설정할 수 있습니까?

html  redirect  xhtml  meta  html-head 
— 초보
소스
28
현대적인 웹 표준을 따르고 크로스 브라우저 기능을 제공하기 위해, 나는이 고급 사용하는 것을 선호 리디렉션 발생기
— Patartics 밀라노
1
.htaccess 또는 IIS와 동등한 기능을 사용하여 서버 측 리디렉션을 수행하십시오. 이렇게하면 실제 페이지가 사라지더라도 리디렉션이 계속 작동합니다.
— 벼랑
1
insider.zone/tools/client-side-url-redirect-generator 호환성을 보장하는 멋진 작은 도구입니다.
— mackycheese21
2
insider.zone 도구로 인해 모든 리디렉션이 소문자로 바뀌어 404가 발생했습니다. 또한 페이지를 만든 사람에게 연락 할 수있는 방법이 없습니다.
— Dan Jacobson

답변:

2150

다음을 사용하십시오.

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

참고 : 헤드 섹션에 배치하십시오.

또한 올바르게 새로 고쳐지지 않을 경우 빠른 링크를 추가하면 이전 브라우저의 경우 :

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

로 표시됩니다

리디렉션

그래야 추가 클릭으로 계속 이동할 수 있습니다.

— 발레리
소스
151
W3C (World Wide Web Consortium)에서는 메타 새로 고침을 사용하지 않는 것이 좋습니다. 참고 : en.wikipedia.org/wiki/Meta_refresh . 따라서 서버 리디렉션을 대신 사용하는 것이 좋습니다. JavaScript가 비활성화되었을 수 있으므로 JavaScript가 모든 휴대폰에서 작동하지 않을 수 있습니다.
— NinethSense
61
참고로, 00 초 후에 새로 고침 하는 수단입니다. 무슨 일이 일어나고 있는지 알 수있는 시간을 사용자에게 더 제공 할 수 있습니다.
— Dennis
5
@Paul Draper, 실행중인 서버에 따라 다릅니다.
— Gal Margalit
9
XHTML5 사양을 준수하기 위해 태그 클로저를 추가했습니다.
— ZenLulz
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태그 등 을 떨어 뜨리는 큰 팬이 아니다 . 아마도 그것은 유효성을 검사하고 아마도 일반적인 브라우저에서 작동합니다. 문제가 발생하는 프린지 케이스가 있다고 확신하며 그 이점은 작습니다.
— Billy Moon
9
@Fricker는 클릭하지 않았을 수 있습니다. 음성을 통해 제어하거나 두드 리거나 알 수없는 방식으로 탐색 중일 수 있습니다. 링크에 표준 HTML A 속성을 사용하는 것과 같은 제어 표준을 따르고 링크로 생각하고이를 링크로 전달하고 누군가와 상호 작용하는 방법을 규정하지 않는 것은 접근성 지침입니다. 또한 click here화면 판독기가 탐색하기가 더 어려우므로 링크를 사용하지 않는 것이 좋습니다. 링크는 목적지를 설명하는 텍스트에 있어야하므로 사용자는 목적지를 따라 가기 전에 도착할 위치를 알고 있지만 상호 작용합니다.
— Billy Moon
2
@BillyMoon, 사실 "클릭"의 의미는 이미 모든 의미를 포함하기 위해 과부하되었습니다. "클릭"이 잘됩니다.
— Pacerier
2
@BillyMoon 어떤 상황에서 브라우저가 0 값 메타 새로 고침을 무시합니까? 감사!
— Gal Margalit
125

자바 스크립트

<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
— Marc.2377
28

헤드 내부에있는 다음 메타 태그는 브라우저에 리디렉션하도록 지시합니다.

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

리디렉션하기 전에 대기 할 시간 (초)을 초로 바꾸고 리디렉션하려는 URL로 URL을 바꾸십시오.

또는 JavaScript로 리디렉션 할 수 있습니다. 이것을 페이지의 어느 곳에서나 스크립트 태그 안에 넣으십시오.

window.location = "URL"
— 피터 올슨
소스
28

이것은 모든 이전 답변과 .htaccess를 통한 HTTP 새로 고침 헤더를 사용하는 추가 솔루션의 합계입니다.

1. HTTP 새로 고침 헤더

우선, .htaccess를 사용하여 다음과 같이 새로 고침 헤더를 설정할 수 있습니다

Header set Refresh "3"

이것은 PHP 에서 header()함수 를 사용하는 것과 "정적"입니다

header("refresh: 3;");

이 솔루션이 모든 브라우저에서 지원되는 것은 아닙니다.

2. 자바 스크립트

대체 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 리디렉션을 참조하십시오 .

— 알렉스 케이
소스
13
질문은 구체적으로 기본 .html 페이지를 요구합니다. asker는 .htaccess 또는 이와 유사한 것을 수정할 수 없다고 생각합니다 (예 : Github Pages 또는 유사하게 제한된 호스팅 사용). 301은 그러한 경우에 불가능합니다
— Nicolas Raoul
26

최신 웹 표준을 따르기를 원한다면 일반 HTML 메타 리디렉션을 피해야합니다. 서버 측 코드를 만들 수 없으면 대신 JavaScript 리디렉션을 선택해야합니다 .

JavaScript가 비활성화 된 브라우저를 지원하려면 HTML 메타 리디렉션 줄을 noscript요소에 추가하십시오. 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
w3c가 HTML 경로 재 지정에 대해 제공하는 인수는 Javascript 경로 재 지정에도 적용됩니다. 또한 자바 스크립트 리디렉션은 HTML 리디렉션과 달리 자바 스크립트를 사용하도록 설정해야합니다. 따라서 HTML 리디렉션은 둘 다 사용할 수있는 경우 Javascript 리디렉션보다 훨씬 낫습니다.
— 최대
17

당신은 메타 "리디렉션"을 사용할 수 있습니다 :

<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에 적용됩니다.
— Paul Draper
1
아파치 (Apache)에 대하여 : 왜 모듈이없고 추가 모듈이없는 단순한 Redirect 지시어가 아닌 mod_rewrite?
— vog
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 리디렉션 코드는 방문자를 다른 웹 페이지로 즉시 리디렉션합니다. 는 content="0;브라우저가 리디렉션하기 전에 대기 시간을 초 단위로 변경 될 수 있습니다.

— 무하마드 사브 브
소스
9

다음 코드를 <head>섹션 에 넣으십시오 .

<meta http-equiv="refresh" content="0; url=http://address/">
— 세비
소스
9

jQuery Mobile 애플리케이션으로 작업하는 중에 문제가 발생했습니다. 경우에 따라 메타 헤더 태그가 올바르게 리디렉션되지 않습니다. 복잡성). 이 경우 가장 쉬운 해결책은 다음과 같이 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>
— 베너 지
소스
7

JavaScript를 사용해야합니다. head 태그에 다음 코드를 넣으십시오.

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

HTTP 상태 코드 301 또는 302로 자동 리디렉션 할 수 있습니다.

PHP의 경우 :

<?php
    Header("HTTP/1.1 301 Moved Permanently");
    Header("Location: http://www.redirect-url.com");
?>
— Vô Vị
소스
6
HTML 페이지에서 리디렉션되지 않습니다.
— bugmenot123
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은 상대적 일 수 있습니다. 예 : 웹 사이트 루트에서 index.html을 사용하여 로그인 페이지 또는 관련 페이지로 리디렉션하려고합니다. 도메인 이름을 몰라도됩니다. 그러나 window.location.href = "xxx"를 설정하면; 도메인 이름을 알아야합니다.
— Zolfaghari
6

좋은 측정을 위해 :

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

스크립트 위에 에코가 없는지 확인하십시오. 그렇지 않으면 무시됩니다. http://php.net/manual/en/function.header.php

— 에드워드
소스
9
질문은 구체적으로 기본 .html 페이지를 요구합니다. asker는 .htaccess 또는 이와 유사한 것을 수정할 수 없다고 생각합니다 (예 : Github Pages 또는 유사하게 제한된 호스팅 사용). 이 경우 PHP를 사용할 수 없습니다.
— Nicolas Raoul 1
PHP (Pre-Hypertext Processor)에서 생성 된 것을 "기본 HTML 페이지"로 생각합니다. 문제의 어느 곳에서도 파일 유형에 대해 언급하지 않았습니다.
— 에드워드
6

body 태그의 onload 이벤트를 사용하십시오.

<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

이를 위해 JavaScript 코드가 필요하지 않습니다. <head>HTML 페이지 섹션에 이것을 작성 하십시오.

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

페이지가 0 초에로드되는 즉시 페이지로 이동할 수 있습니다.

— 야쉬자인
소스
1
이 답변은 이미 허용 된 답변 및 인기 댓글에서 다룹니다. 중복 된 답변을 게시하는 것보다 답변을 수정하는 것이
— 좋습니다
3

내가 이해하는 한,이 질문에 대해 지금까지 본 모든 방법은 이전 위치를 역사에 추가하는 것처럼 보입니다. 페이지를 리디렉션하지만 기록에 이전 위치가 없으면 다음 replace방법을 사용합니다 .

<script>
    window.location.replace("http://example.com");
</script>
— 폴 오길비
소스
2

이것은 내가 원하는 모든 것을 가진 리디렉션 솔루션으로 잘라내어 붙여 넣을 수있는 깔끔한 스 니펫에서 찾을 수 없습니다.

이 스 니펫에는 여러 가지 장점이 있습니다.

  • 사람들이 자신의 URL에 가지고있는 모든 쿼리 문자열 매개 변수를 잡고 유지할 수 있습니다.
  • 원치 않는 캐싱을 피하기 위해 링크 unqiue
  • 기존 사이트 이름과 새 사이트 이름을 사용자에게 알려줍니다
  • 설정 가능한 카운트 다운을 보여줍니다
  • 매개 변수를 유지하므로 딥 링크 리디렉션에 사용할 수 있습니다.

사용하는 방법:

전체 사이트를 이전 서버로 마이그레이션 한 경우 이전 서버에서 원래 사이트를 중지하고 루트 폴더에서이 파일을 기본 index.html 파일로 다른 사이트를 작성하십시오. 404 오류가이 index.html 페이지로 리디렉션되도록 사이트 설정을 편집하십시오. 하위 레벨 페이지 등의 링크를 통해 이전 사이트에 액세스하는 모든 사람을 잡습니다.

이제 시작 스크립트 태그로 이동하여 oldsite 및 newSite 웹 주소를 편집하고 필요에 따라 초 값을 변경하십시오.

웹 사이트를 저장하고 시작하십시오. 작업 완료-커피 시간.

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

주의하십시오 : 헤드 태그에 넣으십시오.

— AmerllicA
소스
왜 내 대답이 두 번 다운 투트되는지 몰라? 제대로 작동합니다
— AmerllicA
귀하가 게시 한 동일한 솔루션이 이미 여러 사용자가 이미 게시했습니다.
— Rahul Shah
0

이것을 사용할 수 있습니다

<meta http-equiv="refresh" content="0; url=http://newpage.com/" />
스 니펫 확장

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