iframe调用父页面的元素,通过点击子页面元素实现菜单效果

需求:easyUI应该都熟悉,就是点击左边菜单栏,上面出现tab标签和子页面,这个也类似,不过还需要一个功能,就是点击子页面的a连接的时候,实现和点击菜单相同的效果,点击a→打开左边菜单→出现tab页。

这个前端框架不知道哪来的啥玩意野鸡框架,接手这个项目的时候就有了这个前端框架,研究了半天就开始搞了,主要用这个语法$("父页面ID",window.parent.document)找父页面的元素

下面是主要源码:

1:子页面:

            addTabs({ id: '2f267400e8374f2ca344e5923f172641',flag:'1',title: 'XX处理',close: true, url: '这里填写你的controller映射', urlType: 'relative'})" class="small-box-footer">查看更多

   

2: JS:野鸡源码太多不上了,下面是主要实现,每个项目其实都是不一样的,主要逻辑是相同的其实也就是子页面和父页面元素分清就行


    //保存页面id的field

    var pageIdField = "data-pageId";
    var basePath = '../content/superui/';
    var globalImgPath = 'global/img/';

    /**
     * 通过ID激活菜单,主要实现菜单的隐藏与显示
     */
    function activeMenuByPageId(pageId) {
        //这里用window.parent.document,主要是因为此点击元素是在iframe里,不用此句话会导致子页面找不到父页面的元素
        var $menu = $("#menu_" + pageId ,window.parent.document);
        var level = $menu.data("level");
        if("1" == level) {
            //同级别菜单都取消激活
            $menu.parent().parent().parent().find("li.treeview[data-level='1']").removeClass("active").removeClass("menu-open");
            //同级别菜单的上级都折叠
            $menu.parent().parent().parent().find(".treeview-menu").css("display", "none");
            //当前菜单的内容块展开
            $menu.parent().css("display", "block");
            //除当前菜单的父级按钮展开,其他父级的按钮都折叠
            $menu.parent().parent().siblings().removeClass('menu-open').end().addClass('menu-open');
            //激活当前菜单
            $menu.addClass("active");
        } else if("2" == level) {
            //当前菜单同级别菜单、无下级的菜单清除激活状态,按钮置为折叠状态
            $menu.parent().parent().parent().parent().parent().find("li.treeview[data-level='1']").removeClass("active").removeClass("menu-open");
            $menu.parent().parent().parent().parent().parent().find("li.treeview[data-level='2']").removeClass("active").removeClass("menu-open");
            //所有子菜单的内容块部分都隐藏
            $menu.parent().parent().parent().parent().parent().find(".treeview-menu").css("display", "none");
            //除当前菜单的父级按钮展开,其他父级的按钮都折叠
            $menu.parent().parent().parent().parent().parent().find("li.treeview[data-level='0']").removeClass("menu-open");
            //当前菜单的逐级上级都激活
            $menu.parent().css("display", "block").parent().addClass("menu-open active").parent().css("display", "block").parent().addClass("menu-open");
            //当前菜单激活
            $menu.addClass("active");
        }


    }
    //添加tab
    var addTabs = function (options) {
        var defaultTabOptions = {
            id: Math.random() * 200,
            urlType: "relative",
            title: "新页面"
        };


        options = $.extend(true, defaultTabOptions, options);
        //这个没多大用,主要获取图片之类的
        if (options.urlType == "relative") {
            var basePath = window.location.pathname + "/../";
        }
      //ID是关键,这个ID要与父页面左侧菜单栏的ID一致!!!
        //ID是关键,这个ID要与父页面左侧菜单栏的ID一致!!!
        //ID是关键,这个ID要与父页面左侧菜单栏的ID一致!!!
        var pageId = options.id;


        //判断这个id的tab是否已经存在,不存在就新建一个
        if (findTabPanel(pageId) == null) {
            //创建新TAB的title,这里是子页面的tab标题,所以这里别加window.parent.document!
            var $title = $('').attr(pageIdField, pageId).addClass("menu_tab");
            var $text = $("").text(options.title).appendTo($title);


            //是否允许关闭
            if (options.close) {
                var $i = $("").attr(pageIdField, pageId).appendTo($title);
            }


            //加入TABS,这里.page-tabs-content是父页面的元素,所以你懂的,加window.parent.document!
            $(".page-tabs-content", window.parent.document).append($title);
            //子页面的div,后面需要包含iframe的
            var $tabPanel = $('
').attr(pageIdField, pageId);


            if (options.content) {
                //是否指定TAB内容
                $tabPanel.append(options.content);
            } else {
                //这里没大用,主要用于加载动画之类的
            /*    blockUI({
                    target: '#tab-content',
                    boxed: true,
                    message: '加载中......'//,
                });*/
              //重要,包含子页面的iframe
                var $iframe = $("").attr("src", options.url).css({"width":"100%","height":"800px"}).attr("frameborder", "no").attr("id", "iframe_" + pageId).addClass("tab_iframe").attr(pageIdField, pageId);


                $tabPanel.append($iframe);//包含iframe


            }
           //父页面包含上面的div(此DIV包含Iframe)
            $("#tab-content", window.parent.document).append($tabPanel);
        }
        activeTabByPageId(pageId);
    }


    function findTabTitle(pageId) {
        var $ele = null;
        $(".page-tabs-content", window.parent.document).find("a.menu_tab").each(function () {
            var $a = $(this);
            if ($a.attr(pageIdField) == pageId) {
                $ele = $a;
                return false;//退出循环
            }
        });
        return $ele;
    }
    //激活Tab,通过id
    function activeTabByPageId(pageId) {
        //隐藏前一个页面
        $(".menu_tab", window.parent.document).removeClass("active");
        $("#tab-content", window.parent.document).find(".active").removeClass("active");
        //激活TAB
        var $title = findTabTitle(pageId).addClass('active');
        findTabPanel(pageId).addClass("active");
        scrollToTab($title[0]);
        //激活菜单
       activeMenuByPageId(pageId);
    }
    function findTabPanel(pageId) {
        debugger;
        var $ele = null;
        $("#tab-content", window.parent.document).find("div.tab-pane").each(function () {
            var $div = $(this);
            if ($div.attr(pageIdField) == pageId) {
                $ele = $div;
                return false;//退出循环
            }
        });
        return $ele;
    }
    //计算多个jq对象的宽度和
    var calSumWidth = function (element) {
        var width = 0;
        $(element).each(function () {
            width += $(this).outerWidth(true);
        });
        return width;
    };
    //滚动到指定选项卡
    var scrollToTab = function (element) {
       var marginLeftVal = calSumWidth($(element).prevAll()),//前面所有tab的总宽度
            marginRightVal = calSumWidth($(element).nextAll());//后面所有tab的总宽度
        //一些按钮(向左,向右滑动)的总宽度
       var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
        // tab(a标签)显示区域的总宽度
       var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
        //将要滚动的长度
        var scrollVal = 0;
        if ($(".page-tabs-content").outerWidth() < visibleWidth) {
            //所有的tab都可以显示的情况
            scrollVal = 0;
        } else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
            //向右滚动
            //marginRightVal(后面所有tab的总宽度)小于可视区域-(当前tab和下一个tab的宽度)
            if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
                scrollVal = marginLeftVal;
                var tabElement = element;
                while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
                    scrollVal -= $(tabElement).prev().outerWidth();
                    tabElement = $(tabElement).prev();
                }
            }
        } else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
            //向左滚动
            scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
        }
        //执行动画
        $('.page-tabs-content', window.parent.document).animate({
            marginLeft: 0 - scrollVal + 'px'
        }, "fast");
    };


你可能感兴趣的:(Jquery)