js的window对象与属性的使用

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

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        返回显示屏幕的宽度。

  document.write(screen.availHeight)
  document.write("")
  document.write(screen.height)
   document.write("")
  document.write(screen.availWidth)
   document.write("")
  document.write(screen.width)

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)

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

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

innerHeight:  innerWidth:  IE不支持

 
	
	
	
 
       
你好
 

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+"sx:"+sx+"--sy:"+sy;
	 }
}

相对于事件源的位置 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;
		 }
	   }
	   }

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
}

具体使用

点击提交，内容自动读取

  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="";

	   }
	}

  }





  
     留言记录:
  
  
  

     你好
  


  
  
  

4.关系类型

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

 C.self===window

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

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



   
   
   
   
   

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

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

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

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])

重新打开一个页面

		  function fun(){
			 self.open("sub.html") ;
		  }

	
 
       
	  

	  打开sub.html页面
 

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属性，并动态设置高度

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

$(function(){
var height = $(window).height();
$(".list_wrap").css("height",height);	
})

参数的传递

jsp获取openWindow传递的参数

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("刷新");
	$("#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("服务器正忙，请稍后重试");  
        }  
    }) 

窗口全屏大小:

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

close方法

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

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

  window对象的parent属性
 
	
	
	
 
	  姓名：
	  
 

sub1.html

 对话框： 1)消息框 alert() ; 2)确认框 confirm() ; 3)输入框 prompt() ; (了解)

window的模态窗体

history对象

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

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




   history1.html


  alert(history.length)

链接到2

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

 
	 
	 
	 
 
	  b.html
	  
 

b.html

 
	 
	 
 
	  c.html
	  
	  
	  
 

c.html

 
	 
	 
 
	  d.html