Does e.preventDefault() on a link with an href trigger history states?
by Admiral Potato
HTML
<div id="links">
<a target="_blank" href="http://apple.com/">Apple</a>
<a target="_blank" href="http://tiger.com/">Tiger</a>
<a target="_blank" href="http://lolcats.com/">lolcats</a>
</div>
<div id="output" style="display: none;"><span class="close">x</span><iframe></iframe></div>
CSS
*{
margin: 0;
padding: 0;
}
a{
display: block;
}
#output{
position: relative;
margin: 32px 96px;
}
iframe{
border: 2px solid #f00;
width: 100%;
height: 320px;
}
.close{
cursor: pointer;
background-color: #f00;
color: #fff;
display: block;
height: 16px;
width: 16px;
line-height: 16px;
text-align: center;
position: absolute;
right: 0;
}
JavaScript
var linkClickHandler = function(event) {
event.preventDefault();
//$('#output iframe').attr('src', event.target.href);
//Working approach documented at:
//http://stackoverflow.com/questions/821359/reload-an-iframe-without-adding-to-the-history
$('#output iframe')[0].contentWindow.location.replace(event.target.href);
$('#output').fadeIn();
};
$(document).on('click', '#links a', linkClickHandler);
$(document).on('click', '.close', function(){$('#output').fadeOut();});