js的window对象与属性的使用

原创

wespten 2023-02-24 00:05:19 博主文章分类：全栈前端开发 ©著作权

©著作权归作者所有：来自51CTO博客作者wespten的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.BOM的概述
browser object modal :浏览器对象模型。
浏览器对象：window对象。
Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

2. window对象

window对象是BOM中所有对象的核心。BOM Browser Object Model

3.window对象的属性

window.open(), (打开窗口)
window.close(), (关闭一个窗口)
window.self()(窗口本身)  
window.focus()(使当前的窗口在所有窗口之前. )
window.status=”内容” (js中状态栏显示内容:)
window.navigate(”http://www.google.com”); （js中的窗口重定向:）
window.print() (js中的打印:)
window.prompt(”message”,”defaultreply”); （js中的提示输入框:）
window.scroll(x,y) (js中的窗口滚动条)
window.scrollby（js中的窗口滚动到位置:）
window.history.back()返回上一页
window.history.forward()返回下一页,
window.history.go(返回第几页,也可以使用访问过的url) 如果是0那么就是刷新
history.length 
window.createElement

1.(位置类型-获得浏览器的位置)
IE:
window.screenLeft
可以获得浏览器距屏幕左上角的左边距
window.screenTop
可以获得浏览器距屏幕左上角的上边距

FF:
alert(screenX)
alert(screenY)

//IE
左边距
alert(screenLeft)
上边距
alert(screenTop)

//FF
左边距
alert(screenX)
上边距
alert(screenY)

(获得浏览器的尺寸)

FF:window.innerWidth 获得窗口的宽度
window.innerHeight 获得窗口的高度

//FF:
alert(window.innerWidth);
alert(window.innerHeight);
//IE:
alert(document.documentElement.clientWidth)
alert(document.documentElement.clientHeight)

2.窗体控制

screen对象记录了客户端显示屏的信息

a.属性

availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。

availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。

height 返回显示屏幕的高度。

width 返回显示屏幕的宽度。

<script>
  document.write(screen.availHeight)
  document.write("<br/>")
  document.write(screen.height)
   document.write("<hr/>")
  document.write(screen.availWidth)
   document.write("<br/>")
  document.write(screen.width)
</script>

b.方法

对窗体的移动，window.moveBy(x,y) 相对于当前位置沿着X\Y轴移动指定的像素，如负数是反方向。moveTo(x,y) 相对于浏览器的左上角沿着X\Y轴移动到指定的像素，如负数是反方向。

窗体尺寸的改变，resizeBy(x,y) 相对于当前窗体的大小，调整宽度和高度。resizeTo(x,y) 把窗体调整为指定宽度和高度

script>
//窗体控制
//位置
moveBy(100,100);
//moveTo(200,200)
//尺寸
 window.resizeBy(100,100)
resizeTo(400,400)
</script>

对窗体滚动条的控制，scrollBy(x,y) 相对于当前滚动条的位置移动的像素(前提有滚动条)。scrollTo(x,y) 相对于当前窗口的高度或宽度，移动到指定的像素

scrollBy(0,100)
scrollTo(0,200)

innerHeight:
innerWidth: IE不支持

</head>
  <script type="text/javascript">
  <!--
      /*
      window对象的属性：
            1.innerHeight: 返回文档显示区的高度  
            2.innerWidth: 返回文档显示区的宽度   IE不支持
              通用写法： window.document.body.clientWidth ;
            3. outerheight  包括了工具栏，菜单栏等的高度
            4. outerwidth   包括滚动条的宽度

      */
    function init(){
      var x = window.document.body.clientWidth ;
      var y = window.document.body.clientHeight ;
      alert(x + ":" + y) ;
    }
  //-->
  </script>
 <body onload = "init()">
       <p>你好</p>
 </body>

3.window.event window事件

获取事件对象，当没有事件发生的时候为null。

window.event
 window.onload=function  (e) {
   e
   var ev=e||window.event;
}

a.鼠标事件

相对于浏览器位置的(左上角为（0,0)）
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置

相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY

window.onload=function  (e) {
     window.event
   var ev=e||window.event;
   var div1=document.getElementById("div1");
     document.onmousemove=function  (e) {
       var ev=e||window.event;
     var cx=ev.clientX;
     var cy=ev.clientY;
     var sx=ev.screenX;
     var sy=ev.screenY;
     div1.innerHTML="cx:"+cx+"--cy:"+cy+"<br/>sx:"+sx+"--sy:"+sy;
   }
}

<div id="div1" style="width:200px;height:200px;border:1px solid red">

相对于事件源的位置
IE:
offsetX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
offsetY

FF:
layerX 当鼠标事件发生的时候，鼠标相对于事件源X轴的位置
laterY

window.onload=function  (e) {
     window.event
   var ev=e||window.event;
   var div1=document.getElementById("div1");
     div1.onclick=function  (e) {
     var ev=e||window.event;
   var ox=ev.offsetX ||ev.layerX;
   var oy=ev.offsetY ||ev.layerY;
     div1.innerHTML="ox:"+ox+"--oy:"+oy;
     }

具体使用

模拟窗口拖拽

divs=document.createElement("div");   
 divs.onmousedown=function  (e) {
        var ev=e||window.event;
        var ox=ev.offsetX ||ev.layerX;//第一次点击div不能动，相对于事件源的位置
       var oy=ev.offsetY ||ev.layerY;
     var ok=true;//标识鼠标放开的时候还移动
    this.onmousemove=function  (e) {//移动的时候跟随鼠标移动
       if(ok){
       var ev=e||window.event;
       var cx=ev.clientX;
       var cy=ev.clientY;
       this.style.top=cy-oy+"px";//绝对定位
       this.style.left=cx-ox+"px";
       }
    }
    this.onmouseup=function  () {
         if(ok){
       ok=false;
     }
     }
     }

<input type="button" id="but">

b.键盘事件对象

keyCode 获得键盘码
空格:32 回车13 左上右下：37 38 39 40
altKey 判断alt键是否被按下按下是true 反之是false 布尔值
ctrlKey 判断ctrl键
shiftKey 判断shift键
type 用来检测事件的类型主要是用于多个事件通用一个事件处理程序的时候

document.body.onkeydown=function  (e) {
     var ev=e||window.event;
     ev.keyCode
     ev.altKey
     ev.type
}

具体使用

点击提交，内容自动读取

<Script>
  window.onload=function  () {
    var one=document.getElementById("one");
    var texts=document.myform.texts;
  var but=document.myform.but;
  but.onclick=texts.onkeydown=function  (e) {//回车
     var ev=e||window.event;
       if(ev.type=="click" ||(ev.type=="keydown" && ev.keyCode==13 && ev.ctrlKey==true)){
        var elep=document.createElement("p");
      elep.innerHTML=texts.value;
      elep.className="pone";
      one.appendChild(elep);
      texts.value="";

     }
  }

  }
</script>


<body>
<div id="one" style="width:400px; background-color:#eeeeee;padding:10px">
  <h3>
     留言记录:
  </h3>
  <hr/>
  <p class="pone">
     你好
  </p>
</div>
<form name="myform">
  <textarea name="texts" cols=50 rows=10>
  </textarea>
  <input type="button" value="提交" id="but">
</form>
</body>

4.关系类型

A.parent返回父窗口
B.top返回顶层窗口

C.self===window

D.stutas 设置窗口状态栏的文本

<script>
  window.onload=function  () {
     alert(top===parent)
  window.status="自定义的状态栏文字"
  alert(frames[0])
  }
</script>

<frameset rows="20%,*">
   <frame src="top.html" >
   <frameset cols="20%,*" >
   <frame src="left.html" >
   <frame src="right.html" >
   </frameset>
</frameset>

self :等同于window对象
opener：当前打开窗口的父窗口对象，支持opener.opener…的多重继续。
2种情况下使用opener:
1.使用winodw.open()方法打开的页面
2.超链（里面的target属性要设置成_blank）
open方法，是打开一个页面.

js中分为两种窗体输出:模态和非模态.window.showmodaldialog(),window.showmodeless()

js的window.open()方法的使用

js的window对象与属性的使用_鼠标事件

open(string method,string url,boolean asynch,String username,string password)

指定和服务器端交互的HTTP方法，URL地址，即其他请求信息；
method:表示http请求方法，一般使用"GET","POST".
url：表示请求的服务器的地址；
asynch：表示是否采用异步方法，true为异步，false为同步；
后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。

var url = "completeFormone.html?s=" + Math.random()+"&installAcceptId="+rows[0].installAcceptId;
            window.open(url);

打开新的窗口，open(url,name,feafurse,replace) 通过脚本打开新的窗口。

open("test.html","windows","status=0,menubar=0,toolbar=0")
 window.onload=function  () {
    var names=document.getElementById("names");
    var but=document.getElementById("but");
    but.onclick=function  () {
      open("test.html","windows","status=0,menubar=0,toolbar=0")
    }
 }

模态和非模态.window.showmodaldialog(),window.showmodeless()

showmodaldialog(”url”[,arguments][,features])

重新打开一个页面

<script type="text/javascript">
  <!--
    function fun(){
    
      window.open("sub.html","","width=200,height=200,status=no,titlebar=no,menubar=no,toolbar=no,resizable=0") ;
    }
  //-->
  </script>
 <body>
  <input type="button" value="打开sub.html页面" onclick="fun()">
 </body>

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>

openWindow()参数的传递与关闭刷新

点击弹出一个新窗口

afvButton.click(function(){
    debugger;
    var orandid = $($("body input[id='orandid_view_act']"),$("div[id='divMain']",$("body",parent.document)).context.activeElement).val();
    var volid = _grid.getIds();
    openWindow(volid+"&volType=1",orandid);
  })

function openWindow(ids,orandid){
  var options = {
    modal : true,
    title : "站箱调压器AFV检修记录",
    collapsible : false,
    minimizable : false,
    maximizable : false,
    closable : true,
    closed : false
  };
  var uid = "self_card_";
  options["id"] = uid;
  winFormDesigner = UIFactory.getUI(uid);
  if(!winFormDesigner){
    winFormDesigner = UIFactory.create(xpad.ui.Window, options);
  }
  var root = jQuery("body");
  var offset = root.offset();
  var winleft = 0;
  var wintop = 0;
  var newSize = {};
  newSize["left"] = 0;
  newSize["top"] = 0;
  newSize["width"] = jQuery("body").width();
  newSize["height"] = jQuery("body").height();
  winFormDesigner.window("resize", newSize);
  setTimeout(function(){
      winFormDesigner.loadURL(Leopard.getContextPath() + "/platform/views/cusviews/devMatainView/afvVoltage.jsp?ids="+ids+"&orandid="+orandid);
    
  }, 0);
}

设置窗口的滚动条

为class为list_wrap增加overflow：auto属性，并动态设置高度

如果内容被修剪，则浏览器会显示滚动条，以便查看其余内容

<script type="text/javascript">
$(function(){
var height = $(window).height();
$(".list_wrap").css("height",height); 
})
</script>

参数的传递

jsp获取openWindow传递的参数

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<input id="root" type="hidden" value="${ctx }"/>
<input id="ids" type="hidden" value="<%=request.getParameter("ids") %>"/>
<input id="volType" type="hidden" value="<%=request.getParameter("volType") %>"/>
<input id="orandid" type="hidden" value="<%=request.getParameter("orandid") %>"/>

js获取jsp页面的值

var root = null;
var ids = null;
var xcbh = null;


$(document).ready(function() {
  root = $("#root").val();
  ids = $("#ids").val();
  volType = $("#volType").val();
  orandid = $("#orandid").val();
  initpage();
});

function initpage(){
  var isRead = $("#isRead").val();
  if(isRead && isRead=="true"){
    $(".tb_query").show();
  }else{
    $(".tb_query").hide();
  }
  root = $("#root").val();
  
  showTime();
  
  if(ids!="null"){
    readxctyz();
    readxctyzx();
  }
  var timer = "";
  $("#save").click(function(){
    xctyz();
    $(this).attr("disabled", true); 
    timer = setTimeout(function(){
      $("#save").attr("disabled", false); 
        },6000);

  })
  
   $("#reset").click(function(){
        tjbxxcz();
        tyzxccz();
  })
}

后台接收参数

@SuppressWarnings("unchecked")
  @RequestMapping("/Addxctyz")
  @ResponseBody
  public Boolean Addxctyz(HttpServletRequest request, HttpServletResponse response,String requestParam){
    String orandid = request.getParameter("orandid ");
    String ids = request.getParameter("ids");
}

关闭openwindow刷新页面

在外面div设置刷新按钮

if($("#reloadGrid").length==0){
  $("#SY_TYZJKXC-QForm .formBody").append("<button id='reloadGrid' style="dispaly:none">刷新</button>");
  $("#reloadGrid").hide();
  $("#reloadGrid").click(function(){
    _grid.reload();
  });
}

返回刷新外层div

$.ajax({  
        url:root + "/AddAfv",  
        data:param,  
        type:"post",  
        dataType:"json",  
        success:function(data){  
            alert("保存成功");  
            debugger;
            $($("#reloadVolGrid",$("#layout_RECODR_MAINTAIN_VOLTAGE_listbar",parent.$(".panel window").context))).click();
        },  
        error:function(){  
            alert("服务器正忙，请稍后重试");  
        }  
    })

窗口全屏大小:

<script>function fullscreen(){ this.moveto(0,0);this.outerwidth=screen.availwidth;this.outerheight=screen.availheight;}window.maximize=fullscreen;</script>

close方法

<body>
  <script type="text/javascript">
  <!--
    window.close() ;
  //-->
  </script>
 </body>

parent：是打开窗口的父窗口对象

2种情况下使用parent:
1.iframe 框架
2.frame 框架
frames[]: 数组类型，代表子窗口的window对象的集合,可以通过frames[索引]拿到子窗口的window对象。
示例：父子窗口相互传参.

<title>window对象的parent属性</title>
 </head>
  <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

</head>
  <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() ;
3)输入框 prompt() ; (了解)

<script type="text/javascript">
  <!--
    /*
      三种对话框：1. 消息框：alert() ;
              2. 确认框: confirm() :返回Boolean类型的值
            3. 输入框: prompt(): 返回输入的字符串(了解)
    */
    //window.alert("你好") ;

    /*while(true){
      if(confirm("你爱我吗？") == false)
         continue ;
      break ;
    }*/

    var a = prompt("请输入年龄：",12) ;
    alert(a) ;
  //-->
  </script>

window的模态窗体

<body>
    <script type="text/javascript">
    <!--
       /*
          模态窗体:
       */

     //  window.showModalDialog("你好") ;  
      window.showModelessDialog("你好");
    //-->
    </script>
 </body>

history对象

history对象包含浏览器访问过的url，浏览器的历史记录访问

<Script>
  window.onload=function  () {
     var one=document.getElementById("one");
   one.onclick=function  () {
      history.forward()
            history.back()
    history.go(-3)
    history.go(3)
   }
  }
</script>

<body>
<p>
   history1.html
</p>
<script>
  alert(history.length)
</script>
<a href="history2.html">链接到2</a>
<input type="button" value="前进" id="one">

</body>

a. forward()前进 b. back() 后退 c. go(n) 正数是前进，负数是后退.

</head>
   <script type="text/javascript">
   <!--
      /*
         history对象存储了访问过的页面。
      */

      function fun(){
        history.forward();
      }
   //-->
   </script>
 <body>
    <a href = "b.html">b.html</a>
    <input type="button" value="前进" onclick="fun()">
 </body>

b.html

<script type="text/javascript">
   <!--
      /*
         history对象存储了访问过的页面。
      */

      function fun(){
        history.forward();
      }

      function fun1(){
         history.back() ;
      }

      function fun2(){
         history.go(2) ;
      }
   //-->
   </script>
 <body>
    <a href = "c.html">c.html</a>
    <input type="button" value="前进" onclick="fun()">
    <input type="button" value="后退" onclick="fun1()">
    <input type="button" value="直接去d页面" onclick="fun2()">
 </body>

c.html

<script type="text/javascript">
   <!--
      /*
         history对象存储了访问过的页面。
      */

      function fun(){
        history.forward();
      }

      function fun1(){
         history.back() ;
      }

      function fun2(){
         history.go(-2) ;
      }
   //-->
   </script>
 <body>
    <a href = "d.html">d.html</a>
    <input type="button" value="前进" onclick="fun()">
    <input type="button" value="后退" onclick="fun1()">
    <input type="button" value="直接去a页面" onclick="fun2()">
 </body

d.html

<script type="text/javascript">
   <!--
      /*
         history对象存储了访问过的页面。
      */

      function fun1(){
         history.back() ;
      }

      function fun2(){
         history.go(-3) ;
      }
   //-->
   </script>
 <body>
    <input type="button" value="后退" onclick="fun1()">
    <input type="button" value="直接去a页面" onclick="fun2()">
 </body>

location对象

location对象包含有当前url的相关信息
1.href 属性：是指要连接到其他的URL，返回完整的url
写法一、window.location.href='demo_window对象的close方法.html' ；
写法二、window.location='demo_window对象的close方法.html' ；

1.reload方法: 刷新
写法： window.location.reload() ；

2.search 返回url?后面的查询部分

3.protocol(http:),

4.hostname(www.example.com)

5.port(80)

6.host(www.example.com:80)

7.pathname(”/a/a.html”)

8.hash(”#giantgizmo”,指跳转到相应的锚记)

方法

assign() 加载新的文档

reload(boolean) 重新加载文档, 当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。

replace() 用新的文档代替当前的文档（没有历史记录）

location.href="location2.html?1234"
location.assign("location2.html");
location.reload()
location.replace("location2.html")

window.location.reload()（刷新当前页面.）

window.location.href=”url” (指定当前显示链接的位置)

parent.location.reload()刷新父亲对象（用于框架）

opener.location.reload()刷新父窗口对象（用于单开窗口）

top.location.reload()刷新最顶端对象（用于多开窗口）

<script type="text/javascript">
  <!--
    /*1 href属性
      2. reload()方法：重新加载本页面
    */
    function fun(){
      //window.location.href = "b.html" ;
      window.location = "b.html" ;
    }

    function fun1(){
      window.location.reload();
    }
  //-->
  </script>
 <body>
    <input type="button" value="直接去b.html" onclick="fun()">
    <input type="button" value="重新加载本页面" onclick="fun1()">
 </body>

跳转到其他页面

window.location.href=CONTEXT_PATH + "/subjectClassify/showSubjectClassifyNewsList?act=" + WebConst.EDIT+"&entityId="+subjectClassifyId;

window.location.href在当前页面重新打开连接

<div class="tit"><span onclick="ProdataShow.indexSkip('device')">资产信息</span></div>

        <div class="wrap_sub" style="height: 50%;">
         <div class="wraper">
            <div class="tit"><span onclick="ProdataShow.indexSkip('rushRepair')">应急抢修</span></div>
            <div class="con" id="demo1"></div>
         </div>
        </div>
<script type="text/javascript" src="${rc.contextPath}/view/cusviews/js/index.js"></script>

index.js

$(function(){
  ProdataShow.initOther();
});

/**
 * 首页
 */
var ProdataShow = {
    initOther:function(){
      $(".amap-maptypecontrol").css("top","38px");
      $(".amap-toolbar").css("top","86px");
    },
    
    /**
     * 首页各个功能跳转
     * type:device-资产信息、rushRepair-应急抢修、pipeRun-管网运行、produceWork-生产作业
     * leakCheck-泄露检测
     */
    indexSkip:function(type){
      if($.isEmptyStr(type)){
        layer.alert('地址不存在！', {icon: 0});
        return;
      }
      var url = ""
      switch(type)
      {
      case 'device':
        url = CONTEXT_PATH + "/cusviews/dev/index";
        break;
      case 'rushRepair':
        url = CONTEXT_PATH + "/cusviews/rush/index";
        break;
      case 'pipeRun':
        url = CONTEXT_PATH + "/cusviews/pipe/index";
        break;
      case 'produceWork':
        url = CONTEXT_PATH + "/cusviews/produce/index";
        break;
      case 'leakCheck':
        url = CONTEXT_PATH + "/cusviews/leak/index";
        break;
      default:
        url = CONTEXT_PATH + "/cusviews/index";
      }
      window.location.href = url;
    }

    
}

js的window对象与属性的使用_鼠标事件_02

定时器倒数跳转其他页面

<script>
window.onload=function  () {
setTimeout(function  () {
   location.href="location1.html";
},3000)

var num=document.getElementById("num")
var nums=3
setInterval(function  () {
    nums--
   num.innerHTML=nums;
},1000)
}

</script>
<center>
<div id="out">
   <div class="one">
   </div>
   <div class="two">
      3秒钟以后跳转
     <p id="num">
        3
     </p>
   </div>
</div>
</center>