Question

我正在尝试制作一个带有标题和iframe的单页应用，用于页面内容。所以...我做了一个小的javaScript控制器来做到这一点。它需要一个名为routes的enter code here对象来处理某些锚标记的点击，我想在iFrames网址中触发更改。这对我来说都很好，但是当我使用后退按钮时，它似乎没有正确对齐。

这就是我的想法：http://gtv-resources.googlecode.com/svn/trunk/examples/location-hash-html.html#3

以下是Google撰写的文章：https://developers.google.com/tv/web/articles/location-hash-navigation

<script src="controller.js"></script>
    <script>
    var routes = {
        "view":"viewFrame",
        "index": {
            "name": "main",
            "location": "subpages/landing.html"
        },
        "paths": {
            "about": "subpages/about.html",
            "download": "subpages/download.html",
            "main":"subpages/landing.html"
        }
    };
    </script>

</head>



    <body>
         <ul>
            <li><a class='handle' data-link='main'>Back To Main Page</a>
            </li>
            <li><a class='handle' data-link='about'>About</a>
            </li>
            <li><a class='handle' data-link='download'>Download</a>
            </li>
        </ul>
        <iframe id="viewFrame" src="subpages/landing.html">


    </body>

和我的js文件

window.onload = function() {

if (routes) {

    var View = routes,
        flag = true;

    View.update = function(hashValue, flag) {
        console.log('ok2')
        var frame = document.getElementById('viewFrame');

        frame.src = routes.paths[hashValue]
        if (flag) {
            View.setHash(hashValue);
        }

    };

    View.getHash = function() {
        return window.location.hash.substring(1);
    }


    View.setHash = function(str) {
        flag = false;
        window.location.hash = str;
    }


    window.onhashchange = function(e) {
        if (flag) {
            View.update(getLocationHash(), false);
        } else {
            flag = true;
        }
    };


    var hashValue = View.getHash(),
        handles = document.querySelectorAll('.handle');

    for (var i = 0; i < handles.length; i++) {
        console.log(handles[i]);
        handles[i].addEventListener('click', evTrigger)


    }

    function evTrigger() {
        console.log(this)
        var link = this.getAttribute('data-link')
        View.update(link, true)
    }

    if (hashValue == '') {
        View.update(routes.index.name, true);
    }
}
};

如果你能解释我的疯狂，我会感谢你的帮助。

Location.hash与历史记录不匹配

0 个答案: