获取窗口、屏幕和浏览器信息: Window 、 Screen 、 Navigator 对象。
对于 IE 浏览器,有如下只读属性:
//浏览器窗口大小 var windowWidth = window.outerWidth; var windowHeight = window.outerHeight; //浏览器窗口在桌面的位置 var windowX = window.screenX; var windowY = window.screenY; //html内容展现区域大小=浏览器窗口大小-工具栏-滚动栏-菜单栏 var viewportWidth = window.innerWidth; var viewportHeight = window.innerHeight; //滚动条的位置 var horizontalScroll = window.pageXOffset; var verticalScroll = window.PageYOffset; alert('windowWidth = ' + windowWidth + ', ' + 'windowHeight = ' + windowHeight + ', ' + 'windowX = ' + windowX + ', ' + 'windowY = ' + windowY + ', ' + 'viewportWidth = ' + viewportWidth + ', ' + 'viewportHeight = ' + viewportHeight + ', ' + 'horizontalScroll = ' + horizontalScroll + ', '+ 'verticalScroll = ' + verticalScroll );
屏幕坐标:桌面上的一个浏览器的位置,相对于桌面的左上角来度量;
窗口坐标:在 web 浏览器中的视口的位置,相对于视口的左上角来度量;
文档坐标:一个 html 文档中的位置,相对于文档的左上角来度量;
var Geometry = {}; if (window.srceenLeft) { //IE浏览器 Geometry.getWindowX = function() { return window.screenLeft; }; Geometry.getWindowY = function() { return window.screenTop; }; } else if (window.screenX) { //Firfox Geometry.getWindowX = function() { return window.ScreenX; }; Geometry.getWindowY = function() { return window.screenY; }; } if (window.innerWidth) { //除IE外的所有浏览器 Geometry.getViewportWidth = function() { return window.innerWidth; }; Geometry.getViewportHeight = function() { return window.innerHeight; }; Geometry.getHorizontalScroll = function() { return window.pageXOffset; }; Geometry.getVerticalScroll = function() { return window.pageYOffset; }; } else if (document.documentElement && document.documentElement.clientWidth) { //IE6在用 <!DOCTYPE> 申明时,属性放置在document.documentElement元素上,而不是document.body元素上 Geometry.getViewportWidth = function() { return document.documentElement.clientWidth; }; Geometry.getViewportHeight = fucntion() { return document.documentElement.clientHeight; }; Geometry.getHorizontalScroll = fucntion() { return document.documentElement.ScrollLeft; }; Geometry.getVerticalScroll = fucntion() { return document.documentElement.ScrollTop; }; } else if (document.body.clientWidth) { //IE4, IE5, IE6没有<!DCOTYPE>申明 Geometry.getViewportWidth = fucntion() { return document.body.clientWidht; }; Geometry.getViewportHeight = fucntion() { return docuemnt.body.clientHeight; }; Geometry.getHorizontalScroll = function() { return docuemnt.body.scrollLeft; }; Geometry.getVerticalScroll = fucntion() { return docuemnt.body.scrollTop; }; } //返回文档的大小 if (document.documentElement && document.documentElement.scrollWidth) { Geometry.getDocumentWidth = fucntion() { return document.documentElement.scrollWidth; }; Geometry.getDocumentHeight = fucntion() { return document.documentElement.scrollHeight; }; } else if (document.body.scrollWidth) { Geometry.getDocumentWidth = fucntion() { return document.body.scrollWidth; }; Geometry.getDocumentHeight = fucntion() { return document.body.scrollHeight; }; }
Screen 对象: Wndow 对象的 screen 属性引用 Screen 对象,这个 Screen 对象提供有关用户显示大小和可用的颜色数量的信息。
属性 width 和 height 指定的是以像素为单位的显示器大小,属性 availWidth 和 availHeight 指定的是实际可用的显示大小, Firefox 和相关的浏览器(不包括 IE )定义了 availLeft 和 availTop 属性来指定屏幕上第一个可用位置的坐标
Navigator 对象: Window 对象的 navigator 属性引用的是包含 web 浏览器总体信息的 Navigator 对象
1、appName 属性: web 浏览器的简单名称。在 IE 中为 ”Microsoft Internet Explorer” , Firefox 中为“ Netscape ”
2、appVersion 属性:浏览器的版本号
3、userAgent
4、 appCodeName
5、 platform
var browser = "Browser Information:\n"; for(var propname in navigator){ browser += propname + ": " + navigator[propname] + "\n"; } alert(browser);
打开和操作窗口: Window 对象定义了几个可以用来对窗口自身进行高级控制的方法。
window.open() :打开一个新的浏览器窗口或查找一个已命名的窗口
window.close() :关闭浏览器窗口(一个窗口关闭后,代表它的 Window 对象仍然存在)
虽然每个窗口和帧都定义了独立的 Javascript 执行环境,但是这并不意味只在一个窗口中运行的 Javascript 代码与另一个窗口中运行的 Javascript 代码是完全隔离的。在两个不同帧中运行的 Javascript 代码,其作用域链头部的 Window 对象是不同的。但是这两个帧中的代码都是在同样的 Javascript 环境中由一个 Javascript 解释器执行的。
一个页面中有帧 A 和帧 B ,在 A 帧中定义了 f() 函数,则在帧 B 中可以用 parent.frame[0].f() 来访问帧 A 中的函数
<html>
<frameset rows="70%,30%">
<frame src="about:blank" name="main">
<frame src="navigator.html">
</frameset>
</html>
下图描述为帧之间的关系
<form name="navbar" οnsubmit="go(); return false;">
<input type="button" value="Back" οnclick="back()" />
<input type="button" value="Forward" οnclick="forward()" />
Url: <input type="text" name="url" size="50">
<input type="button" value="Go" οnclick="go()" />
<input type="button" value="Open New Window" οnclick="displayInNewWindow()" />
</form>
<script type="text/javascript">
function back() {
document.navbar.url.value = "";
try {
parent.main.history.back() ;
} catch(e) {
alert("某些规则阻止了History.back(): " + e.message);
}
setTimeout(updateURL, 1000);
}
function forward() {
document.navbar.url.vaule = "";
try {
parent.main.history.forward() ;
} catch(e) {
alert("某些规则阻止了History.forward(): " + e.message);
}
setTimeout(updateURL, 1000);
}
function updateURL() {
try {
document.navbar.url.value = parent.main.location.href;
} catch(e) {
document.navbar.url.value = "某些规则阻止URL访问!";
}
}
function fixup(url) {
if (url.substring(0, 7) != "http://") url = "http://" + url;
return url;
}
function go() {
parent.main.location = fixup(document.navbar.url.value);
}
function displayInNewWindow() {
window.open(fixup(document.navbar.url.value));
}
</script>