如图示 左侧菜单及上方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

<input type=”text” id=”hidInp” value=”hidtext” style=”opacity:0;”>

<a href=”javascript:void(0);” id=”addTabpp” onclick=”addpp()”” style=”opacity:0;”>

&nbsp;</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标签

<input type=”text” id=”hidInp” value=”hidtext” style=”opacity:0;”>

<a href=”javascript:void(0);” id=”addTabpp” onclick=”addpp()”” style=”opacity:0;”>           &nbsp;</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);

}

以上  欢迎批评指正~