Skip to main content
黯羽轻扬Keep Growing Daily

JS Learning Notes 4_BOM

Free2015-04-08#JS#bom

This article introduces various built-in BOM objects and client-side detection related common sense

  • top: Points to the outermost frame, using top you can access another frame from one frame, for example top.frames[index/name]

  • parent: Points to the direct parent frame of current frame

  • window: Specific instance of the frame where code resides, so window object is not unique, each frame has its own window object

  • self: Points to window, the two are interchangeable

2. Window, Page Related

1. Getting Window Position Relative to Screen Left and Top Boundaries

var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF only supports the latter
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///

Browsers have different understanding of window position, when browser window is maximized the output of above code is:

  • Chrome: (0, 0)

  • IE8: (0, 0)

  • FF: (-4, -4)

Safari and Opera unknown, browser manufacturers' disagreement lies in whether window position is the position of browser window or page container (viewport)

2. Getting Page Viewport Size

var pageWidth = window.innerWidth;
var 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;
  }
}
alert(pageWidth + ', ' + pageHeight);///

Viewport refers to page visible area, that is the container browser provides to page, when browser window is maximized the output of above code is: (resolution 1366*768)

  • Chrome: (1366, 653)

  • IE8: (1362, 644)

  • FF: (1366, 667)

PC browsers have reached consensus on this point, but mobile browsers have differences, if need to support mobile browsers, need to carefully study each browser's support situation, won't elaborate here

3. Ways to Open New Window

//window.open(url, target, strOptions, replaceOrNot);//equivalent to <a href="http://ayqy.net/" target="_self"></a>, target value can also be frameName, meaning open page in specified frame
//window.open('http://ayqy.net/', '_self');//open in current page, back button invalid
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//pop up 200*200 window
//setTimeout(win.close(), 3000);//auto close after 3s
//window.open('http://ayqy.net/', '_self', '', true);//replace current history record, traceless jump

P.S. Using window way to display content is not conducive to SEO, most common pop-up windows besides ads are third-party account login, these places don't need SEO

3. Timeout Call

setTimeout(strCode/funcName, timeout); means after timeout milliseconds code may not necessarily execute, because the exact meaning of this function is: add specified task to task queue after timeout milliseconds

Cancel pending timeout task:

var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);

P.S. Although setTimeout's first parameter can be string, recommend using function name, because string needs to be parsed into JS code before execution, exists performance loss

4. Interval Call

setInterval(strCode/fun, timeout); means insert task into task queue according to specified time interval

Note: If when preparing to insert new task the last inserted task hasn't finished executing, will automatically cancel this insertion. That is, if there's no same task in task queue, then insert, otherwise wait for next time

Cancel pending interval task: same as timeout call, clearInterval(intervalId);

Note: Not recommended to use interval call, because next interval call may start before previous one ends. Generally use recursive timeout call to simulate, for example:

(function(){
  alert('x');
  setTimeout(arguments.callee, 3000);//note don't use function name, use arguments.callee is safer, because not afraid of function name being changed from outside
})();//anonymous function executes immediately

5. Dialog Boxes

  • alert(msg): Alert box, used to display error information, only has one OK button

  • confirm(msg): Confirmation box, used to confirm certain important operations, such as delete, has OK/Cancel buttons, returns true/false

  • prompt(msg, hint): Input box, used to get user input, has OK/Cancel buttons, returns input value/null

  • windowprint(), window.find(): Print/Find, rarely used

6. location Object

1. Getting URL

  • location.href: Get complete URL of current page, for example "http://www.ayqy.net"

  • location.search: Get query string, for example "?keyword=do"

  • location.hash: Get anchor (# and value after it, called hash because in UNIX, # is called hash), for example "#menu"

  • location.host: Get hostname and port number, for example "www.ayqy.net:80"

  • location.hostname: Get hostname, for example "www.ayqy.net"

  • location.pathname: Get directory or filename in URL, for example "/film/"

  • location.port: Get port number, for example "80"

  • location.protocol: Return protocol used by page, for example "https:"

2. Jump, Redirect

  • location.assign(url);

  • location.href = url;//most commonly used

  • window.location = url;

  • location.replace(url);//jump and cannot return

  • location.reload(true/false);//reload current page, if true then don't get from cache

Provides plugin detection and register handler program functionality, register handler program is equivalent to notifying browser current page provides certain online functionality (for example online email, RSS reader, etc.), after registration when user performs certain operations (for example visit RSS source page) will automatically request registered page, equivalent to desktop application's setting default open method

8. screen Object

Used to get client related information, for example screen width/height, available width/height, etc., not much use, browser support is also not good

9. history Object

  • history.go(delta); or history.go(str); jump forward/backward, or jump to nearest URL containing str page (may be forward or backward)

  • history.back(); history.forward(); simulate browser's back/forward buttons

  • history.length; Get number of history records, if 0 then means current page is first page user accessed after opening browser

Note: Can jump in history, but cannot get historical URLs (security restriction)

P.S. HTML5 provides history.pushState/history.replaceState functions, some people combine pushState + Ajax together called PJax technology, used to implement in-page refresh without jump web App, but pushState exists compatibility issues, need to introduce other support components

10. Client-Side Detection Technology

  1. Feature detection: Detect user browser's capability before writing code, so as to use different ways to achieve purpose, for example:

     if(typeof String.startsWith === 'function'){...}

  2. Quirk detection: Some browsers will produce unreasonable results when executing specific code, use only when certain quirk will interfere with script execution (the quirk here is actually referring to bugs in browser's JS implementation, for example properties that shouldn't be enumerable are enumerable, etc., quirks are relatively rare)

  3. User agent detection: Identify user browser's specific information by detecting UA string, but UA is deceptive

P.S. When need to use client-side detection technology, priority level is as described above, first do feature detection, if not work then quirk detection, UA detection is last resort, because UA detection is for specific model browsers, browser patches may make existing solutions invalid

Comments

No comments yet. Be the first to share your thoughts.

Leave a comment