• 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.</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>



  • 相关阅读:
    第二次冲刺-个人总结01
    构建之法阅读笔记03
    第一次冲刺-个人总结07
    第十四周总结
    第一次冲刺-个人总结07
    第一次冲刺-个人总结06
    第一次冲刺-个人总结05
    mysql优化
    springmvc常用注解标签详解
    弄懂JDK、JRE和JVM到底是什么
  • 原文地址:https://www.cnblogs.com/cynchanpin/p/7096349.html
Copyright © 2020-2023  润新知