获取窗口、屏幕和浏览器信息: 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" onsubmit="go(); return false;"> <input type="button" value="Back" onclick="back()" /> <input type="button" value="Forward" onclick="forward()" /> Url: <input type="text" name="url" size="50"> <input type="button" value="Go" onclick="go()" /> <input type="button" value="Open New Window" onclick="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>
发表评论
-
解决EXT3.3.1在IE9上 , TreePanel click event 失效
2012-02-07 10:27 1006在HTML中添加下面一行: <meta http-eq ... -
解决ie9 不支持extjs3.3对象的 “createContextualFragment”属性或方法
2012-02-07 10:10 1467在页面中添加如下Js代码即可 if ((typeof Ran ... -
php 异步发送邮件
2011-12-07 20:29 3379需求: 在某系统里,上传完一个产品的补丁文件或发布产品的更新信 ... -
笔记:JS权威指南18章—表单和表单元素
2011-10-18 10:58 1099Form 对象: Javascript 的 Form ... -
笔记:JS权威指南17章—事件和事件属性
2011-10-17 09:34 1288目前使用的3中完全不同的不兼容的事件处理模型: 1.原始事件 ... -
笔记:JS权威指南15章—脚本化文档
2011-10-13 21:09 918DOM HTML API DOM 标准可以与 XML ... -
笔记:JS权威指南11章—Javascript正则表达式
2011-10-09 17:13 810正则表达式( Regular expression )是一 ... -
正则笔记
2011-08-26 17:40 753正则表达式有多种不同的风格。下表是在PCRE 中元字符 ...
相关推荐
自己对《Javascript权威指南》的学习过程中摘录下来的笔记,去掉了那些简单的、罗索的相关介绍,重点在于那些不常用到的语法,规则,以及重点内容的相关示例,此为WORD版,这是第二部分,主要是讲客户端Javascript的...
Hadoop权威指南----读书笔记
Web前端学习笔记:HTML5+CSS3+JavaScript.pdf
笔记_Javascript权威指南(第六版)
笔记_Javascript权威指南(第五版)
《Scrum精髓:敏捷转型指南》的总结
linux运维学习笔记:Shell脚本调试
Java基础笔记, 第一章:编程基础 第二章:数组 第三章:面向对象程序开发 第四章...网络编程 第十一章:反射机制 第十二章:正则表达式 第十三章:HTML语言 第十四章:CSS语言 第十五章:JavaScript语言 第十六章:DOM
javascript权威指南自己学习的一些心得,希望大家一起进步
Hadoop 权威指南读书笔记 我自己画的一张图
http权威指南,相关的读书笔记。http权威指南,相关的读书笔记。
Javascript权威指南笔记.docx
linux运维学习笔记:Shell脚本书写规范
《IDApro权威指南》个人学习笔记
自己对《Javascript权威指南》的学习过程中摘录下来的笔记,去掉了那些简单的、罗索的相关介绍,重点在于那些不常用到的语法,规则,以及重点内容的相关示例,此为WORD版,这是第一部分,主要是讲Javascript的基础...
MySQL权威指南读书笔记MySQL权威指南读书笔记MySQL权威指南读书笔记
网页标题笔记脚本js插件是由作者You!分享的一个浏览器扩展插件。通过本脚本,将选中文字添加到网页标题最前面,以便在浏览器标签栏快速识别。 快捷键: Ctrl `(反引号,大键盘区数字键1左边):添加到网页标题最...
VC++2010开发权威指南学习总结笔记
mongodb学习资料,包括mongodb_and_python学习笔记、mongodb权威指南、mongodb学习手册、mongodb总结。
个人精心整理的学习笔记,总结了权威指南中的主要内容,希望可以对初学者有帮助。