框架之间传值刷新

时间：2010-09-28 来源：丫头小静

使用框架的基本结构

代码 <body>
    <form id="form1" runat="server">
        <div>
            <iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; width: 100%;
                120px" frameborder="0" src="CenterTop.aspx" scrolling="no"></iframe>
            <table border="1" cellspacing="0" cellpadding="0" width="100%" height="438px" id="tblTotal">
                <tr>
                    <td style="background-repeat: repeat-y" height="100%"
                        width="160px">
                        <iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit;
                            width: 170px; 100%" frameborder="0" src="CenterLeft.aspx" scrolling="auto">
                        </iframe>
                    </td>
                    <td height="100%">
                        <iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; width: 100%;
                            100%" frameborder="0" src="CenterMaster.aspx"></iframe>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="CenterBottom.aspx"
                            style="z-index: 1; visibility: inherit; width: 100%; 220px"></iframe>
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>

由于本程序美工设计时并未考虑框架结构，所以不是很规整。

代码 <body>
    <iframe id="frmTop" name="frmTop" style="z-index: 1; visibility: inherit; width: 100%;
        80px" frameborder="0" src="Top.aspx" scrolling="no"></iframe>
    <div class="middlepic">
        <div class="contitle">
            <span class="title_1"></span></div>
        <div class="FAQcontent">
            <div class="FAQcontentleft">
                <img src="images/left.gif" /></div>
            
            <div class="FAQmain">
                <div class="mainleftFAQ" style="600px; width: 215px">
                    <iframe id="frmLeft" name="frmLeft" style="z-index: 2; visibility: inherit; width: 215px;
                        100%" frameborder="0" src="Left.aspx" scrolling="auto"></iframe>
                </div>
                
                <div class="conFR">
                    <div class="top">
                    </div>
                    <iframe id="mainFrame" name="mainFrame" style="z-index: 1; visibility: inherit; width: 100%;
                        100%;  height :480px" frameborder="0" src="All.aspx?type=All&status=E" scrolling="no">
                    </iframe>
                    <div class="yuan">
                    </div>
                </div>
            </div>
            <div class="FAQconright">
                <img src="images/right.gif" /></div>
        </div>
        <iframe id="frmBottom" frameborder="0" name="frmBottom" scrolling="no" src="Bottom.htm"
            style="z-index: 1; visibility: inherit; width: 100%; 103px"></iframe>
    </div>
</body>

页面除了顶部和底部外，主要包括左侧项目列表和右侧的实际内容。其中内容页面又有上方的菜单栏。页面所在位置是由左侧和上方共同决定的。为了点击上方按钮时同时自动刷新左侧列表链接目的地址。所以使用了JQuery代码。

代码 <script  src ="js/jquery-1.4.2.js" type ="text/javascript" ></script>
    <script language ="javascript" type ="text/javascript" >
    //点击上方按钮时刷新左侧列表的链接
        $(document).ready(
        function () {
            var status = $("#hidStatus").val();
            var type = $("#hidType").val();
            $("#frmLeft", parent.document.body).attr("src", "Left.aspx?status=" + status + "&type=" + type); ;
            }
        )
    </script>

刚开始的时候由于不太熟悉jquery，耽误了一点时间。现在搞定了，记录下。