Добрый день,
проблема такая: контент страницы вставить в другой шаблон, не уходя с исходной страницы, и не теряя скрипты и стили
страница с контентом index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//localhost/share/assets/css/style.css">
</head>
<body>
<div id="content">
<h1>Page content</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button id="click-me">test</button>
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//localhost/share/assets/js/script.js"></script>
<script>
$(function() {
$('#content').find('h1').css({'text-transform':'uppercase'});
});
</script>
</body>
</html>
страница шаблона mobile-page.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Mobile page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//localhost/share/assets/css/style-mobile.css">
</head>
<body>
<nav class="mobile-nav">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</nav>
<div id="mobile-content">
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//localhost/share/assets/js/script-mobile.js"></script>
<script>
$(function() {
console.log(opts.lang);
});
</script>
</body>
</html>
script.js (index.html)
$(function() {
$('#click-me').click(function() {
console.log('click');
});
var origContent = $('#content').html();
$.ajax({
url: '//localhost/share/mobile-page.html',
cache: false,
dataType: 'html',
success: function(response) {
var startHead = response.indexOf("<head>");
var endHead = response.indexOf("</head>");
var headString = response.substring(startHead+6,endHead);
var startBody = response.indexOf("<body>");
var endBody = response.indexOf("</body>");
var bodyString = response.substring(startBody+6,endBody);
// дальше не совсем понимаю что делать...
var newContent = $(bodyString).filter('#mobile-content').empty().append(origContent);
console.log(newContent.html());
console.log($(bodyString).html());
$('body').html($(bodyString).html());
}
});
});
не пойму как мне теперь origContent вставить в <div id="mobile-content"> из полученного шаблона и потом полностью заменить содержание <body> в index.html на <body> из шаблона.
может я не туда рою и надо было как то:
document.open("text/html", "replace");
document.write(response);
document.close();
?