HTML5权威指南读书笔记18（第27章）-window对象，获取窗口信息，获取scree信息，与窗口交互，用户提示，基本信息，history对象，pushstate添加条目，使用定时器

最新推荐文章于 2023-02-16 00:23:34 发布

心湖中的石子

最新推荐文章于 2023-02-16 00:23:34 发布

阅读量205

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/weixin_43745804/article/details/110194888

版权

html5 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1、概述

在这里插入图片描述

<script type="text/javascript">
       
       console.log(window.outerWidth);
       console.log(window.outerHeight);
    </script>

2、获取窗口信息

在这里插入图片描述

window.outerWidth

3、Screen对象获取屏幕信息

在这里插入图片描述

<script type="text/javascript">
       
       console.log(window.screen.availHeight);
       console.log(window.screen.availWidth);
    </script>

4、与窗口交互

在这里插入图片描述
未能实现，报window.print（）不是函数

<body>
    <div id="mytext">
        <button id="print">print</button><br/>
        <button id="close">close</button><br/>
        <button  id="scroll">scroll</button><br/>
    </div>  
    <pre id="results"></pre>
    <script type="text/javascript">
       var print=document.getElementById("print");
       var close=document.getElementById("close");
       var scroll=document.getElementById("scroll");

       print.onclick=function(e){
           window.print();
       }
       close.onclick=function(e){
           window.close();
       }
       scroll.onclick=function(e){
           window.scroll(0,200);
       }
    </script>
</body>

5、对用户进行提示

在这里插入图片描述

<script type="text/javascript">
      
       window.alert("here is alert")
       var myconfirm =window.confirm("this is confirm");
       console.log(myconfirm);
       var myprompt=window.prompt("enter a words","hello");
       console.log(myprompt);
    </script>

6、获取基本信息

在这里插入图片描述

7、window.history使用浏览器历史

返回浏览器历史对象
在这里插入图片描述

<body>
    <div id="mytext">
        <button id="print">print</button><br/>
        <button id="close">close</button><br/>
        <button  id="scroll">scroll</button><br/>
    </div>  
    <pre id="results"></pre>
    <script type="text/javascript">
      var print=document.getElementById("print");
      print.onclick=function(){
          window.history.back();//farword(),go()
      }
       
    </script>
</body>

8、pushState向浏览器历史添加条目

   window.history.pushState("?"+"your items")

9、为不同的文档添加条目

for(var i=0;i<length; i++){
        window.history.pushState("otherpage"+"i"+"?"+"your items");
      }

10、postMessage跨文档传递信息

在这里插入图片描述

没看懂也不想看了

11、setTimeOut，setInterval使用计时器方法

在这里插入图片描述

<body>
    <div id="mytext">
        <button id="print">print</button><br/>
        <button id="clear">clear</button><br/>
        <button  id="scroll">scroll</button><br/>
    </div>  
    <pre id="results"></pre>
    <script type="text/javascript">
      var print=document.getElementById("print");
      var clear=document.getElementById("clear");
        print.onclick=function(){
            setTimeout(sayhello,3000);
        }
        
        var myinterval=setInterval(saygoodbay, 2000);
        clear.onclick=function(){
            clearInterval(myinterval);
        }
        function sayhello(){
            console.log("hello everyone");
        }

        function saygoodbay(){
            console.log("goodbye everyone");
        }


    </script>
</body>

心湖中的石子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南读书笔记18（第27章）-window对象，获取窗口信息，获取scree信息，与窗口交互，用户提示，基本信息，history对象，pushstate添加条目，使用定时器

1、概述<script type="text/javascript"> console.log(window.outerWidth); console.log(window.outerHeight); </script>2、获取窗口信息window.outerWidth3、Screen对象获取屏幕信息<script type="text/javascript"> cons
复制链接

扫一扫

专栏目录