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();"/>