iframe和历史以及hash的问题

发布于 2022-09-01 17:26:36 字数 2116 浏览 20 评论 0

现在的项目是用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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无边思念无边月 2022-09-08 17:26:36

怎么破?字数

终止放荡 2022-09-08 17:26:36

您好,请问您解决这个问题了吗,我也遇到相同的问题

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文