zoukankan      html  css  js  c++  java
  • 前端学习之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进行页面跳转的方案

  • 相关阅读:
    JVisualVM简介与内存泄漏实战分析
    高并发性能提升和超卖的解决方案
    ehcache应用场景及集群同步(RMI)
    一台机器配置多个tomcat的实践经验
    事务范围数据库读写分离失败
    基于spring的数据库读写分离
    Zookeeper linux下使用
    Zookeeper集群
    Dubbo入门实例(二)
    Zookeeper安装与启动
  • 原文地址:https://www.cnblogs.com/interesting-whh/p/14794720.html
Copyright © 2011-2022 走看看