笔记：JS权威指南14章—脚本化浏览器窗口 -

duobility

浏览: 17932 次
性别:
来自: 钓鱼岛

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

笔记：JS权威指南14章—脚本化浏览器窗口

博客分类：

Javascript

获取窗口、屏幕和浏览器信息： 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>