在前端开发中使用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进行页面跳转的方案