浏览器抓取网页( 专注于互联网主流的各种技术简明现代魔法-gtgt)

　　浏览器抓取网页(

专注于互联网主流的各种技术简明现代魔法-gtgt)

　　

　　专注于互联网主流的各种技术

　　简洁现代的魔法 -> -> JavaScript 获取浏览器窗口的大小

　　JavaScript 获取浏览器窗口的大小

　　2010-04-16

　　程序演示：

　　获取浏览器的当前窗口大小。当浏览器窗口的大小发生变化时，显示的值会随时发生变化。

　　该程序主要使用了有关窗口的 Document 对象的一些属性。这些属性的主要功能和用法如下：

　　获取窗口的大小，不同的浏览器需要使用不同的属性和方法：检测窗口的真实大小，需要使用Netscape下的Window属性；IE下，需要深入到Document里面去检测body；在DOM环境下，如果要获取窗口的大小，需要注意的是根元素的大小，而不是元素的大小。Window 对象的innerWidth 属性收录当前窗口的内部宽度。Window 对象的innerHeight 属性收录当前窗口的内部高度。Document 对象的 body 属性对应于 HTML 文档的标签。Document 对象的 documentElement 属性表示 HTML 文档的根节点。文档正文。clientHeight 表示 HTML 文档所在窗口的当前高度。文档正文。clientWidth 表示 HTML 文档所在窗口的当前宽度。JavaScript 代码

　　

var winWidth = 0;

var winHeight = 0;

function findDimensions() //函数：获取尺寸

{

// 获取窗口宽度

if (window.innerWidth)

winWidth = window.innerWidth;

else if ((document.body) && (document.body.clientWidth))

winWidth = document.body.clientWidth;

// 获取窗口高度

if (window.innerHeight)

winHeight = window.innerHeight;

else if ((document.body) && (document.body.clientHeight))

winHeight = document.body.clientHeight;

// 通过深入Document内部对body进行检测，获取窗口大小

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

{

winHeight = document.documentElement.clientHeight;

winWidth = document.documentElement.clientWidth;

}

// 结果输出至两个文本框

document.form1.availHeight.value= winHeight;

document.form1.availWidth.value= winWidth;

}

findDimensions(); // 调用函数，获取数值

window.onresize=findDimensions;

　　方案实施步骤：

　　程序首先创建一个收录两个文本框的窗体来显示当前窗口的宽度和高度，它的值会随着窗口的大小而变化。在后续的 JavaScript 代码中，首先定义了两个变量 winWidth 和 winHeight 来保存窗口的高度和宽度。然后，在函数 findDimensions() 中，使用 window.innerHeight 和 window.innerWidth 获取窗口的高度和宽度，并将两者保存在上述两个变量中。然后深入文档内部检测正文，获取窗口大小，并将其存储在上述两个变量中。在函数的最后，通过按名称访问表单元素，结果输出到两个文本框。在 JavaScript 代码的最后，整个操作都是通过调用 findDimensions() 函数来完成的。