jQuery 改变URL + 关于window....的各种方法

<!--    原文地址: http://www.qttc.net/201303292.html
        demo:   http://www.qttc.net/static/demo/html5_20130320/test.html -->

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
        function changeUrl(url) {
            window.history.pushState({}, 0, 'file:///'+window.location.pathname+'/'+url);
            // alert(window.location.pathname);
        }
    </script>
</head>
<body style="margin: 30px;">
    <h1>Change URL without refresching</h1>
    <div style="margin-bottom: 30px;">
        <span>Original URL:</span>
        <span>
            <script type="text/javascript">document.write(window.location.href);</script>
        </span>
    </div>
    
    <button onclick="changeUrl('name')">name</button>

</body>
</html>

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;