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()方法的使用
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()">
</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>
扫一扫
161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
