iframe设置锚点来解决刷新时跳转到其他页面和点击动态生成的菜单栏让其高亮的思路

我们在使用ifram
4000
e时，一般是很多子页面共用一个菜单栏，然后点击不同菜单切换到不同的子页面，但是当你刷新时可能会碰到跳转到其他页面的情况，这个时候就需要设置锚点来解决。

另外，我们还需要解决点击菜单栏让它处于高亮的选中状态。并且在设置锚之后，还要处理如何在页面刷新后，让动态生成的菜单仍旧处于被选中的状态。

我们看代码。

先设置锚点

/设置锚点
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>