如圖示 左側菜單及上方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);
}
以上 ?歡迎批評指正~
