Всем привет. Юзаю я апи истории браузера. Соорудил я вот такой вот велосипед
$('document').ready(function () {
$('.historyAPI').on('click', function (e) {
e.preventDefault();
var href = $(this).attr('href');
getContent(href, true);
});
});
window.addEventListener("popstate", function (e) {
getContent(location.pathname, false);
});
function getContent(url, addEntry) {
$.get(url).done(function(data) {
contentHolder.innerHTML = '';
contentHolder.innerHTML = data;
if(addEntry == true) {
history.pushState(null, null, url);
}
});
}
Сразу была проблема того что не грузит стили но я её решил подключением тилей в каждом файле (они второй раз не подгружались)
Примерная разметка страниц
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi">
<title>Генералы</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0;">
<script src="/js/libs/jquery/jquery.js"></script>
<script src ="/js/libs/generals/generals.js"></script>
<script src="/js/modules/foot.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrap">
<div class="jumbotron" id="contentHolder">
<div class="logo">
<a href="/"><img src="/img/logo-start.png"></a>
</div>
<div class="entry marg_top-20"></div>
<p class="center marg_top_7 marg_bot_7 yellow">
Здравствуй, боец! Если ты здесь впервые, жми "Начать игру"</p>
<div class="block_inside marg_top_5 marg_bot_5">
<div class="button big orange">
<a href="game/education/1.html" class="txt_but historyAPI" >Начать игру</a>
</div>
</div>
<div class="button">
<a href="login.html" class="yellow historyAPI" >Вход</a>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
Страница которая грузится при нажатии "начать игру"
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><html xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi">
<title>Генералы</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="stylesheet" type="text/css" href="/css/main.css">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=3.0;">
<script src="/js/libs/jquery/jquery.js"></script>
<script src="/js/libs/generals/generals.js"></script>
<script src="/js/modules/foot.js"></script>
</head>
<body>
<div class="wrapper">
<div class="wrap">
<div class="jumbotron" id="contentHolder">
<div id="header">
<div class="logo">
<a class="logotype"></a>
</div>
<div class="game_info">
<div class="wrap_game no_hover">
<div class="line first">
<div class="block money"><a><span></span><b>1K</b></a></div>
<div class="block gold"><a><span></span><b>0</b></a></div>
<div class="block levels"><a><span></span><b>1</b></a></div>
<div class="block mail"><a><span></span></a></div>
</div>
<div class="level" style="width:0%;"></div>
<div class="line second">
<div class="block health">
<a><span></span><b id="healthValue">100</b><b>/100</b></a>
</div>
<div class="block energy">
<a><span></span><b id="energyValue">100</b><b>/100</b></a>
</div>
<div class="block power">
<a><span></span><b id="ammoValue">5</b><b>/5</b></a>
</div>
</div>
</div>
</div>
</div>
<div class="wrap_grey">
<div class="frame width_320 marg_bot_20">
<div class="frame_corners_left"></div>
<div class="picture education_1"></div>
<div class="frame_corners_right"></div>
</div>
<div class="block_inside marg_top_5">
<div class="marg_bot_5">
<b class="green fl_left">Майор: </b>
<div class="txt_left font_14">
<span class="marg_left_5">
Солдат, ты прибыл как раз вовремя! Мы продвигаемся к позициям врага! Не теряй ни секунды - атакуй противника! </span>
</div>
<div class="clearFix"></div>
</div>
<div class="divider marg_bot_5"></div>
<p class="orange center font_16">Война</p>
<div class="block_info visible">
<div class="user">
<span class="flag">
<span class="flag_country_6"></span>
</span>
<a class="green">Генерал Ричардс </a><span class="icon_online"></span>
<div>
<span class="info">Ур. <span class="yellow">1</span></span>
</div>
</div>
<div class="arrow6">
<div class="button orange right mini">
<div id ="form">
<a href="2.html" class="historyAPI">Атака</a>
</div>
</div>
</div>
</div>
<div class="clearFix"></div>
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
</html>
А если тут нажать атака то вместо подгрузки и обновления юрл страница полностью перегружается. Как исправить не пойму.
