iframe调用父页面的元素，通过点击子页面元素实现菜单效果
需求：easyUI应该都熟悉，就是点击左边菜单栏，上面出现tab标签和子页面，这个也类似，不过还需要一个功能，就是点击子页面的a连接的时候，实现和点击菜单相同的效果，点击a→打开左边菜单→出现tab页。
这个前端框架不知道哪来的啥玩意野鸡框架，接手这个项目的时候就有了这个前端框架，研究了半天就开始搞了，主要用这个语法$("父页面ID"，window.parent.document)找父页面的元素
下面是主要源码：
1:子页面：
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");
};