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

本文主要是介绍前端学习之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进行页面跳转的方案

这篇关于前端学习之iframe配合hash做菜单导航的问题：修改src跳转与contentWindow.location.replace('')的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！