我们在使用iframe时,一般是很多子页面共用一个菜单栏,然后点击不同菜单切换到不同的子页面,但是当你刷新时可能会碰到跳转到其他页面的情况,这个时候就需要设置锚点来解决。
另外,我们还需要解决点击菜单栏让它处于高亮的选中状态。并且在设置锚之后,还要处理如何在页面刷新后,让动态生成的菜单仍旧处于被选中的状态。
我们看代码。
先设置锚点
/设置锚点
function setAnchor(url){
var localHref = window.location.href;
var endsub = localHref.indexOf("#");
var afterUrl = localHref.substring(0,endsub);
window.location.href = afterUrl +"#"+ url;
}
然后获取锚点内容
window.onhashchange = function(){
var hash = location.hash;
hash = hash.substring(1,hash.length);
//根据id在你的iframe中赋予
$("#mainiframe").attr("src",url);
};
在页面刷新时进行url赋值操作和保持菜单栏选中状态
document.addEventListener('DOMContentLoaded', function () {
var hash;
//当菜单栏未点击,hash未赋值时,给它设置默认值为index,既登陆进来后跳转到带锚的首页
if(location.hash.length == 0){
hash = index;
}else{
hash = location.hash;
}
var url = hash.substring(1,hash.length);
if(url != "index"){
$("#mainiframe").attr("src", url);
}
//当页面刷新时给菜单栏赋予当前页面的选中状态
$("#navBar.nav li a").each(function(){
if(url == $(this).attr("href").slice(1,$(this).attr("href").length)){
$(this).addClass("activate");
}
});
}, false)
到此咱们就已经把设置后的锚点赋给了刷新后iframe的url,关于下面这段代码:
var hash;
//当菜单栏未点击,hash未赋值时,给它设置默认值为index,既登陆进来后跳转到带锚的首页
if(location.hash.length == 0){
hash = index;
}else{
hash = location.hash;
}
var url = hash.substring(1,hash.length);
if(url != "index"){
$("#myiframe").attr("src", url);
}
它的意义就是当你从登陆界面跳转到默认页时,咱们上面设置的hash是没有值得,也就是说location.hash为空,所以就会出现从登陆页跳转过来后没有子页面的情况。所以咱们得加一个判断,当它为空时给它赋予一个默认页面的锚。
而关于下面这段代码:
$("#navBar.nav li a").each(function(){
if(url == $(this).attr("href").slice(1,$(this).attr("href").length)){
$(this).addClass("activate");
}
});
}, false)
它的意义在于解决当页面刷新时,如果你的菜单栏不是通过ajax动态生成的,而是通过类似python模板数据等非异步方式来动态生成的,那么你就需要在刷新后给它赋予一个选中状态。
而在开头我们提到的点击菜单栏切换选中状态的js,如下代码:
$("#navbar .nav li a").click(function(){
var url = $(this).attr("href").slice(1,$(this).attr("href").length);
//在点击菜单后获取这个子页面的url
setAnchor(url);
if(url){
$("#navBar.nav li a").removeClass("activate");
$(this).addClass("activate");
}
});
这是html部分的代码:
<div id="navBar">
<ul id="navAdd" class="nav">
<li><a href="/index">默认页</a></li>
</ul>
</div>