如图示 左侧菜单及上方TAB为公共父级页面元素，ifram内的页面为子页面
点击左侧菜单 会打开新的TAB并对应下方的iframe子页面
现在要实现点击iframe页面内的a链接 也可以开启新的TAB 即实现同点击左侧菜单一样的效果
实现思路：
给页面内a链接加点击事件 点击时append一个有active属性的TAB
并打开对应的iframe页面 （iframe与tab对应的原理是tab的url与iframe的src相同）
难点：
子页面向父级窗体 传参 及调用父级的方法
原理：
a、在父级窗体首先定义好相应的方法A 如append tab 、append iframe、及对当前tab iframe是否已经存在的判断
b、在父级窗体创建一个隐藏域input 和一个a标签 onclick事件触发定义好的方法A
c、在子页面获取到该input的value 并给其赋值 赋的值即为需要从子页面传递到父级窗体的值然后在子页面取到a标签 并触发兼容性很好的click()方法
window.parent.document.getElementById(‘hidInp’).value=jsontab;
window.parent.document.getElementById(‘addTabpp’).click();
所以 通过iframe子页面控制父级窗体的原理就是 在父级窗体写好方法 并通过onclick事件触发该方法 在子页面获取到写有onclick方法的元素并写入click() 即可成功调用父级窗体的 方法。 传参原理类似 先获取父级窗体元素 并给其赋值 即可实现传参。
具体实现：
1、给有href属性的a标签加点击事件 点击时获取该元素的href、html、data-id(data-id用来标志改生成的tab的唯一性）
//子页面
var jsontab=”; //定义一个空的字符串
$(‘.adda’).click(function(){
var url=$(this).attr(‘data-href’);
var text=$(this).html();
var dataId=$(this).attr(‘data-id’);
var m = $(this).data(“index”);
//将需要用到的参数 拼接成json串
jsontab = ‘{“url”:”‘ + url + ‘”,”dataId”:”‘ + dataId + ‘”,”text”:”‘ + text + ‘”,”m”:”‘ + m + ‘”}’;
addp();
})
function addp(){
//将json串赋给父级窗体元素
window.parent.document.getElementById(‘hidInp’).value=jsontab;
//addTabpp是父级窗体中 写有onclick方法的元素
window.parent.document.getElementById(‘addTabpp’).click();
};
//父级窗体
//隐藏域及触发方法的a标签
//js
function addpp(){
var $word=$(‘#inpttt’).val();
$word=JSON.parse($word); //解析成json对象
//添加iframe
var n = ‘http://’%20+%20$word.url%20+%20′‘;
神奇了 var n编辑出来就变成了上面的鬼样子~ 附上截图
$(“.J_mainContent iframe”).hide();
//判断iframe是否已经存在
$(“.J_mainContent .J_iframe”).each(function() {
var bn=$(this).attr(‘data-id’);
if ( bn == $word.url+$word.dataId ){
$(this).remove();
}
});
$(“.J_mainContent”).append(n);
//添加TAB
$(‘.page-tabs-content a’).removeClass(‘active’);
var newTab=”
//判断tab是否已经存在
$(“.J_menuTabs .page-tabs-content .J_menuTab”).each(function() {
if ( $(this).data(‘id’) == $word.url+$word.dataId ){
$(this).remove();
}
});
$(‘.J_menuTabs .page-tabs-content’).append(newTab);
}
以上 欢迎批评指正~