我希望能得到的效果是:在B页面中的一个按钮,当点击它时,A页面隐藏,再点击时显示A页面,而A、B页面之间的大小是可以像二个窗体间互相拖动调整大小窗口。
我自己用<frameset>+javascript来做过,但不成功:
http://topic.csdn.net/u/20120207/09/78a002b1-161f-4034-8674-c136d3ffe452.html不知那位高手能实现这效果,非常感谢!!!

解决方案 »

  1.   


    <!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>
        <title></title>
    </head>
    //主页面
    <frameset cols="50%,50%" id="mainframe" >
    <frame src="aa.html" name="aa"/>
    <frame src="bb.html" name="bb"/>
    </frameset></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>
        <title></title>
    </head>
    <body>
    //aa页面
    aaaaa
    </body>
    </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>
        <title></title>
        <script>
            function showA() {
                var x = parent.document.getElementById("mainframe");
                x.cols = "0,*";
            }
        </script>
    </head>
    <body>
    //bb页面
        <input type="button" value="显示aa" id="bb" onclick="showA()" />
    </body>
    </html>
      

  2.   

    要实现拖动功能你再自己实现,里面不断改变值,并调用修改窗口大小的函数即可;主页面:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>无标题文档</title>
    </head><frameset id="frames" name="frames" rows="30%,69%" cols="*" framespacing="2" frameborder="2" border="2">
      <frame src="ajax007_01.htm" name="topFrame" scrolling="NO" noresize>
      <frame src="ajax007_02.htm" name="mainFrame">
    </frameset>
    <noframes><body>
    </body></noframes>
    </html>
    子页面1:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ajax007_01.htm</title>
    <style type="text/css">
    body{font-size:12px; font-family:arial; color:#333333; font-weight:bold;background-color: #004080;}
    td{font-size:12px; font-family:arial; color:#333333; font-weight:bold}
    </style>
    </head>
    <script type="text/javascript" language="javascript">
    function $(id){
    return 'string'==typeof(id) ? document.getElementById(id) : id;
    }function showHide(id,showFlag){
    var f=showFlag.toLowerCase();
    var o=$(id);
    if(f=='hide')
    o.style.display='none';
    else
    o.style.display='block';
    }</script>
    <body>
    <div id="div01">
    <p><font color="#FFFFFF">TOP Frame window</font></p>
    <font color="#FFFFFF">
    Frame name: topFrame<br>
    Frame src: Ajax007_01.htm
    </font>
    </div>
    </body>
    </html>子页面2:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>Ajax007_02.htm</title>
    </head>
    <style type="text/css">
    body{font-size:12px; font-family:arial; color:#333333; font-weight:bold;}
    td{font-size:12px; font-family:arial; color:#333333; font-weight:bold}
    </style>
    <script type="text/javascript" language="javascript">
    function $(id){
    return 'string'==typeof(id) ? document.getElementById(id) : id;
    }function changeWin(){
    var h=0;
    try{
    h=parseInt($('wh').value)
    }catch(e){
    h=20;
    }
    if(h>=100) h=90; //must be save some space for B page
    parent.document.getElementById('frames').rows=''+h+'%,*'; //change the heiht of top frame
    }
    </script>
    <body>
    <p>Main Frame window</p>
    <p>引用上一个Frame的函数</p>
    <br><input id="btn01" name="btn01" value="隐藏上窗口内容" type="button" onClick="javascript:parent.topFrame.showHide('div01','hide');">
    <input id="btn01" name="btn01" value="显示上窗口内容" type="button" onClick="javascript:parent.topFrame.showHide('div01','show');">
    &nbsp;&nbsp;&nbsp;&nbsp;
    输入窗口高度大小值:<input id="wh" name="wh" value="20" type="text">% 
    <input id="btn01" name="btn01" value="窗口大小更改" type="button" onClick="javascript:changeWin();">
    <p>调用: onClick=&quot;javascript:parent.topFrame.showx();&quot;</p>
    <p>&nbsp;</p>
    Frame name: mainFrame<br>
    Frame src: Ajax007_02.htm
    </body>
    </html>
    看看...