겁나 빠른 웹 레시피

리로딩 없이 URL 바꾸기 (음악앱)

수업소개

링크를 누르면 페이지 리로딩이 일어납니다. 이런 문제를 완화하기 위해서 나온 방법이 ajax입니다. 하지만 ajax로 변경된 정보에는 url로 접근하는 것이 어려웠습니다. html5에서는 이런 문제를 해결하기 위해서 history.pushState, history.replaceState라는 기능이 추가 되었습니다. 본 수업에서는 페이지를 부분적으로 변경하면서 URL을 변경할 수 있는 방법에 대해서 알아봅니다. 

사용기술

주요개념

미리보기

수업

예제

page1.html

<!doctype html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="page.css">
  <link rel="stylesheet" href="fontello/css/fontello.css">
</head>

<body>
  <article>
    <div class="content">
      consectetur adipisicing elit. Eum sequi consequuntur totam placeat tenetur similique, magni ratione vel delectus consequatur consectetur fugiat eius ipsam fuga ullam quas, voluptates ad nemo.
    </div>

  </article>
  <div class="control">
    <nav>
      <ul>
        <li><a href="page1.html">page1</a></li>
        <li><a href="page2.html">page2</a></li>
      </ul>
    </nav>
    <ul class="player">
      <li><a href="#play" class="play icon-play-circled"><span>play</span></a></li>
      <li><a href="#stop" class="pause icon-pause-circled"><span>pause</span></a></li>
    </ul>
  </div>
  <script src="page.js"></script>
</body>

</html>

page.js

$(document).ready(function () {
  $(document).on('click', '.control nav a', function (event) {
    history.pushState(null, null, event.target.href);
    $('article').load(event.target.href+' article>.content');
    event.preventDefault();
  })
  $(window).on('popstate', function(event){
    $('article').load(location.href+' article>.content');
  })
  var audio = new Audio('Tyburn - Eden.mp3');
  $(document).on('click', '.control .player .play', function(event){
    audio.play();
  });
  $(document).on('click', '.control .player .pause', function(event){
    audio.pause();
  });
});

page.css

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400');
*{
  box-sizing: border-box;
}
body{
  background-image:url(https://source.unsplash.com/category/nature/1600x900);
  background-size:cover;
  min-height:100vh;
  margin:0;
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
}
article{
  background-color: rgba(255, 255, 255, 0.59);
  color:black;
  max-width:20rem;
  position: fixed;
  top:50%;
  transform: translateY(-50%);
  font-size:1rem;
  padding:0.5rem;
  font-weight: 200;
}
.control{
  background-color: rgba(0, 0, 0, 0.5);
  color:white;
  position: fixed;
  bottom:0;
  width:100%;
  padding:0 1rem;
}
.control ul{
  list-style: none;
  padding-left:0;
}
.control li{
  display:inline-block;
  padding:0 0.5rem;
}
.control a{
  color:white;
  text-decoration: none;
}
.control>*{
  display: inline-block;
}
.control .player{
  position: absolute;
  right:1rem;
}
.control .player a{
  font-size:1.2rem;
}
.control .player a:hover{
  color:black;
}
.control .player a>span{
  display: none;  
}

 

댓글

댓글 본문
작성자
비밀번호
  1. 호동
    윈도우 사용자인데요. brackets에서 실시간 미리보기를 하면 강의내용과 같이 127.0.0.1로 안 나오고 file://로 나오는데 어떻게 해야 강의내용과 같이 나오는 건가요?
  2. 마엘
    굉장히 흥미롭게 잘 따라해봤습니다! 요즘 가장 재미있게 배우고 있는거 같아요 ㅎㅎ 감사합니다
버전 관리
egoing
현재 버전
선택 버전
graphittie 자세히 보기