javascript网页特效——窗口和框架

实例一：计算窗口内的框架数量

<script type="text/javascript">         
    function alertFrames(){         //得到框架的总数
        var frames = window.frames; //得到框架数组                
        alert(frames.length);           //用提示框展示框架的总数，也就是数组大小
    }
</script>

实例二：用top操作顶部的框架

<script type="text/javascript">
            //子框架的互相引用
            function alertFrames(){
                //使用top变量得到顶层的父框架，这里就是window
                var topFrame = top;
                //用提示框展示topFrame的html
                alert(topFrame.document.body.innerHTML);            
            }
</script>

实例三：确保网页只能被框架载入

对于框架结构的网站，网页必须在框架里被载入才会达到预期效果。
为了防止用户直接通过网页地址访问网页，可以采取一些手段来确保网页不被一个独立的窗口打开。

<script type="text/javascript">         
    function init(){                        //初始化函数
        if(top == self){                    //判断当前区域是否为顶层窗口
            alert("本网页只能在框架内载入");//提示只能在框架内载入的
            //覆盖原有的网页内容，改为提示内容
            document.body.innerHTML = '<h2>本网页只能在框架内载入</h2>';
            window.close();                 //关闭窗口
        }
    }
</script>   

实例四：是谁打开了子窗口

window.opener引用window.open()的调用者：

<script type="text/javascript">
            //得到是谁打开了子窗口
            function getParentWin(){
                //使用提示框展示父窗口的body内容
                alert(window.opener.document.body.innerHTML);
            }
        </script>

实例五：通过子窗口获取数据输入

parent.html

<script type="text/javascript">
    //为子窗口准备的传值函数
    function passValue(val){        
        alert("子窗口输入的是：" + val);    //用提示框展示结果
    }           
    function openNewWin(){              //打开子窗口
        //使用window的open()函数打开一个子窗口
        var win = window.open("通过子窗口获取数据输入.html");
    }
</script>


child.html
<script type="text/javascript">         
    function passValue(){               //传值
        //获取用户输入的值
        var val = document.getElementById("mytext").value;              
        window.opener.passValue(val);       //调用父窗口的函数传入值
        self.close();                   //关闭子窗口
    }
</script>

实例六：随意改变框架的大小组合

<script type="text/javascript">         
    function moreWidth(){               //变宽
        //获取顶部网页的frameset对象
        var frameSet = top.document.getElementById("left_right");
        frameSet.cols = "300,*";        //修改关于列之间的宽度配置
    }
    //变窄
    function lessWidth(){
        //获取顶部网页的frameset对象
        var frameSet = top.document.getElementById("left_right");
        frameSet.cols = "100,*";        //修改关于列之间的宽度配置
    }
</script>


<!-- 定义框架  -->
        <frameset rows="*" cols="200,*" 
            framespacing="0" frameborder="1" border="1" id="left_right">
            <frame src="随意改变框架的大小组合_left.html" 
                name="leftFrame" noresize="noresize" scrolling="no" border="1">
            <frame src="随意改变框架的大小组合_right.html" 
                name="rightFrame" noresize="noresize" scrolling="no" border="1">
        </frameset>

实例七：巧用self操作当前文档所在的框架或窗口

<!-- 定义框架  -->
        <frameset rows="*" cols="200,*" framespacing="0" 
            frameborder="1" border="1" id="left_right">
            <frame src="" name="leftFrame" noresize="noresize" scrolling="no" border="1">
            <frame src="巧用self操作当前文档所在的框架或窗口_right.html" 
                name="rightFrame" noresize="noresize" scrolling="no" border="1">
        </frameset>


<script type="text/javascript">         
            function flashIt(){         //刷新本网页
                self.location.reload();     //重新加载本网页
            }
</script>
<h2>右边frame</h2>
        <input type="button" value="刷新本网页" onclick="flashIt();"/>