I want to create a modular website with no frameworks or CMS nor server-side language. Also, I am doing simple use of the hashchange event to help the navigation.
The structure would be as follows:
- A basic container HTML page with 3 main areas: header, content, footer.
- Individual HTML files - one for each page - which would contain only the HTML to be inserted in the content part
- a JavaScript file with all the code needed
- a CSS file with all the styling
Please bear in mind that all the code below has been cleaned to illustrate the concept: the real code is more complex (e.g. the content of the header and the footer might as well be loaded with AJAX calls, some manipulations might occur to the DOM after the content has been put in place, handling AJAX failures, and so on).
A sample version of the HTML for the container page would be like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Faux SPA</title>
<link rel="stylesheet" href="styles.css"/>
<script src="script/jquery/jquery-1.12.4.min.js"></script>
<script src="script/loader.js"></script>
</head>
<body>
<div id="viewPort">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
<button onclick="setPageHash('Page1')">View 1</button>
<button onclick="setPageHash('Page2')">View 2</button>
</body>
</html>
A couple of sample HTML files for the content (obviously, the real-world content would be more complex):
Page1.html:
<div>
<img src="images/Image1.png" alt="">
</div>
And Page2.html:
<div>
Some text content
<br/>
second line of text content
</div>
Finally, the JavaScript code would be like:
var validHashes = ["Page1", "Page2"];
function page(pageName){
var newPageURI = pageName + ".html";
var container = "#content";
$.ajax(newPageURI).done(
function(content) {
putContentInContainer(container, content);
setPageHash(pageName);
}
);
}
function putContentInContainer(container, content) {
$(container).html(content)
}
function loadPageFromHash() {
var hashValue = window.location.hash || "";
var hashIsValid;
hashValue = hashValue.replace('#','');
hashIsValid = (validHashes.indexOf(hashValue)>=0);
if (hashIsValid) {
page(hashValue);
} else {
console.error("no valid HASH!");
}
}
function setPageHash(page) {
window.location.hash = page;
}
window.onhashchange = loadPageFromHash;
$().ready(function() {
loadPageFromHash();
});
So, my questions are:
- Is there any disadvantage in loading the HTML this way?
- I know that the HTML files with the content will not be valid HTML files because of the missing tags (e.g.
body,html, etc.): would that represent a problem? - Is there anything else I am missing for the whole hashchange subject?
-
\$\begingroup\$ Welcome to code review. What I see here doesn't handle mobile devices very well. Hard coding the dimensions into the HTML prevents responsive design. The HTML should also contain a no script section informing users that disable scripting that they won't get the best user experience. \$\endgroup\$pacmaninbw– pacmaninbw ♦2016年08月25日 13:54:04 +00:00Commented Aug 25, 2016 at 13:54
-
\$\begingroup\$ @pacmaninbw: what I am interested here is about loading the content and handling the url change. As already said, this is a simple HTML page just to show the concept, of course all the styling will go in separate CSS files. i'll edit the code to remove it, though, so that it doesn't get in the way... \$\endgroup\$Pierpaolo– Pierpaolo2016年08月25日 14:09:26 +00:00Commented Aug 25, 2016 at 14:09
1 Answer 1
1) Loading HTML this way will exclude all your users with js disabled from browsing your site, that's why back-end scripting exists
2) They are not a problem if you inject them in a valid HTML document. If you don't, the majority of modern browsers will create html, head and body elements by themselves, but all the other browsers will possibly display nothing
3) Theoretically not
-
\$\begingroup\$ Thanks for the comments. Regarding point 1, though, good one but the "meaty" part of the website will be an interactive map created with OpenLayers 3, so without javascript there really is no point in browsing the website... \$\endgroup\$Pierpaolo– Pierpaolo2016年08月25日 13:13:56 +00:00Commented Aug 25, 2016 at 13:13
-
1\$\begingroup\$ @Pierpaolo In your basic HTML landing page you should have a no script section that informs users with scripting disabled that they won't get the best results. \$\endgroup\$2016年08月25日 13:45:48 +00:00Commented Aug 25, 2016 at 13:45