js的window对象与属性的使用
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.eventwindow.onload=function (e) {evar ev=e||window.event;
}a.鼠标事件
相对于浏览器位置的(左上角为（0,0)）
clientX 当鼠标事件发生的时候，鼠标相对于浏览器X轴的位置
clientY 当鼠标事件发生的时候，鼠标相对于浏览器Y轴的位置
相对于屏幕位置的
screenX 当鼠标事件发生的时候，鼠标相对于屏幕X轴的位置
screenY
window.onload=function (e) {window.eventvar 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.eventvar 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.keyCodeev.altKeyev.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()方法的使用
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")@ResponseBodypublic 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()"></bodyd.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;}}
定时器倒数跳转其他页面
<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>js的window对象与属性的使用相关推荐
- JS中window对象的opener属性
JS中window对象的opener属性 JS中window对象的opener属性 window.opener是js中window的一个属性,它返回的是打开当前窗口的窗口对象.如果窗口A弹出一个窗口B ...
- js中WINDOW对象
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象 BOM的核心是window,而window对象又具有双重角色,它既是通过js访问浏览器窗口的一个接口,又是一 ...
- js中WINDOW对象中的location成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的location成员对象 locatio ...
- js中WINDOW对象中的navigator成员对象
js中DOM, DOCUMENT, BOM, WINDOW 区别 全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js中WINDOW对象中的navigator成员对象 naviga ...
- js设置html打印不分页,JS 使用 window对象的print方法实现分页打印功能
最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CS ...
- 前端：JS/24/BOM和DOM简介，for...in循环遍历，window对象的属性和方法，延时器，定时器，screen屏幕对象，location地址栏对象，history历史记录对象
BOM 和DOM简介 BOM ,Browser Object Model ,浏览器对象模型: BOM主要提供了访问和操作浏览器各组件的方式: 浏览器组件:window(浏览器容器), location ...
- JS(五)：JS的window对象之window相关方法、定时器
BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作.使用BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关的动作. 即:使JS可以与浏览器"对话" ...
- Window对象的属性
Window对象的window和self属性都指代当前窗口对象本身.可以使用这两个属性来显示引用当前窗口. 一.Location 对象 Location对象包含有关文档当前位置的信息. Locatio ...
- TypeScript 中为window对象添加属性
众所周知,typescript是一款JavaScript的超集,其作用就是在于让我们开发者在艰辛的开发路途中,避免掉一些不必要的麻烦,这"一些不必要的麻烦"主要体现在于 TypeS ...
最新文章
- gcc 和 g++ 的联系和区别，使用 gcc 编译 c++
- RxJava 解除订阅---------Disposable.dispose()方法
- Python编写Hive UDF
- 详细设计说明书读后感_明晚十点，和大家详细介绍这本版式设计新书！
- python安装numpy-python安装numpy和pandas的方法步骤
- EasyExcel读写Excel的基本使用
- ie8不发送ajax,IE8用ajax访问不能每次都刷新的问题
- java中类型转换的造型_Java总结篇系列：类型转换/造型
- lisp scheme 果壳_common lisp和scheme的区别
- aspx 修改了样式但是在点击按钮后被刷新_135编辑器使用教程|动画按钮到底在哪里啊？...
- 高效的java异常处理
- php实现观看记录,PHP实现浏览历史记录
- hdu 5178 pairs (线性探查问题)
- 【优化预测】基于matlab EMD优化SVR数据预测【含Matlab源码 1403期】
- 梅林固件刷CFE教程
- 125、什么是核心交换机的链路聚合、冗余、堆叠、热备份
- mysql 循环查询_mysql循环查询(mysql循环语句)
- 模板文件云存储管理 Sisyphus
- Bit-Z合约关于平仓的说明
- python迭代是什么意思_python中的迭代是什么意思？