Browser Window Size and Position

下午博超的网站需要一个右侧的Flash层,不过要求是在800*600以下的情况下就不显示的,所以只好加了一个判断。找到了如下的代码:
* 出處

[URL=http://javascript.about.com/od/guidesscriptindex/a/screen.htm]http://javascript.about.com/od/guidesscriptindex/a/screen.htm[/URL]

* 轉錄原文

Part 1 : Introduction

描述各種會影響瀏覽器視窗大小的變數。

Not all of your visitors will use the same screen resolution and even those that do may not all have their browser window maximized all of the time. Even if they did the fixed control bars that some of them will have along one or two edges of the screen will affect the available screen area for the maximized browser window. If that doesn’t give enough variations then you also need to consider that different browsers use different amounts of screen space for the browser menus and control bars that your visitors may or may not have visible.

因此, 必須透過詢問瀏覽器以取得瀏覽器的視窗大小。 不幸的是, 不同的瀏覽器會以不同的形式提供這個資訊。

Given all of these variables, how can we determine just how much space is available within the browser window? Well we can ask the browser itself. Unfortunately the different browsers supply this info in different ways as well. The solution – a couple of functions that will use whichever way that the browser supports to return the requested information.

想要取得瀏覽器視窗大小的理由。 (我自己的問題也算其中一個理由)

One of the main reasons that we might want the available browser window dimensions is to use with Javascript animations that we are trying to display on our web page. If this is the case then we may also wish to know what part of our web page is visible within that window so that we can position our animation where it can be seen. Again the different browsers supply this information in different ways so again we need some functions that will use whatever way that the browser supports to give us this information.

To save you the effort of writing functions yourself to extract this information, I am supplying a set of six functions that will provide this information for you. Let’s start by looking at what ( http://javascript.about.com/library/blscreen1.htm ) functions there are and what they return for your browser/screen resolution.

Part 2 : Sample Page

Part 3: Obtain the Script

To be able to determine the available space within the browser window and the current position of that window within the current web page, you need to copy the following script and attach it to the head section of your page.

// Browser Window Size and Position<br/>// copyright Stephen Chapman, 3rd Jan 2005<br/>// you may copy these functions but please keep the copyright notice as well<br/>function pageWidth() {return window.innerWidth != null? window.innerWidth: document.body != null? document.body.clientWidth:null;}<br/>function pageHeight() {return window.innerHeight != null? window.innerHeight: document.body != null? document.body.clientHeight:null;}<br/>function posLeft() {return window.pageXOffset != null? window.pageXOffset: document.body.scrollLeft != null? document.body.scrollLeft:0;}<br/>function posTop() {return window.pageYOffset != null? window.pageYOffset: document.body.scrollTop != null? document.body.scrollTop:0;}<br/>function posRight() {return posLeft()+pageWidth();}<br/>function posBottom() {return posTop()+pageHeight();}

Once you have created your code you just save it to an external javascript file. I called mine getscreen.js. You then link it into the head of your page using the following code:

<script type="text/javascript" src="getscreen.js"><br/></script>

Part 4 : Add to Your Scripts

All that remains to be done now is to reference the fields within your Javascript.

if you want to add an extra column to the right of your page if the page is over a certain width (say 800 pixels) then you include the code for that column in an if statement that tests the page width like this:

if (pageWidth() > 800) {<br/>// code for extra column goes here<br/>}<br/>

If you want to test if a given object has moved outside of the browser window we might use code like this:

if (obj.left < posLeft() ||<br/>obj.right > posRight() ||<br/>obj.top < posTop() ||<br/>obj.bottom > posBottom()) {<br/>// not fully visible on screen<br/>}<br/>

Another thing you may want to do is toplace an object in a particular position in the window independently of the scroll position of the page. Let’s say we want the object to be down 50 pixels and across 100 pixels from the top left corner of the window. Here’s code to do this.

obj.top = posTop() + 50;<br/>obj.left = posLeft() + 100;

I have found lots of uses for these functions and I am sure that you will too.

Loading