JS,Jquery获取各种屏幕的宽度和高度,clientX,offsetX,在父窗口中获取iframe中的元素
DreamLee 2015-04-22
JS,Jquery获取各种屏幕的宽度和高度
Javascript:
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth(包括边线的宽)
网页可见区域高：document.body.offsetHeight(包括边线的高)
网页正文全文宽：document.body.scrollWidth
网页正文全文高：document.body.scrollHeight
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
网页正文部分上：window.screenTop
网页正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的宽：window.screen.width
屏幕可用工作区高度：window.screen.availHeight
屏幕可用工作区宽度：window.screen.availWidth
JQuery:
$(document).ready(function(){
alert($(window).height());//浏览器当前窗口可视区域高度
alert($(document).height());//浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括borderpaddingmargin
alert($(window).width());//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括borderpaddingmargin
});
clientX设置或获取鼠标指针位置相对于窗口客户区域的x坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY设置或获取鼠标指针位置相对于窗口客户区域的y坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX设置或获取鼠标指针位置相对于触发事件的对象的x坐标。
offsetY设置或获取鼠标指针位置相对于触发事件的对象的y坐标。
screenX设置或获取获取鼠标指针位置相对于用户屏幕的x坐标。
screenY设置或获取鼠标指针位置相对于用户屏幕的y坐标。
x设置或获取鼠标指针位置相对于父文档的x像素坐标。
y设置或获取鼠标指针位置相对于父文档的y像素坐标。
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标，event.X也一样。
但是如果设置事件对象的定位属性值为relative，event.clientX不变，而event.X返回事件对象的相对于本体的坐标。
var strInfo=""; strInfo+="rn网页可见区域宽:"+document.body.clientWidth; strInfo+="rn网页可见区域高:"+document.body.clientHeight; strInfo+="rn网页可见区域宽:"+document.body.offsetWidth+"(包括边线的宽)"; strInfo+="rn网页可见区域高:"+document.body.offsetHeight+"(包括边线的宽)"; strInfo+="rn网页正文全文宽:"+document.body.scrollWidth; strInfo+="rn网页正文全文高:"+document.body.scrollHeight; strInfo+="rn网页被卷去的高:"+document.body.scrollTop; strInfo+="rn网页被卷去的左:"+document.body.scrollLeft; strInfo+="rn网页正文部分上:"+window.screenTop; strInfo+="rn网页正文部分左:"+window.screenLeft; strInfo+="rn屏幕分辨率的高:"+window.screen.height; strInfo+="rn屏幕分辨率的宽:"+window.screen.width; strInfo+="rn屏幕可用工作区高度:"+window.screen.availHeight; strInfo+="rn屏幕可用工作区宽度:"+window.screen.availWidth; window.confirm(strInfo);
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。
offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。
screenX:相对于用户屏幕
代码如下
<table border=1 cellpadding=15 cellspacing=15 style="position:relative;left:100;top:100">
<tr><td>
<div onclick="show()" style="background:silver;cursor:hand">
Click here to show.
</div>
</td></tr>
</table>
<script>
function show(){
alert("window.event.x:"+window.event.x+"nwindow.event.y:"+window.event.y+"nevent.clientX:"+event.clientX+"nevent.clientY:"+event.clientY+"nevent.offsetX:"+event.offsetX+"nevent.offsetY:"+event.offsetY+"nwindow.event.screenX:"+window.event.screenX+"nwindow.event.screenY:"+window.event.screenY);
}
</script> event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.X也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.X返回事件对象的相对于本体的坐标
event对象详解ICOOE2000.3.31http://www.hzhuti.com
event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。
event属性：
altKey
检索ALT键的当前状态
可能的值true为关闭
false为不关闭
button
检索按下的鼠标键
可能的值：0没按键
1按左键
2按右键
3按左右键
4按中间键
5按左键和中间键
6按右键和中间键
7按所有的键
cancelBubble
设置或检索当前事件是否将事件句柄起泡
可能的值：false启用起泡
true取消该事件起泡
clientX
检索与窗口客户区域有关的鼠标光标的X坐标，属性为只读，没有默认值。
clientY
检索与窗口客户区域有关的鼠标光标的Y坐标，属性为只读，没有默认值。
ctrlKey
ctrlKey检索CTRL键的当前状态
可能的值true为关闭
false为不关闭
dataFld
检索被oncellchange事伯影响的列
aTransfer
为拖放操作提供预先定义的剪贴板式。
Element
检索在onmouseover和onmouseout事件期间退出的对象指针
keyCode
设置或检索与引发事件的关键字相关联的Unicode关键字代码
该属性与onkeydownonkeyuponkeypress一起使用
如果没有引发事件的关键字，则该值为0
offsetX
检索与触发事件的对象相关的鼠标位置的水平坐标
offsetY
检索与触发事件的对象相关的鼠标位置的垂直坐标
propertyName
检索在对象上己更改的特性的名称
reason
检索数据源对象数据传输的结果
可能的值：
0数据传输成功
1数据传输失败
2数据传输错误
recordset
检索数据源对象中默认记录集的引用
该特性为只读
repeat
检索一个事件是否被重复
该属性只有在onkeydown事件重复时才返回true
returnvalues
设置或检索从事件中返回的值
可能的值：
true事件中的值被返回
false源对象上事件的默认操作被取消
screenX
检索与用户屏相关的鼠标的水平位置
screenY
检索与用户屏相关的鼠标的垂直位置
shiftKey
检索shiftKey键的当前状态
可能的值true为关闭
false为不关闭
srcElement
检索触发事件的对象
srcFilter
检索导致onfilterchange事件触发的过滤器对象
srcUm
检索触发事件行为的同一资源名称
除非下面两个条件都为真，否则该特性被设置为null
1.行为被附加到触发事件的要素上
2.在前面的项目符号中定义的行为己指定了一个URN标识符和己触发的事件
toElement
检索作为onmouseover或者onmouseout事件结果而移动的对象
type
检索事件对象中的事件名称
x
检索相对于父要素鼠标水平坐标的整数
y
检索相对于父要素鼠标垂直坐标的整数
js
在父窗口中获取iframe中的元素
1.
格式：window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例：window.frames["ifm"].document.getElementById("btnOk").click();
2.
格式：
varobj=document.getElementById("iframe的name").contentWindow;
varifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例：
varobj=document.getElementById("ifm").contentWindow;
varifmObj=obj.document.getElementById("btnOk");
ifmObj.click();
在iframe中获取父窗口的元素
格式：window.parent.document.getElementById("父窗口的元素ID").click();
实例：window.parent.document.getElementById("btnOk").click();
jquery
在父窗口中获取iframe中的元素
1.
格式：$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery方法1
实例：$("#ifm").contents().find("#btnOk").click();//jquery方法1
2.
格式：$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery方法2
实例：$("#btnOk",document.frames("ifm").document).click();//jquery方法2
在iframe中获取父窗口的元素
格式：$('#父窗口中的元素ID',parent.document).click();
实例：$('#btnOk',parent.document).click();
