[英]How to control back and forward button in jQuery
在我的响应式网站中,我将这些按钮显示在我的移动视图中。 我试图让他们浏览我的页面。
<div class="row" id="bottomNav">
<div class="col-xs-4 text-center">
<a href="#" onclick="history.go(-1); return false;" id="back-button">
<i class="fa fa-arrow-left"></i>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#">
<i class="fa fa-refresh"></i>
</a>
</div>
<div class="col-xs-4 text-center">
<a href="#" onclick="history.go(1); return false;" id="forward-button">
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
我希望他们做的是,显然允许用户前进和后退。
但是,我想在以下情况下禁用这些按钮:
禁用后退按钮如果:
禁用前进按钮如果:
这就是我到目前为止所做的。 这并不多。
<script>
alert(document.referrer);
alert(window.location.hostname);
var str = window.location.hostname;
//if back page is own page
if (str.search(document.referrer) >= 0) {
history.go(-1);
}
else {
$('#back-button').prop('disabled', false);
}
</script>
要使back
按钮起作用,您可以使用document.referrer
:
function isBackAvailable()
{
if (document.referrer === "") return false;
if (document.referrer.substr(0, 16) !== "http://localhost") return false;
// it can be (!document.referrer.startsWith("http://domain.com")) in ES6
return true;
}
function goBack()
{
if (isBackAvailable()) {
history.go(-1);
}
}
$(document).ready(function() {
$("#back-button")
.prop('disabled', isBackAvailable())
.on('click', goBack);
});
forward
按钮怎么样 - 没有正常的方法可以检查前进按钮是否可用。 它是一个“硬件”浏览器按钮,在API中根本没有这样的方法。 我猜,它与安全性有某种关系。
但是,您只需执行history.go(1);
。 如果没有这样的页面,它什么都不做。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.