javascript操作window对象

Posted 2020-09-25 cynchanpin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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对象的主要内容，如果未能解决你的问题，请参考以下文章

从 TypeScript 类型定义或 GraphQL 片段定义生成 JavaScript 空对象

sublime text 3 添加 javascript 代码片段 ( snippet )

JavaScript：window窗口对象

常用Javascript代码片段集锦

VSCode自定义代码片段——JS中的面向对象编程

JavaScript单行代码，也就是代码片段