有关iframe子页面操作父页面及向父页面传递参数

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

 </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);

}

以上欢迎批评指正~

有关iframe子页面操作父页面及向父页面传递参数

推荐阅读更多精彩内容