现在的项目是用jquery做的，东西比较多但是给的改版时间又短，用angular这些mvvm框架肯定来不及交工，只有想到用iframe来模拟单页应用的局部刷新这样效果有了，原来的代码也能用，这里又涉及到历史记录以及hash的问题，hash是要兼容ie这种浏览器。

功能基本上成功了，但是出了个问题，浏览器返回的时候发现返回两次，对应的hash才有变化。第一次只是iframe里面的返回，第二次才是想要的返回，hash才更新。

          <p class="row-fluid">
                <p 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>
                </p>
                <p class="span10 box-mid">
                    <iframe id="main" frameborder=0  style="width:100%; height：100%; border:0;"></iframe>
                </p>
            </p>

   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";
                }
            }