如图示 左侧菜单及上方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;”>
</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;”> </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);
}
以上 欢迎批评指正~
网友评论