Change URL without refresching
Original URL:
JS BROWSER BOM
The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.
Window
properties:
normal browser
window.innerHeight
- the inner height of the browser window (in pixels)
window.innerWidth
- the inner width of the browser window (in pixels)
for IE 8,7,6,5
document.documentElement.clientHeight
document.documentElement.clientWidth
>>> the browser window is NOT includeing toolbars and scrollbars
methods:
window.open()
open a new window
window.close()
close the current window
window.moveTo()
move the current window
window.resizeTo()
resize the current window
Window Screen
(prefix 'window' can be omitted)
screen.width
returns the width of the visitor's screen in pixels.
screen.height
returns the height of the visitor's screen in pixels.
screen.availWidth
returns the width of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
screen.availHeight
returns the height of the visitor's screen, in pixels, minus interface features like the Windows Taskbar.
screen.colorDepth
returns the number of bits used to display one color.
screen.pixelDepth
returns the pixel depth of the screen.
Window Location
window.location.href
returns the href (URL) of the current page
window.location.hostname
returns the domain name of the web host
window.location.pathname
returns the path and filename of the current page
window.location.protocol
returns the web protocol used (http: or https:)
window.location.assign
loads a new document
Window History
(The window.history object contains the browsers history)
(prefix 'window' can be omitted)
history.back()
same as clicking back in the browser
history.forward()
same as clicking forward in the browser
Window Navigator ==> always misleading, DON'T use this
(contains information about the visitor's browser)
(prefix 'window' can be omitted)
properties:
navigator.userAgent
returns the user-agent header sent by the browser to the server
navigator.appName
returns the application name of the browser > "Netscape" is the application name for both IE11, Chrome, Firefox, and Safari.
navigator.appCodeName
returns the application code name of the browser
navigator.appVersion
returns version information about the browser
navigator.language
returns the browser's language
navigator.onLine
returns true if the browser is online
navigator.platform
returns the browser platform (operating system)
navigator.product
returns the product name of the browser engine > Do not rely on this. Most browsers returns "Gecko" as product name !!
navigator.cookieEnabled
returns true if cookies are enabled, otherwise false
methods:
navigator.javaEnabled()
returns true if Java is enabled
Popup
(prefix 'window' can be omitted)
alert()
confirm()
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
prompt()
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
JS Time Events
setTimeout(function, milliseconds)
Executes a function, after waiting a specified number of milliseconds.
clearTimeout(timeoutVariable)
stops the execution of the function specified in setTimeout().
setInterval(function, milliseconds)
Same as setTimeout(), but repeats the execution of the function continuously.
window.clearInterval(timerVariable)
stops the executions of the function specified in the setInterval() method.
JS cookie
(JavaScript can create, read, and delete cookies with the document.cookie property.)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";
to create
var x = document.cookie;
to read
>>> document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;