ykyk1218/file0.txt

## file0.txt
history.pushState(state, title, url)

## file1.txt
history.replaceState(state, title, url)

## file2.txt
$(window).on('popstate', function(e) { <ブラウザの戻る、進むで処理したい内容> }

## file3.html
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <script src="./purl.js"></script>
    <script>
      var page = $.url().param('page')
      if(!page) {
        page = 1
      }
      $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
          dateType: "json",
          success: function(msg) {
            html = ""
            for(var i=0; i<msg.length; i++) {
              html = html + msg[i].title + "<br>"
            }
            $("#qiita").html(html)
          }
        });

        $("#next").on('click', function(e) {
          e.preventDefault
          page = parseInt(page) + 1;
          loadData(page)
         });

         //ブラウザ操作
         $(window).on('popstate', function(e) {
           if (!e.originalEvent.state) return
           //$.url()で今のURLが取れるはずだけど、ブラウザバッグだと
　　　　　 //うまくとれない
           //location.pathnameだとURLが取れるのでこれを引数で渡す
           var url = $.url(location.pathname)
           var currentPage = url.param('page');
           if (currentPage == page) {
             return;
           }else{
             if(!currentPage) {
               page = 1
             }else{
               page = currentPage
             }
             loadData(page)
           }
         });

       });

       function loadData(page) {
         console.log(page)
         //url書き換え
         history.pushState(page, "Qiita" + page + "ページ目", "?page=" + page);
         $.ajax({
           type: "GET",
           url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
           dateType: "json",
           success: function(msg) {
             html = ""
             for(var i=0; i<msg.length; i++) {
               html = html + msg[i].title + "<br>"
             }
             $("#qiita").html(html)
            }
         });
       }
    </script>
  </head>
  <body>
    <div id="qiita"></div>
    <div><a id="next" href="javascript:;">次へ</a></div>
  </body>
</html>


## file3.txt
<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
    <script src="./purl.js"></script>
    <script>
      var page = $.url().param('page')
      if(!page) {
        page = 1
      }
      $(document).ready(function() {
        $.ajax({
          type: "GET",
          url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
          dateType: "json",
          success: function(msg) {
            html = ""
            for(var i=0; i<msg.length; i++) {
              html = html + msg[i].title + "<br>"
            }
            $("#qiita").html(html)
          }
        });

        $("#next").on('click', function(e) {
          e.preventDefault
          page = parseInt(page) + 1;
          loadData(page)
         });

         //ブラウザ操作
         $(window).on('popstate', function(e) {
           if (!e.originalEvent.state) return
           //$.url()で今のURLが取れるはずだけど、ブラウザバッグだと
　　　　　 //うまくとれない
           //location.pathnameだとURLが取れるのでこれを引数で渡す
           var url = $.url(location.pathname)
           var currentPage = url.param('page');
           if (currentPage == page) {
             return;
           }else{
             if(!currentPage) {
               page = 1
             }else{
               page = currentPage
             }
             loadData(page)
           }
         });

       });

       function loadData(page) {
         console.log(page)
         //url書き換え
         history.pushState(page, "Qiita" + page + "ページ目", "?page=" + page);
         $.ajax({
           type: "GET",
           url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
           dateType: "json",
           success: function(msg) {
             html = ""
             for(var i=0; i<msg.length; i++) {
               html = html + msg[i].title + "<br>"
             }
             $("#qiita").html(html)
            }
         });
       }
    </script>
  </head>
  <body>
    <div id="qiita"></div>
    <div><a id="next" href="javascript:;">次へ</a></div>
  </body>
</html>
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-2.2.2.min.js" integrity="sha256-36cp2Co+/62rEAAYHLmRCPIych47CvdM+uTBJwSzWjI=" crossorigin="anonymous"></script>
	<script src="./purl.js"></script>
	<script>
	var page = $.url().param('page')
	if(!page) {
	page = 1
	}
	$(document).ready(function() {
	$.ajax({
	type: "GET",
	url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
	dateType: "json",
	success: function(msg) {
	html = ""
	for(var i=0; i<msg.length; i++) {
	html = html + msg[i].title + "<br>"
	}
	$("#qiita").html(html)
	}
	});

	$("#next").on('click', function(e) {
	e.preventDefault
	page = parseInt(page) + 1;
	loadData(page)
	});

	//ブラウザ操作
	$(window).on('popstate', function(e) {
	if (!e.originalEvent.state) return
	//$.url()で今のURLが取れるはずだけど、ブラウザバッグだと
	//うまくとれない
	//location.pathnameだとURLが取れるのでこれを引数で渡す
	var url = $.url(location.pathname)
	var currentPage = url.param('page');
	if (currentPage == page) {
	return;
	}else{
	if(!currentPage) {
	page = 1
	}else{
	page = currentPage
	}
	loadData(page)
	}
	});

	});

	function loadData(page) {
	console.log(page)
	//url書き換え
	history.pushState(page, "Qiita" + page + "ページ目", "?page=" + page);
	$.ajax({
	type: "GET",
	url: "https://qiita.com/api/v2/items?page="+ page +"&per_page=20",
	dateType: "json",
	success: function(msg) {
	html = ""
	for(var i=0; i<msg.length; i++) {
	html = html + msg[i].title + "<br>"
	}
	$("#qiita").html(html)
	}
	});
	}
	</script>
	</head>
	<body>
	<div id="qiita"></div>
	<div><a id="next" href="javascript:;">次へ</a></div>
	</body>
	</html>