前端学习之iframe配合hash做菜单导航的问题:修改src跳转与contentWindow.location.replace('')的问题

  在前端开发中使用iframe做导航进行跳转时,可以用js修改iframe的src进行页面的切换

$('#myiframe').attr('src',src);

  这样产生的问题是,通过浏览器的退回按钮退回页面时,是在iframe里面进行的回退,主页的地址(即浏览器的地址)是不会变化的,且iframe的src属性也没有发生变化,这样就无法监控到回退到哪个页面了,会产生导航菜单识别的问题。

  解决的办法是用iframe的contentWindow.location.replace('')方法进行跳转,即

$('#myiframe')[0].contentWindow.location.replace(src);

  这样在点击回退按钮时,主页的地址就会发生变化。

  通过hash来对地址进行导航时,可以通过监控hash的变化而达到监控当前页面地址的问题,也可以重新刷新;同时也可以监控回退事件,并在事件处理函数中刷新页面。

function detectBack() {
        //监听hashchange事件
        window.addEventListener('hashchange', function() {
            //为当前导航页附加一个tag
            this.history.replaceState('hasHash', '', '');
        //可以取当前的hash并判断是哪个页面    
        }, false);

        window.addEventListener('popstate', function(e) {
            if (e.state) {
                //侦测是用户触发的后退操作, dosomething
                //这里刷新当前url
                this.location.reload()
            }
        }, false);
    }

通过这种方式,可以给出一种通过hash和iframe进行页面跳转的方案

原文地址:https://www.cnblogs.com/interesting-whh/p/14794720.html