HTML frameset框架

main.php页面

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>title</title>
</head>

<frameset rows="30%,*" framespacing="1" frameborder="1">
    <frame name="topFrame" scrolling="yes" frameborder="1" src="top.php">
    <frameset cols="20%,*">
        <frame name="leftFrame" src="left.php">
        <frame name="rightFrame" src="right.php">
    </frameset>
</frameset>

<!--
framespacing 表示框架与框架间保留的空白的距离

frameborder 设定框架的边框,取值为(1|0),缺省值为1
1 -- 在每个页面之间都显示边框
0 -- 不显示边框
-->

<!-- 不管嵌套了几层frame，任一frame页面JS通过parent.frames["frameName"].document即可找到任一frame页面对象 -->
<!-- a标签target属性也是，任一frame页面通过<a href="#" target="frameName">可以改变任一frame页面地址指向 -->
<!-- frameName为在框架从开始到结束间的任意<frame>标签的name值-->
</html>

 

top.php页面

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>top</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">

<h3>Logo of top</h3>
<input type="text" name="txt1" id="txt1"/>

</body>
</html>

 

left.php页面

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>left</title>
<script type="text/javascript">
//所有二级菜单点击显示隐藏效果全由该段JS完成，下面的CSS只是更改了UL列表的显示样式
var nowOpenChildrenId = "";//存储最后一次点击的父菜单的子菜单table或ul的id值
function DoMenu(clickId){
    var doChildrenDOM = document.getElementById(clickId);//确定要操作的子菜单table或ul的DOM
    doChildrenDOM.style.display = (doChildrenDOM.style.display == "" ? "none" : "");//如果要操作的子菜单是打开的则将其关闭，否则打开
    if((nowOpenChildrenId!="")&&(clickId!=nowOpenChildrenId)){
        document.getElementById(nowOpenChildrenId).style.display = "none";//将其他不是要操作的子菜单关闭
    }
    nowOpenChildrenId = clickId;//将操作的子菜单ID值赋给全局变量
}
</script>
<style type="text/css">
<!--
ul,li,a{margin:0;padding:0;}

body {
    font-family: Arial,Verdana,Helvetica,sans-serif;
    font-size:12px;
}

#mainMenu_ul {
    width:180px;
    list-style-type: none;
    text-align:left;
    margin:10px 0 0 10px;
}

#mainMenu_ul a {
    width: 180px;
    display: block;
    padding:5px 0 5px 20px;
}

#mainMenu_ul li {
    background:#cccccc;
    border-bottom:#ffffff 1px solid;
    float:left;
}

#mainMenu_ul li a:hover{
    background:#cc0000;
}

#mainMenu_ul a:link  {
    color:#666;
    text-decoration:none;
}

#mainMenu_ul a:visited  {
    color:#666;
    text-decoration:none;
}

#mainMenu_ul a:hover  {
    color:#ffffff;
    text-decoration:none;
    font-weight:bold;
}

#mainMenu_ul li ul {
    list-style:none;
    text-align:left;
    padding:0;
}

#mainMenu_ul li ul li{
    background: #ebebeb;
}

#mainMenu_ul li ul a{
    padding-left:20px;
    width:180px;
}

#mainMenu_ul li ul a:link  {
    color:#666;
    text-decoration:none;
}
#mainMenu_ul li ul a:visited  {
    color:#666;
    text-decoration:none;
}
#mainMenu_ul li ul a:hover {
    color:#f3f3f3;
    text-decoration:none;
    font-weight:normal;
    background:#cc0000;
}

#mainMenu_ul li:hover ul {
    left: auto;
}
#mainMenu_ul li.sfhover ul {
    left: auto;
}
#content {
    clear: left;
}
-->
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">

<table>
    <tr>
        <TD>

            <!--  日历系统开始    -->
            <TABLE>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td><a href="javascript:" target="mainFrame" onClick="DoMenu('childMenu1_table');" >上和左管理</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </TABLE>

            <table id="childMenu1_table" style="display: none">
                <tr>
                    <td><a id="topFrame_a" href="http://www.126.com" target="topFrame">Change topFrame</a></td>
                </tr>
                <tr>
                    <td><a id="leftFrame_a" href="http://www.126.com" target="leftFrame">Change leftFrame</a></td>
                </tr>
            </table>

            <!--  消息系统开始    -->
            <TABLE>
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td><a href="javascript:" target="mainFrame" onClick="DoMenu('childMenu2_table');" >上和右管理</a></td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </TABLE>

            <table id="childMenu2_table" style="display: none">
                <tr>
                    <td><a id="topFrame_a" href="http://www.126.com" target="topFrame">Change topFrame</a></td>
                </tr>
                <tr>
                    <td><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></td>
                </tr>
            </table>
        </TD>
    </tr>
</table>

<ul id="mainMenu_ul">
    <li><a href="#"  onclick="DoMenu('childMenu1_ul')">menu1</a>
        <ul id="childMenu1_ul" style="display: none">
            <li><a id="topFrame_a" href="http://www.126.com" target="topFrame">Change topFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
        </ul>
    </li>
    <li><a href="#" onclick="DoMenu('childMenu2_ul')">menu2</a>
        <ul id="childMenu2_ul" style="display: none">
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
        </ul>
    </li>
    <li><a href="#" onclick="DoMenu('childMenu3_ul')">menu3</a>
        <ul id="childMenu3_ul" style="display: none">
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
        </ul>
    </li>
    <li><a href="#" onclick="DoMenu('childMenu4_ul')">menu4</a>
        <ul id="childMenu4_ul" style="display: none">
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
            <li><a id="rightFrame_a" href="http://www.126.com" target="rightFrame">Change rightFrame</a></li>
        </ul>
    </li>
</ul>


<input type="button" name="rightFrame_but" id="rightFrame_but" value="改变top或right框架text内容"/>




<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" defer>
$("#rightFrame_but").click(function(){
    //jquery方式
    var top_doc_jquery=$(parent.frames["topFrame"].document);
    top_doc_jquery.find("#txt1").val("toptop");

    var right_doc_jquery=$(parent.frames["rightFrame"].document);
    right_doc_jquery.find("#txt1").val("rightright");

    //普通JS方式
    //parent.frames["rightFrame"].document.getElementById("txt1").value="asdfasgasdg";
    //parent.frames["topFrame"].document.getElementById("txt1").value="asdfasgasdg";

    //parent.frames["rightFrame"].document.body.innerHTML="asdgsgaaaaaaaaaaa";
});
</script>

</body>
</html>

 

right.php页面

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>right</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">

<h3>Logo of right</h3>
<input type="text" name="txt1" id="txt1"/>

</body>
</html>
posted @ 2012-09-04 22:09  风吹屁股凉冰冰  阅读(487)  评论(0)  编辑  收藏  举报