리로딩 없이 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;  
}