Manipulating URLs without reloading the page is useful for enhancing user experience and switching content display. This article explains in detail how to use hash.js to add hashes (#) to URLs and how to retrieve and manipulate page URLs.
Background of Hash Operations
Generally, switching the content of a web page involves loading a new page. However, by using tools like hash.js, operations without page reloads become possible. This is particularly useful in modern web applications such as Single Page Applications (SPA).
CSS Settings for Hash Operations
First, set up the design for the area where the hash will be manipulated. The following is the CSS to indicate the hash operation area. Clicking on the #idHsh area will add a hash (#) to the URL.
<style type="text/css">
<!--
#idHsh {
cursor: pointer;
margin: auto;
width: 150px;
height: 150px;
border: dotted 1px #333333;
}
p {
padding-top: 50px;
font-size: 14px;
}
-->
</style>
Hash Operations with JavaScript
Implement hash operations using hash.js. The following script demonstrates the basic implementation of hash operations using hash.js and jQuery. Clicking on the #idHsh area will add a hash (#) to the URL. Use Hash.on(“#+string to add to URL”) to manipulate the URL.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript" src="hash.js"></script>
<script type="text/javascript">
$(function(){
var cnt = 1;
$("#idHsh").click(function(){
Hash.go("/page/" + cnt);
cnt = cnt + 1;
});
Hash.on("/page/([0-9]+)$", function(path, parts) {
alert("The hash added to the URL is " + parts
+ " and the path is " + path + ".");
});
});
</script>
※ Use half-width [] for the 【】 brackets.
HTML Settings
Next, set up the HTML to display the hash operation area.
<div id="idWrap">
<h1>Click on the area below to add a custom hash to the URL.</h1>
<div id="idHsh">
<p>Click this area</p>
</div><!--/idHsh-->
</div>
Source: hash.js
There are many plugins and libraries related to hash operations, but the source of hash.js introduced in this article is as follows.
Source: hash.js
Demo Page for Adding, Retrieving, and Manipulating Hashes in URLs
If you want to check the actual behavior, you can verify the operation of hash.js on the following demo page.
Demo for Adding, Retrieving, and Manipulating Hashes in URLs
The Significance of Hash Operations in SEO
By performing hash operations, it is possible to switch content within a single page. Additionally, it is necessary to verify whether such content changes within a single page are recognized as multiple pages from an SEO perspective and whether the browser’s back button (history back) works correctly.
Conclusion
Using URL operations with hashes is a highly effective technique in modern web development. Especially in SPA development, it provides the benefit of simulating page transitions without actual page reloads. The introduction of such technology is expected to improve usability and serve as a part of SEO measures.
※ Use at your own risk. Do not use the Google Analytics tags within the demo page tags.
