iframe和历史以及hash的问题
现在的项目是用jquery做的,东西比较多但是给的改版时间又短,用angular这些mvvm框架肯定来不及交工,只有想到用iframe来模拟单页应用的局部刷新这样效果有了,原来的代码也能用,这里又涉及到历史记录以及hash的问题,hash是要兼容ie这种浏览器。
功能基本上成功了,但是出了个问题,浏览器返回的时候发现返回两次,对应的hash才有变化。第一次只是iframe里面的返回,第二次才是想要的返回,hash才更新。
<div class="row-fluid">
<div class="span2 box-left">
<ul class="nav nav-pills nav-stacked" id="nav">
<li><a href="#main.html">home</a></li>
<li><a href="#blog.html">blog</a></li>
<li><a href="#list.html">list</a></li>
</ul>
</div>
<div class="span10 box-mid">
<iframe id="main" frameborder=0 style="width:100%; height:100%; border:0;"></iframe>
</div>
</div>
var G = {
path: location.protocol+"//"+location.host+"/iframe",
iframe: document.getElementById("main")
};
window.onhashchange = function() {
hashChange();
}
function hashChange() {
for (var i=0, len=$id("nav").getElementsByTagName("li").length; i<len; i++) {
$id("nav").getElementsByTagName("li")[i].className = "";
}
if (location.hash.substr(1)){
G.iframe.src = location.hash.substr(1)
for (var i=0, len=$id("nav").getElementsByTagName("li").length; i<len; i++) {
if ($id("nav").getElementsByTagName("li")[i].children[0].getAttribute("href") == location.hash) {
$id("nav").getElementsByTagName("li")[i].className = "active";
}
}
}else{
G.iframe.src="main.html";
$id("nav").getElementsByTagName("li")[0].className = "active";
}
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
怎么破?字数
您好,请问您解决这个问题了吗,我也遇到相同的问题