Web Development Browser (iii)----Common browser events and properties

Browser Page Fallback Event

<a href= "Javascript:history.back ( -1)" class= "Btn Btn-default" > Return to </a>history.back (-1): Returns directly to the previous page of the current page, Data all message, is a new page history.go (-1): Also returns the previous page of the current page, but the data in the form are all still in History.back (0) Refresh History.back (1) Forward history.back (-1) Back// Want to end up on page B, do not want to point the B-page browser Back button, return to page A, then on page a plus: $ (document). Ready (function () {window.history.forward (1);} ）

Browser leaves page or closes tab prompt

Window.onbeforeunload = function () {return "is sure to leave?";//Leave the page tip} or $ (window). Unload (function () {alert (" Goodbye! ");});

Browser Enter page event or page load Complete event

Window.onload = function () {} or $ (function () {}) Note: The former can only be executed once and must wait for all elements of the page to be loaded (including the picture) to begin execution. And just wait for the page frame DOM structure to download and start executing

Browser scroll bar Event

$ (window). scrolltop ();  Gets the distance from the top of the scroll bar. Sets the distance from the top or bottom of the scrollbar, keeping the scrollbar state, and so on (window). Scroll (function () {var screenheight = window.screen.availHeight;//Get Screen high $ (windo W). ScrollTop (document.body.clientheight-120-screenheight);//Keep the scrollbar distance to the bottom 120px});

Browser page width and other properties

var s =  ";    s += "   Web page Visible area width: " +  document.body.clientwidth +  "\ n";    s +=  "  page visible Area High:"  +  document.body.clientHeight +  "\ n";    s +=  "  width of visible area of Web page:"  + document.body.offsetWidth +    (including edge and scroll bar width)  +  \ n;     s +=    High visible area of the page:  + document.body.offsetHeight +    (including edge width)  +  "\ n";    s +=  "  page body Full text width:"  +  document.body.scrollwidth +  "\ n";    s +=  "  page body full text High:"  +  document.body.scrollHeight +  "\ n";    s +=  "  page is rolled high (FF):"  + document.body.scrollTop +  "\ n";    s +=  "  page is rolled high (ie ): " + document.documentElement.scrollTop +  \ n";    s +=  "  page is rolled left:"  + document.body.scrollLeft +  "\ n";     s +=    Page body section: " + window.screenTop +  \ n";     s +=  "  page body part left:"  + window.screenLeft +  "\ n";     s +=  "  High screen resolution:"  + window.screen.height +  "\ n";     s +=  "  Width of screen resolution:"  + window.screen.width +  "\ n";     s +=  "  Screen available workspace height:"  + window.screen.availHeight +  "\ n";     s +=  "  Screen available workspace width:"  + window.screen.availWidth +  "\ n";     s +=    Your screen settings are    + window.screen.colorDepth +    Color " + " \ n ";    s += "   your screen settings   " +  window.screen.devicexdpi +  " Pixels per inch " + " \ n ";     alert (s);      The distance from the top of an element is document.getElementById (ID). Offset () .top  an element distance from the left document.getElementById (ID). Offset ().

Browser resizing window Events

Window.onresize=function () {} or $ (window). Resize (function () {Alert (' window is resized! ');});

Web Development Browser (iii)----Common browser events and properties