首页 > 代码库 > javascript操作window对象

javascript操作window对象

2024-10-14 01:20:02   205人阅读

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=http://www.mamicode.com/"images/favicon.ico" type="image/x-icon"/>>

        远地都进来看看撒将通过自身的专业优势和有效的信息交流平台，为资金富裕方和资金需求方打造一个专业，诚信，共赢。睿智的服务平台，
        帮助客户实现稳定、安全的財富增值。帮助很多其它优秀的中小型企业融资成功。
        <img id="sohu" class="img" name="xw" src=http://www.mamicode.com/"images/xw_sohu.png" alt="sohu"/>>

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

    </p>
    <p id="status">Ready</p>
    <button id="send">Send Message</button>
    <p>
        <iframe name="nested" src=http://www.mamicode.com/"http://localhost:63342/IDEA-workspace/Demotest/otherdomain.html" width="90%" height="100px"></iframe>>
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对象


联系
我们