05-javascript window对象的属性

最新推荐文章于 2022-08-10 15:52:44 发布

Linux-小企鹅

最新推荐文章于 2022-08-10 15:52:44 发布

阅读量225

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/u012319379/article/details/53153665

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

window对象的属性

innerHeight:返回文档的显示区高度

innerWidth:返回文档显示区的宽度

通用写法：
window.document.body.clientWidth;

outerheight:包括工具栏，菜单栏等高度
outerwidth:包括滚动条的宽度

    function init(){
        var x = window.document.body.clientWidth;
        var y = window.document.body.clientHeight;
    }

opener,parent属性

 1. opener: 代表的是父窗口.window应用opener，必须要求两个窗口有父子关系
    1.超链接(设置target属性为_blank)
    2.window.open()打开的窗口

 2. parent: 代表的是父窗口.window
       使用地方：
           1. 框架中
           2. 内嵌框架

 3. frames[]: 拿到子窗口

opener实例

01.html
<script type="text/javascript">
<!--
      /*
          window对象的属性:  1. opener: 代表的是父窗口.window
                                    应用opener，必须要求两个窗口有父子关系
                                    1.超链接(设置target属性为_blank)
                                    2.window.open()打开的窗口
                             2. parent: 代表的是父窗口.window
                                    使用地方：1. 框架中
                                              2. 内嵌框架
                             3. frames[]: 拿到子窗口
      */

      function fun(){
         self.open("sub.html") ;
      }
//-->
</script>
<body>
     <input type="text" name="" id = "txt"> 
  <input type="button" value="打开sub.html页面" onclick="fun()">

  <a href = "sub.html" target = "_blank">打开sub.html页面</a>
</body>

sub.html
<script type="text/javascript">
<!--
    //示例： 将子窗口中的文本框中的数据传递到父窗口中的文本框中显示
    function fun(){
        //1.拿到文本框中填写的数据
           var v = document.getElementById("txt").value ;
        //2.拿到父窗口对象
           var w = window.opener ;
        //3.拿到父窗口中的文本框对象
           var txt = w.document.getElementById("txt") ;
        //4.将内容赋值给父窗口中的文本框对象的value属性
            txt.value = v ;
    }
//-->
</script>
<body>
    <input type="text" name="" id = "txt">
 <input type="button" value="传递子窗口的值到父窗口中的文本框" onclick="fun()">
</body>

parent实例

01.html
<script type="text/javascript">
<!--
    function fun(){
        //1.拿到文本框中填写的数据
           var v = document.getElementById("txt").value ;
        //2.拿到子窗口对象
           var w = window.frames[0];
        //3.拿到子窗口中的文本框对象
           var txt = w.document.getElementById("txt") ;
        //4.将内容赋值给父窗口中的文本框对象的value属性
            txt.value = v ;
    }
//-->
</script>
<body>
  姓名：<input type="text" name="" id = "txt"><input type="button" value="传递数据到子窗口中" onclick="fun()">
  <iframe src = "sub1.html"></iframe>
</body>

sub1.html
<script type="text/javascript">
<!--
    function fun(){
        //1.拿到文本框中填写的数据
           var v = document.getElementById("txt").value ;
        //2.拿到父窗口对象
           var w = window.parent;
        //3.拿到父窗口中的文本框对象
           var txt = w.document.getElementById("txt") ;
        //4.将内容赋值给父窗口中的文本框对象的value属性
            txt.value = v ;
    }
//-->
</script>
<body>
     <input type="text" name="" id = "txt"><input type="button" value="传递数据到父窗口中" onclick="fun()">
</body>

对话框

三种对话框：
            1. 消息框：alert() ;
            2. 确认框: confirm() :返回Boolean类型的值
            3. 输入框: prompt(): 返回输入的字符串(了解)

 <script type = "text/javascript">
    while(true)
    {
        if(confirm("你好") == false)//确认框，一定要点确认才能下一步
            continue;

        break;
    }

    var a = prompt("输入年龄：", 12);//弹出一个对话框输入信息
    alert(a);
 </script>

计时器

window对象的计时器：
    1.setTimeout(): 隔一段时间调用某个函数(只调用一次),返回的是一个计时器(理解成一个手表)
     clearTimeout() ：销毁由setTimeout()产生的计时器

    2.setInterval(): 每隔一段时间调用某个函数(多次调用)
     clearInterval(): 销毁由setInterval()产生的计时

<script type="text/javascript">
<!--
     var t ; 
     var t1 ;
    function fun(){
        //拿到p标签的主体内容
        var p= document.getElementById("p") ;
        var v = p.innerHTML ;
        //将主体内类转换为number,转换后赋值回去
        p.innerHTML = v*1-1 ;
        t = setTimeout("fun()",1000) ;
    }

    function fun1(){
        //拿到p标签的主体内容
        var p= document.getElementById("p") ;
        var v = p.innerHTML ;
        //将主体内类转换为number,转换后赋值回去
        p.innerHTML = v*1-1 ;

    }

    function fun2(){
        clearTimeout(t) ;
    }

    t1 = setInterval("fun1()",1000);

    function fun3(){
        clearInterval(t1) ;
    }

    function fun4(){
        t1 = setInterval("fun1()",1000);
    }
//-->
</script>
<body>
  <p id = "p">10</p><br>
  <input type="button" value="演示setTimeout方法" onclick="fun()">
  <input type="button" value="演示clearTimeout方法" onclick="fun2()">
  <input type="button" value="演示setInterval方法" onclick="fun4()">
  <input type="button" value="演示clearInterval方法" onclick="fun3()">

</body>

模态窗体

window.showModelessDialog("你好");

鼠标移动事件

 <style type="text/css">
  div{
     width:300px;
     height:300px;
     border:1px solid red ;
  }
 </style>
</head>
<script type="text/javascript">
<!--
     //示例：当鼠标在div上移动的时候显示鼠标的坐标
    function fun(e){
        var x = e.clientX;
        var y = e.clientY ;

        //显示在文本框中
        var txt = document.getElementById("txt") ;
        txt.value = x + " :" + y ;
    }
//-->
</script>
<body>
  <input type="text" name="" id = "txt">
     <div onmousemove = "fun(event)"></div>
</body>

鼠标悬停和移除事件

<script type="text/javascript">
<!--
    function fun(){
        //拿到p标签对象
        var p = document.getElementById("p") ;
        //定义p的样式
        //p.style.color = "red" ;
        //p.style.border = "5px dashed green" ;
        p.style.backgroundColor = "red" ;
        p.className = "one" ;
    }

    function fun1(){
        //拿到p标签对象
        var p = document.getElementById("p") ;

        p.className = "" ;
    }
//-->
</script>
<body>
   <p onmouseover = "fun()" onmouseout= "fun1()" id = "p">你好</p>
</body>