高手进来，一个页面3个框架，怎么让另外两个一起跟着变

页面包括：topFrame.html, leftFrame.html,mainFrame
具体代码：outLook.js:
var preClassName = "";
function list_sub_detail(Id, item) {
if (preClassName != "") {
getObject(preClassName).className = "left_back";
}
if (getObject(Id).className == "left_back") {
getObject(Id).className = "left_back_onclick";
outlookbar.getbyitem(item);
preClassName = Id;
}
}
function getObject(objectId) {
if (document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else {
if (document.all && document.all(objectId)) {
return document.all(objectId);
} else {
if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
}
}
function outlook() {
this.titlelist = new Array();
this.itemlist = new Array();
this.addtitle = addtitle;
this.additem = additem;
this.getbytitle = getbytitle;
this.getbyitem = getbyitem;
this.getdefaultnav = getdefaultnav;
}
function theitem(intitle, insort, inkey, inisdefault) {
this.sortname = insort;
this.key = inkey;
this.title = intitle;
this.isdefault = inisdefault;
}
function addtitle(intitle, sortname, inisdefault) {
outlookbar.itemlist[outlookbar.titlelist.length] = new Array();
outlookbar.titlelist[outlookbar.titlelist.length] = new theitem(intitle, sortname, 0, inisdefault);
return (outlookbar.titlelist.length - 1);
}
function additem(intitle, parentid, inkey) {
if (parentid >= 0 && parentid <= outlookbar.titlelist.length) {
insort = "item_" + parentid;
outlookbar.itemlist[parentid][outlookbar.itemlist[parentid].length] = new theitem(intitle, insort, inkey, 0);
return (outlookbar.itemlist[parentid].length - 1);
} else {
additem = -1;
}
}
function getdefaultnav(sortname) {
var output = "";
for (i = 0; i < outlookbar.titlelist.length; i++) {
if (outlookbar.titlelist[i].isdefault == 1 && outlookbar.titlelist[i].sortname == sortname) {
output += "<div class=list_tilte id=sub_sort_" + i + " onclick=\"hideorshow('sub_detail_" + i + "')\">";
output += "<span>" + outlookbar.titlelist[i].title + "</span>";
output += "</div>";
output += "<div class=list_detail id=sub_detail_" + i + "><ul>";
for (j = 0; j < outlookbar.itemlist[i].length; j++) {
output += "<li id=" + outlookbar.itemlist[i][j].sortname + j + " onclick=\"changeframe('" + outlookbar.itemlist[i][j].title + "','" + outlookbar.titlelist[i].title + "','" + outlookbar.itemlist[i][j].key + "',)\"><a href=#>" + outlookbar.itemlist[i][j].title + "</a></li>";
}
output += "</ul></div>";
}
}
getObject("right_main_nav").innerHTML = output;
}
function getbytitle(sortname) {
var output = "<ul>";
for (i = 0; i < outlookbar.titlelist.length; i++) {
if (outlookbar.titlelist[i].sortname == sortname) {
output += "<li id=left_nav_" + i + " onclick=\"list_sub_detail(id,'" + outlookbar.titlelist[i].title + "')\" class=left_back>" + outlookbar.titlelist[i].title + "</li>";
}
}
output += "</ul>";
getObject("left_main_nav").innerHTML = output;
}
function getbyitem(item) {
var output = "";
for (i = 0; i < outlookbar.titlelist.length; i++) {
if (outlookbar.titlelist[i].title == item) {
output = "<div class=list_tilte id=sub_sort_" + i + " onclick=\"hideorshow('sub_detail_" + i + "')\">";
output += "<span>" + outlookbar.titlelist[i].title + "</span>";
output += "</div>";
output += "<div class=list_detail id=sub_detail_" + i + " style='display:block;'><ul>";
for (j = 0; j < outlookbar.itemlist[i].length; j++) {
output += "<li id=" + outlookbar.itemlist[i][j].sortname + "_" + j + " onclick=\"changeframe('" + outlookbar.itemlist[i][j].title + "','" + outlookbar.titlelist[i].title + "','" + outlookbar.itemlist[i][j].key + "')\"><a href=#>" + outlookbar.itemlist[i][j].title + "</a></li>";
}
output += "</ul></div>";
}
}
getObject("right_main_nav").innerHTML = output;
}
function changeframe(item, sortname, src,href) {
if (item != "" && sortname != "") {
window.top.frames["mainFrame"].getObject("show_text").innerHTML = sortname + "&nbsp;&nbsp;<img src=images/slide.gif broder=0 />&nbsp;&nbsp;" + item;

}
if (src != "" && href!="") {
window.top.frames["manFrame"].location = src;
}
}
function hideorshow(divid) {
subsortid = "sub_sort_" + divid.substring(11);
if (getObject(divid).style.display == "none") {
getObject(divid).style.display = "block";
getObject(subsortid).className = "list_tilte";
} else {
getObject(divid).style.display = "none";
getObject(subsortid).className = "list_tilte_onclick";
}
}
function initinav(sortname) {
outlookbar.getdefaultnav(sortname);
outlookbar.getbytitle(sortname);
parent.frames("manframe").location.href = "../SerchReport?city=jiangsu";
//window.top.frames['manFrame'].location="manFrame.html"
}
document.write("<script src=../UI/js/nav.js></" + "script>");
nav.js:
// 导航栏配置文件
var outlookbar=new outlook();
var t;
t=outlookbar.addtitle('管理首页','管理首页',1)
outlookbar.additem('按列表模式显示',t,'../SerchReport?city=jiangsu')
outlookbar.additem('按图形模式显示',t,'../chartMode.jsp')t=outlookbar.addtitle('任务管理','任务管理',1)
outlookbar.additem('新建查询任务',t,'../NewSerchTask.jsp')
outlookbar.additem('查询历史任务',t,'../SerchhistoryTask.jsp')t=outlookbar.addtitle('重点管理','重点管理',1)
outlookbar.additem('所有重点目标',t,'../servlet/GetAllFocustarget')topFrame.html:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<title>管理导航区域</title>
</head>
<script  type="text/javascript">
var preClassName = "man_nav_1";
function list_sub_nav(Id,sortname){
   if(preClassName != ""){
      getObject(preClassName).className="bg_image";
   }
   if(getObject(Id).className == "bg_image"){
      getObject(Id).className="bg_image_onclick";
      preClassName = Id;
  showInnerText(Id);
  window.top.frames['leftFrame'].outlookbar.getbytitle(sortname);
  window.top.frames['leftFrame'].outlookbar.getdefaultnav(sortname);
   }
}function showInnerText(Id){
    var switchId = parseInt(Id.substring(8));
var showText = "对不起没有信息！";
switch(switchId){
    case 1:
   showText =  "不同地区监控的重点目标";
   break;
    case 2:
   showText =  "查询任务";
   break;
    case 3:
   showText =  "重点目标";
   break;    
   
}
getObject('show_text').innerHTML = showText;
}
 //获取对象属性兼容方法
 function getObject(objectId) {
    if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
    } else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
    } else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
    } else {
return false;
    }
}
</script>
<body>
<div id="nav">
    <ul>
<li id="man_nav_1" onclick="list_sub_nav(id,'管理首页');"
class="bg_image_onclick">
首&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;页
</li>
<li id="man_nav_2" onclick="list_sub_nav(id,'任务管理')"   class="bg_image" >任务管理
</li>
<li id="man_nav_3" onclick="list_sub_nav(id,'重点管理')"  class="bg_image">重点管理
</li>
</ul>
</div>
<div id="sub_info">&nbsp;&nbsp;<img src="images/hi.gif" />&nbsp;<span id="show_text">欢迎使用网络纠察实时监控平台!</span></div>
</body>
</html>
leftFrame.html:<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" href="css/common.css" type="text/css" />
<script type="text/javascript" src="../UI/js/outLook.js"></script>
<title>左侧导航栏</title>
</head> <body onload="initinav('管理首页')">
<div id="left_content">
<div id="user_info">
欢迎您， <strong></strong>
<br />
[
<a href="../optionPkg/loginout.jsp">安全退出</a>]
</div>
<div id="main_nav">
<div id="left_main_nav"> </div> <div id="right_main_nav"></div>
</div>
</div>
</body>
</html>现在能点击topframe。html里面的按钮左侧能跟这显示。怎么实现点击上部按钮，mainframe。html也随着显示leftframe列表的第一个连接的页面。

解决方案 »

  1.   

    改了一下leftFrame.html页面，在onload之后，在执行一个方法，去填充mainFrame的src。
    首先，left页面最终填出来的是什么链接，你肯定是知道的，哪个链接排第一，你也能得到，那么在leftFrame页面，改变mainFrame页面的src值，也就轻而易举了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <link rel="stylesheet" href="css/common.css" type="text/css" /> 
    <script type="text/javascript" src="outLook.js"> </script> 
    <title>左侧导航栏 </title> 
    </head> <body onload="initinav('管理首页');firstShow();" style="background:yellow;"> 
    <div id="left_content"> 
    <div id="user_info"> 
    <strong>欢迎您，[<a href="../optionPkg/loginout.jsp">安全退出 </a>] </strong> 
    </div> 
    <div id="main_nav"> 
    <div id="left_main_nav" style="background:green"></div> 
    <div id="right_main_nav" style="background:blue"></div> 
    </div> 
    </div> 
    </body> 
    </html> 
    <script type="text/javascript" >
    function firstShow()
    {
        top.document.getElementById("mainFrame").src="http://www.163.com";
    }
    </script>
      

  2.   

    顶触发左，左触发右，连贯执行！
    顶部能够得知左侧要显示什么内容，那么在左侧填充出outlook菜单的时候，你肯定是能得到一个顺序，哪个链接排第一，把这个值记录下来，作为该页面的全局变量，然后在onload之后，去改变mainFrame的src
      

  3.   

    top控制left，left控制right
    在left的onload事件中控制下right的src就行了