자바스크립트를 이용한 리디렉션

자바스크립트를 이용한 리디렉션

Author : Jino Bae / Send Mail

티스토리를 탈퇴했는데 블로그에 연결된 페이지가 몇몇 있는것을 확인했습니다. 그래서 다시 가입해서 링크된 페이지인 경우 이쪽 사이트로 리디렉션 해주기로 판단했습니다. 티스토리 블로그도 운영할까 생각은 해봤지만 이미 지운걸 다시 하는건 귀찮네요… 구글에 찾아보니 사용자의 편의를 위한 자바스크립트로 리디렉션을 해주는 경우는 큰 문제가 없다고 나와있습니다.

만들어진 페이지

위와같이 만들었고 단순하게 HTML, CSS, JS를 이용하여 만들어진 페이지입니다. 다운로드


  • HTML 소스코드
<!DOCTYPE html>
<html lang="ko">

<head>
  <title>[##_page_title_##]</title>
  <meta name="title" content="[##_page_title_##] :: [##_title_##]" />
  <meta name="description" Content="[##_desc_##]" />
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="./style.css" />
  <style>
  .back_img {
      background-image:url(./images/background.gif);
      background-attachment:fixed;
      background-position:center center;
      background-repeat:no-repeat;
      background-size:cover;
      width:100%;
      height:100vh;
      text-align:center;
      position: fixed;
      left: 0;
      top: 0;
    }
    </style>
</head>

<body id="[##_body_id_##]" class="[##_var_colorSet_##]">
	<div class="back_img">
      <div class="back_img_mask">
          <h1 class="title">Redirect</h1>
          <p>페이지 이동중 입니다...</p>
      </div>
    </div>
</body>
</html>

스크립트는 back_img_mask 클래스가 적용된 div아래에 작성했습니다.

if(window.location.href == "https://old.web/1") {
    document.location.href = "https://new.web/article/hello.html";
}
else if(window.location.href == "https://old.web/2") {
    document.location.href = "https://new.web/article/bye.html";
}
else {
    document.location.href = "https://new.web";
}

위와같은 양식으로 작성되며 다수의 페이지의 리디렉션을 제공해 줄 수 있습니다.


  • CSS 소스코드
@charset "UTF-8";
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none}
fieldset,img{border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Noto Sans', sans-serif;color:#666} /* color값은 디자인가이드에 맞게사용 */
pre {font-family:'Noto Sans';}
a {color:#333;text-decoration:none}
a:active, a:hover {text-decoration:none}
a:active {background-color:transparent}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
body { font-family: 'Noto Sans';}

h1 {
    color:#fff;
    font-size:4em;
}

.back_img_mask {
    background-color: rgba(0,0,0,0.5);
    width:100%;
    height:100vh;
    position: fixed;
    left: 0;
    top: 0;
}

.title {
    width:100%;padding:0;margin:0 auto 20px 0;text-align:center; margin-top:37vh;
}

제가 주로 사용하는 영상 강조 스타일의 웹페이지 형식입니다.


Jino Bae
WRITTEN BY

Jino Bae

Digital is a purely man-made playground. That's why I like.
[email protected]


comments powered by Disqus