PROWAREtech

articles » current » javascript » tutorial » page-13

JavaScript: Tutorial - A Guide to JavaScript - Page 13

The Browser Object Model (The Window Object, The Location Object).

Window Position

This code demonstrates how to get the browser's left and top positions of the screen.

var winLeftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var winTopPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

This code demonstrates how to move the browser window.

//move the window to the top-left coordinate
window.moveTo(0,0);
//move the window down 50 pixels from the top-left
window.moveBy(0, 50);
//move the window to position 100x250 from the top-left
window.moveTo(100, 250);
//move the window left by 50 pixels from the top-left
window.moveBy(-50, 0);

Window Size

Determine the size of the browser window by using window.innerWidth, window.innerHeight, window.outerHeight and window.outerWidth.

This code will reliably detect the client window width and height.

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
	if (document.compatMode == "CSS1Compat"){
		pageWidth = document.documentElement.clientWidth;
		pageHeight = document.documentElement.clientHeight;
	} else {
		pageWidth = document.body.clientWidth;
		pageHeight = document.body.clientHeight;
	}
}

Resize the browser window usinng resizeTo() or resizeBy()

//resize to 150 x 150
window.resizeTo(150, 150);
//resize to 250 x 200
window.resizeBy(100, 50);
//resize to 200 x 200
window.resizeTo(300, 300);

Opening Windows

Use window.open() to open a new window using JavaScript. The following code will open a new window pointing to this website.

var prowaretech = window.open("http://www.prowaretech.com/", "_blank");
prowaretech.resizeTo(600, 400);
prowaretech.moveTo(0, 0);
prowaretech.close();

The Location Object

The location object provides information about the currently loaded document. It also provides general navigation functionality. location is a property of both the window and document objects.

property nameexampledescription
hash"#sectionone"returns an empty string when hash is not present
host"www.prowaretech.com:80"the server and port if specified
hostname"www.prowaretech.com"name of server without port
href"http://www.prowaretech.com"the full URI of the page currently loaded
pathname"/Computer"the directory and filename of the URI
port"80"returns an empty string when port is not specified
protocol"http:"http: or https:
search"?query=computer"returns an empty string when query string is not present

To change the location, assign a website URI value to the href property.

To change the location without an entry being placed in the history stack use the replace() method.

The navigator object is usually used to determine the browser type that is running a web page.

property/methoddescription
appCodeNamethe name of the browser; usually Mozilla
appMinorVersionmore version information
appNamebrowser name
appVersionbrowser version
buildIdbrowser build number
cookieEnabledwhether or not cookies are allowed
cpuClassthe processor type
javaEnabledwhether or not browser supports Java
languagethe browser's language
mimeTypesarray of MIME types supported
onLineif browser is connected to the Internet
oscputhe operating system and/or CPU the browser is running on
platformthe platform that the browser is running on
pluginsan array of plug-ins installed
productname of the browser; typically "Gecko"
productSubmore information about the browser; typically Gecko related
registerContentHandler()registers a website as a handler for a MIME type
registerProtocolHandler()registers a website as a handler of a port number
systemLanguageoperating system language
userAgentthe user-agent of the browser
userLanguagethe computer operating system language
userProfileuser profile information
vendorthe browser brand name
vendorSubmore information of vendor
<<<[Page 13 of 22]>>>

This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE