javascript操作window对象

document.defaultView或全局变量window——获取一个window对象。

1）获取窗体信息

innerHeight、innerWidth——获取窗体内容区域的高度、宽度。

outerHeight、outerWidth——获取窗体的高度、宽度（包括边框和菜单条等）；

pageXOffset、pageYOffset——获取窗体从左上角算起水平/垂直滚动过的像素数；

screen——返回一个描写叙述屏幕的Screen对象；

screen.availHeight、screen.availWidth——屏幕上可供显示窗体部分的高度、宽度（排除工具栏和菜单条之外）；

screen.colorDepth——屏幕的颜色深度；

screen.height、screen.width——屏幕的高度、宽度；

screenLeft/screenX——获取从窗体左边缘到屏幕左边缘的像素（注意浏览器兼容性）。

screenTop/screenY——获取从窗体上边缘到屏幕上边缘的像素（注意浏览器兼容性）；

2）与窗体进行交互

blur()——让窗体失去键盘焦点；

close()——关闭窗体（不是全部浏览器都同意某个脚本关闭窗体）。

focus()——让窗体获得键盘焦点。

print()——提示用户打印页面；

scrollBy(<x>,<y>)——让文档相对于当前位置进行滚动。

scrollTo(<x>,<y>)——滚动到指定的位置。

stop()——停止加载文档。

3）对用户进行提示

alert(<msg>)——向用户提示一个对话框窗体并等候其被关闭；

confirm(<msg>)——显示一个带有确认和取消提示的对话框窗体（返回一个布尔值）；

prompt(<msg>,<val>)——显示对话框提示用户输入一个值（返回字符串）；

showModalDialog(<url>)——弹出一个窗体，显示指定的URL;

4)history对象的属性和方法

back()——在浏览历史中后退一步；

forward()——在浏览历史中前进一步；

go(<index>)——转到相对于当前文档的某个浏览历史位置。正值是前进，负值是后退；

length——返回浏览历史中的项目数量。

pushState(<state>,<title>,<url>)——向浏览器历史加入一个条目；

replaceState(<state>,<title>,<url>)——替换浏览器历史中的当前条目；

state——返回浏览器历史中关联当前文档的状态数据；

5）使用跨文档消息传递

postMessage(<msg>,<origin>)——给还有一文档发送指定的消息；

寻找内嵌的window:

defaultView——返回活动文档的window;

frames——返回文档内嵌iframe元素的window对象数组；

opener——返回打开当前浏览上下文环境的window。

parent——返回当前window的父window;

self——返回当前文档的window；

top——返回最上层的window；

length——返回文档内嵌的iframe元素数量；

[<index>]——返回指定索引位置内嵌文档的window。

[<name>]——返回指定名称内嵌文档的window；

6）使用计时器

setTimeout(<function>,<time>)——创建一个计时器，等待time毫秒后调用指定的函数；

clearTimeout(<id>)——撤销某个超时计时器。

setInterval(<function>,<time>)——创建一个计时器，每隔time毫秒调用指定的函数；

clearInterval(<id>)——撤销某个时间间隔计时器；

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>上海远地资产管理有限公司</title>

    <meta name="author" content="jason"/>

    <meta name="description" content="上海远地资产管理有限公司（简称：远地资产），是一家专业的互联网金融服务平台."/>

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>

    <style>

        table{

            border-collapse: collapse;

            border:thin solid black;

        }

        th,td{

            padding: 4px;

        }

    </style>

</head>

<body>

    <table border="1">

        <tr>

            <th>outerWidth:</th><td id="ow"></td><th>outerHeight:</th><td id="oh"></td>

        </tr>

        <tr>

            <th>innerWidth:</th><td id="iw"></td><th>innerHeight:</th><td id="ih"></td>

        </tr>

        <tr>

            <th>screen.width:</th><td id="sw"></td><th>screen.height:</th><td id="sh"></td>

        </tr>

    </table>

    <p id="buttons1">

        <button id="scroll">scroll</button>

        <button id="print">print</button>

        <button id="close">close</button>

    </p>

    <p id="buttons2">

        <button id="alert">alert</button>

        <button id="confirm">confirm</button>

        <button id="prompt">prompt</button>

        <button id="modal">modal dialog</button>

    </p>

    <p id="buttons3">

        <button id="back">back</button>

        <button id="forward">forward</button>

        <button id="go">go</button>

    </p>

    <p id="buttons4">

        <button id="banana">banana</button>

        <button id="apple">apple</button>

    </p>

    <p id="msg"></p>

    <p>

        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理財服务、財富管理以及产品方案推荐。

远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢。睿智的服务平台，

        帮助客户实现稳定、安全的財富增值。帮助很多其它优秀的中小型企业融资成功。

        <img id="sohu" class="img" name="xw" src="images/xw_sohu.png" alt="sohu"/>

        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理財服务、財富管理以及产品方案推荐。

        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢，睿智的服务平台，

        帮助客户实现稳定、安全的財富增值。帮助很多其它优秀的中小型企业融资成功。

<img id="xw" class="img" src="images/xw_china.png" alt="新闻网图标"/>

        远地本着“构筑诚信，永续发展”的理念为客户提供专业的理財服务、財富管理以及产品方案推荐。

        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业。诚信，共赢。睿智的服务平台，

        帮助客户实现稳定、安全的財富增值。帮助很多其它优秀的中小型企业融资成功。

</p>

    <p id="status">Ready</p>

    <button id="send">Send Message</button>

    <p>

        <iframe name="nested" src="http://localhost:63342/IDEA-workspace/Demotest/otherdomain.html" width="90%" height="100px"></iframe>

    </p>

    <p id="msg2"></p>

    <p id="buttons5">

        <button id="settime">Set Time</button>

        <button id="cleartime">Clear Time</button>

        <button id="setinterval">Set Interval</button>

        <button id="clearinterval">Clear Interval</button>

    </p>

    <script>

        //获取窗体信息

        document.getElementById("ow").innerHTML=window.outerWidth;

        document.getElementById("oh").innerHTML=document.defaultView.outerHeight;

        document.getElementById("iw").innerHTML=window.innerWidth;

        document.getElementById("ih").innerHTML=window.innerHeight;

        document.getElementById("sw").innerHTML=window.screen.width;

        document.getElementById("sh").innerHTML=window.screen.height;

    </script>

    <script>

        //与窗体进行交互

        var buttons=document.getElementById("buttons1").getElementsByTagName("button");

        for(var i=0;i<buttons.length;i++){

            buttons[i].onclick=handleButtonPress;

        }

        function handleButtonPress(e){

            if(e.target.id=="print"){

                window.print();

            }else if(e.target.id=="close"){

                window.close();

            }else{

                window.scrollTo(0,800);

            }

        }

    </script>

   <script>

       //对用户进行提示

       var buttons2=document.getElementById("buttons2").getElementsByTagName("button");

       for(var i=0;i<buttons2.length;i++){

           buttons2[i].onclick=handleButtonPress2;

       }

       function handleButtonPress2(e){

           if(e.target.id=="alert"){

               window.alert("这是一个提示框");

           }else if(e.target.id=="confirm"){

               var confirmed=window.confirm("这是一个确认框，确定要继续？")

               alert("确定吗？"+confirmed);

           }else if(e.target.id=="prompt"){

               var response=window.prompt("输入一个单词","hello");

               alert("这个单词是："+response);

           }else if(e.target.id=="modal"){

               window.showModalDialog("http://www.sina.com.cn");

           }

       }

   </script>

    <script>

        //在浏览历史中导航

        var buttons3=document.getElementById("buttons3").getElementsByTagName("button");

        for(var i=0;i<buttons3.length;i++){

            buttons3[i].onclick=handleButtonPress3;

        }

        function handleButtonPress3(e){

            if(e.target.id=="back"){

                window.history.back();

            }else if(e.target.id=="forward"){

               window.history.forward();

            }else if(e.target.id=="go"){

                window.history.go("http://www.sina.com.cn");

            }

        }

    </script>

    <script>

        //向浏览历史加入一个条目

        var sel="no selection made";

        if(window.location.search=="?

banana"){

            sel="Selection:Banana";

        }else if(window.location=="?apple"){

            sel="Selection:Apple";

        }

        document.getElementById("msg").innerHTML=sel;

        var buttons4=document.getElementById("buttons4").getElementsByTagName("button");

        for(var i=0;i<buttons4.length;i++){

            buttons4[i].onclick=function(e){

                document.getElementById("msg").innerHTML= e.target.innerHTML;

                //window.history.pushState("","","otherdomain.html?"+ e.target.id);

                //替换浏览器历史中的当前条目

                window.history.replaceState("","","otherdomain.html?

"+ e.target.id);

            }

        }

    </script>

    <script>

        //跨文档问题

        document.getElementById("send").onclick=function(){

            //定位window对象并调用postMessage方法

            window["nested"].postMessage("I like apples","http://localhost:63342");

            document.getElementById("status").innerHTML="Message Sent";

        }

    </script>

    <script>

        var buttons5=document.getElementById("buttons5").getElementsByTagName("button");

        for(var i=0;i<buttons5.length;i++){

            buttons5[i].onclick=handleButtonPress4;

        }

        var timeID;

        var intervalID;

        var count=0;

        function handleButtonPress4(e){

            if(e.target.id=="settime"){

                timeID=setTimeout(function(){

                    displayMsg("Timeout Expired");

                },5000);

                displayMsg("Timeout set");

            }else if(e.target.id=="cleartime"){

                clearTimeout(timeID);

                displayMsg("Timeout cleared");

            }else if(e.target.id=="setinterval"){

                intervalID=setInterval(function(){

                    displayMsg("Interval Expired. Counter:"+count++);

                },2000);

                displayMsg("Interval set");

            }else if(e.target.id=="clearinterval"){

               clearInterval(intervalID);

                displayMsg("Interval cleared");

            }

        }

        function displayMsg(msg){

            document.getElementById("msg2").innerHTML=msg;

        }

    </script>

</body>

</html>

otherPage代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Other Page</title>

</head>

<body>

<h1 id="banner">This is the nested document</h1>

<script>

    //监听message事件

    window.addEventListener("message",receiveMessage,false);

    function receiveMessage(e){

        if(e.origin=="http://localhost:63342"){

            displayMessage(e.data);

        }else{

            displayMessage("message discarded");

        }

    }

    function displayMessage(msg){

        document.getElementById("banner").innerHTML=msg;

    }

</script>

</body>

</html>

巴特西

javascript操作window对象

最新文章

热门文章