document.oncontextmenu = function(e) {
{ id:'Tab0',title:'首页',url:'shouye.html',check:false,iframeid:'iframeTab0',index:0},
{ id:'Tab1',title:'语文',url:'a.html',check:false,iframeid:'iframeTab1',index:1},
{ id:'Tab2',title:'数学',url:'b.html',check:false,iframeid:'iframeTab2',index:2},
{ id:'Tab3',title:'英语',url:'c.html',check:false,iframeid:'iframeTab3',index:3},
{ id:'Tab4',title:'化学',url:'d.html',check:false,iframeid:'iframeTab4',index:4},
{ id:'Tab5',title:'生物',url:'e.html',check:false,iframeid:'iframeTab5',index:5},
{ id:'Tab6',title:'按钮样式',url:'t.html',check:false,iframeid:'iframeTab6',index:6},
{ id:'Tab0',title:'首页',url:'shouye.html',check:false,iframeid:'iframeTab0',index:0},
Object.defineProperty(data, "key", {
console.log("监听到数据发生变化",val)
deleteViewiframe("bottom");
document.getElementById("rightClickMenu").style.display = "none";
window.onload = function(){
function addTab(params) {
for(var i = 0 ; i < data.menuHistory.length; i++){
if(data.menuHistory[i].index === params){
data.menuHistory.push(data.menuList[params]);
function showIframe(params) {
var menu = document.getElementById("menu").innerHTML;
for(var i = 0 ; i < data.menuList.length; i ++){
html= html + "
- "+ data.menuList[i].index +"."+data.menuList[i].title +"
"; document.getElementById("menu").innerHTML = menu + html;
function ondown(params,e,index) {
var rightClickMenu = document.getElementById("rightClickMenu");
rightClickMenu.style.display = "block" ;
rightClickMenu.style.left = getElementLeft(params) + "px";
rightClickMenu.style.top = getElementTop(params) + 40 + "px";
data.rightClickMenu.tab = params;
data.rightClickMenu.index = index;
//data.rightClickMenu.ids = 0;
data.rightClickMenu.ids = [].indexOf.call(params.parentNode.childNodes,params);
var ids = data.rightClickMenu.ids;
console.log("当前对象的下标是:",ids);
var index = data.menuHistory[ids].index;
data.menuHistory.splice(ids,1);
if(index === data.index){
if(ids + 1 < data.menuHistory.length){
data.index = data.menuHistory[ids].index;
data.index = data.menuHistory[ids-1].index;
var index = data.rightClickMenu.index;
var ids = data.rightClickMenu.ids;
data.menuHistory.splice(1,ids-1);
data.menuHistory.splice(2,data.menuHistory.length);
function buttonLeftALL() {
var index = data.rightClickMenu.index;
var ids = data.rightClickMenu.ids;
data.menuHistory.splice(1,ids-1);
data.menuHistory.splice(1,data.menuHistory.length);
data.index = data.menuHistory[0].index ;
console.log("执行了:view,当前坐标",data.index);
var tabList = document.getElementsByClassName("tab");
for(var i = 0 ; i < data.menuHistory.length; i++){
//console.log("监控到tab不存在,需要创建",error.log ,data.menuHistory[i].id);
if(data.menuHistory[i].index === 0){
document.getElementById("toplist").appendHTML(html);
//完成了tab的创建工作,确保了数据和tab总量是一样的。
for(var i = 0 ; i < data.menuHistory.length; i++){
if(data.menuHistory[i].index === data.index){
//console.log("我被执行了data.index",data.index)
document.getElementById(data.menuHistory[i].id).className = "tab button black round";
document.getElementById(data.menuHistory[i].id).className = "tab button gray round";
document.getElementById("top").style.display = "block";
document.getElementById("top").style.display = "block";
console.log("执行了deleteview");
var tabList = document.getElementsByClassName("tab");
//console.log("执行了deleteview,tab历史记录是:",tabList.length);
for(var i = 0 ; i < tabList.length ; i ++ ){
for( var x = 0 ;x < data.menuHistory.length ; x ++){
if(tabList[i].id === data.menuHistory[x].id){
//console.log("dom存在:",tabList[i].id)
//console.log("dom不存在:",tabList[i])
//console.log("执行了deleteview,tab历史记录只剩下",tabList.length);
* 判断是否存在,存在就不用创建,不存在,需要创建。而不是强制创建。强制创建的后果就是,数据重新加载。
function viewiframe(iframePack){
console.log("执行了:viewiframe");
var iframeList = document.getElementsByClassName("view");
for(var i = 0 ; i < data.menuHistory.length; i++){
//检查iframe是否存在,如果不存在就会报错。
console.log("监控到iframe不存在,需要创建",error.log ,data.menuHistory[i].iframeid);
document.getElementById(iframePack).appendHTML(html);
//已完成创建iframe,但是产生了一个新的问题,那就是都显示了。我们只需要选中的显示,其他的都隐藏起来。
for(var i = 0 ; i < data.menuHistory.length; i++){
//console.log("data.menuHistory[i].index",data.menuHistory[i].index)
if(data.menuHistory[i].index !== data.index){
document.getElementById(data.menuHistory[i].iframeid).style.display = "none";
document.getElementById(data.menuHistory[i].iframeid).style.display = "block";
function deleteViewiframe(iframePack){
console.log("执行了deleteViewiframe");
var tabList = document.getElementById(iframePack).childNodes;
//console.log("执行了deleteViewiframe历史记录是:",tabList.length);
for(var i = 0 ; i < tabList.length ; i ++ ){
for( var x = 0 ;x < data.menuHistory.length ; x ++){
if(tabList[i].id === data.menuHistory[x].iframeid){
//console.log("dom存在:过",tabList[i].id)
console.log("dom不存在:",tabList[i].id)
//console.log("执行了deleteview,tab历史记录只剩下",tabList.length);
//获取element的x坐标.工具类。直接用就是了
function getElementLeft(element) {
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null) {
actualLeft += current.offsetLeft;
current = current.offsetParent;
//获取element的y坐标 工具类。直接用就是了。
function getElementTop(element) {
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
HTMLElement.prototype.appendHTML = function(html) {
var divTemp = document.createElement("div"), nodes = null
, fragment = document.createDocumentFragment();
divTemp.innerHTML = html;
nodes = divTemp.childNodes;
for (var i=0, length=nodes.length; i
fragment.appendChild(nodes[i].cloneNode(true));
this.appendChild(fragment);