Edit again on 20160115

One 、window object

Dual roles

  • JS Access to the browser window interface
  • ECAMAscript Stipulated Global object

1. Global scope

All declared in global scope Variable 、 function Will become window Properties and methods of objects

delete The difference between

  • Directly in window Properties defined on objects can delete, return true
  • Global variables cannot pass through delete Operator delete ([configurable] = false), return false
  • IE<9 In the use of delete Delete window Property will throw an error

Access the difference between undeclared variables

Accessing undeclared variables throws an error , But through inquiry window Object to know whether an undeclared variable exists

oldValue; // Throw an error 
window.oldValue; // return undefined

2. Window relationships and frames (frames)

A little

3. window position

  • IE、Opera、Safari、Chrome:::


  • Firefox、Safari、Chorme:::


Cross browser to get the position of the window relative to the left and top of the screen

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


  • IE、Opera: Without browser toolbar , namely

    If window Objects are outermost objects , And the browser window is close to the top of the screen , be topPos= The height of the toolbar
  • Firefox、Safari、Chorme: Contrary to the above , With toolbar


  • IE、Opera: Returns the current frame Coordinates relative to the screen
  • Firefox、Safari、Chorme: Always return... For each frame in the page top.screenX and

    top.screenY value


  • But it is of no damn use , The above method can't get the accurate coordinate value of the window across browsers ...

Move the window

moveTo(x, y); // Parameters : New location x、y coordinate 
moveBy(x, y); // Parameters :x、y Pixels moving in the direction
  • These two methods may be disabled by the browser , stay Opera and IE 7( And higher ) The default is

    Is disabled .
  • Not for frameworks , Only for the outermost window Object use .

4. Window size ( What's the solution ?)

Get pages across browsers viewport Size

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){ // Determine the rendering mode adopted by the current browser
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;

Change the window size

  • These two methods may be disabled by the browser , stay Opera and IE 7( And higher ) The default is

    Is disabled .
  • Not for frameworks , Only for the outermost window Object use .

5. Navigate and open windows

// Parameters :URL、 Window target 、 Window properties 、 Whether to replace the Boolean value of history
// Returns a reference to the new window , It can be resized or moved
// For closing window.open() Open window
// Close the pop-up itself wroxWin.close();
alert(wroxWin.closed); // true
// After the pop-up window closes , The reference to the window is still there , Can only be used to detect its closed attribute

New window opener attribute

  • Point to open it ( call window.open()) The original window object of
  • Set to null Indicates that the new window does not need to communicate with the original window , Once the connection is cut off , Can't recover

Pop up screen program

var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
blocked = true;
} catch (ex){
blocked = true;
if (blocked){
alert("The popup was blocked!");
  • If the browser has built-in shielding program to prevent pop-up windows , be window.open() return null
  • Browser extensions or other programs block pop ups , be window.open() Throw an error

6. Timeout calls and intermittent calls 、 System dialog

A little

Two 、location object

Save current document information 、 Be able to make URL Parse into separate fragments

window.location == document.location; // true

1. Query string parameters

function getQueryStringArgs(){
// Get the query string and remove the leading question mark
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
// The object that holds the data
args = {},
// Get everything
items = qs.length ? qs.split("&") : [],
item = null,
name = null,
value = null,
// stay for Use in loop
i = 0,
len = items.length;
// Add each item to... One by one args In the object
for (i=0; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]);
if (name.length) {
args[name] = value;
return args;

2. Position operation

  • Set up location.href( modify location Other properties of can also change the current page , Generate history , except hash The external pages will be replaced with new ones URL Reload )
  • location.replace("newHref") Change of position , But it doesn't generate history , You can't go back
  • location.reload() If the page doesn't change , Overload from the browser cache , To force overloading from the server, use location.reload(true). Due to network delay or system resource ,reload() Later code may not execute , So it's better to reload() On the last line of code

3、 ... and 、 navigator object

Can be used to detect browser types

Test plug-in

  • Not IE browser -plugins Array (refresh() Method )
  • IE browser -ActiveXObject type ,COM Object identifier

There is a big difference between the two methods of detecting plug-ins , A typical approach is to create a detection function for each plug-in

// Test plug-in ( stay IE Invalid in )
function hasPlugin(name){
name = name.toLowerCase();
for (var i=0; i < navigator.plugins.length; i++){
if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){
return true;
return false;
// testing IE Plug in
function hasIEPlugin(name){
try {
new ActiveXObject(name);
return true;
} catch (ex){
return false;
// Detect... In all browsers Flash
function hasFlash(){
var result = hasPlugin("Flash");
if (!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
return result;
// Detect... In all browsers QuickTime
function hasQuickTime(){
var result = hasPlugin("QuickTime");
if (!result){
result = hasIEPlugin("QuickTime.QuickTime");
return result;

Register handler

( incomprehension )

Four 、screen object

5、 ... and 、history object

Developers don't know what users have browsed URL, But it can be done without knowing history URL In this way, we can move forward and backward

go(); // Parameters : An integer value 、 character string , Passing a string jumps to the nearest position in history that contains the string 

length attribute

BOM(JavaScript Take notes ) More articles about

  1. JAVASCRIPT Take notes ------- Chapter viii. browser BOM object

    8.1 window object -- Represents an instance of a browser Any variable declared in the global scope . Functions will become window Properties and methods of objects , And it directly defines window The difference between the properties of objects is   window.xxx Can pass ...

  2. JAVASCRIPT Take notes ------- The fifth chapter Reference type

    One .Object type 1.1 How it was created ①new keyword : var person = new Oject(); ② Given a direct quantity : var person = { name : "zhangsan& ...

  3. DOM(JavaScript Take notes )

    One . Node hierarchy 1.Node type if (someNode.nodeType == 1){ // For all browsers alert("Node is an element."); } N ...

  4. Function expression (JavaScript Take notes )

    Function declaration characteristic : Function declaration promotion ( The parser reads the function declaration before executing the code , And make it available before executing any code , It means that you can put the function declaration after the call statement ) function functionName(arg0,arg1) ...

  5. javaScript Take notes -- Best practices

    1. Maintainability <1> What is maintainable code (1) Comprehensibility (2) Intuitiveness (3) Adaptability (4) Extensibility (5) Debuggability <2> Code conventions (1) Readability --- Annotate appropriately [ Functions and squares ...

  6. javascript Take notes : Logic and logic or

    Logic and sum or Logic and When && Both operands are Boolean values , it , Also for true Only then true. Different from other strongly typed languages ,javascript Logical and pre and post operands can be applied to any type . and ...

  7. JAVASCRIPT Take notes -------JSON And AJAX

    json object —— grammar Simple values : And JS The same grammar , Can be a string , The number , Boolean value ,null: But does not support undefined object : Complex data type , Represents an ordered set of key value pairs , The value of a key value pair can be simple data , It can also be complex data ...

  8. JAVASCRIPT Take notes ------- Chapter ten DOM object

    10.1.1 node type -- except IE Outside All browsers can access this type :JS All node types in inherit from Node type nodeName And nodeValue   If it's an element that nodeName Mediator ...

  9. javascript Take notes ------- Chapter four Variable 、 Scope and memory issues

    First JavaScript Variables in are divided into basic types and reference types . The basic type is a simple data segment stored in stack memory , Reference types refer to objects that are stored in heap memory . 1. Parameter passing javascript All parameters in are passed by values ...

Random recommendation

  1. [JS]jQuery,javascript Get the height and width of the page

    [JS]jQuery,javascript Get the height and width of the page, the width of the visible area of the page : document.body.clientWidth Page visible area high : document.body.clientHeigh ...

  2. VB.net Special grammar of ( The difference in C#.NET)

    1: Introduce namespace (Imports) Imports System.Exception Imports System.Data.SqlClient Imports System.Security.Cry ...

  3. Five best Linux Download Manager recommendation

    Reading guide new Linux User from Windows One of the difficulties in switching over is , Find a good download manager . If you are or have been Windows user , Maybe familiar with Internet Download Manager (IDM). Download Accelerator Plus(DAP) And so on ...

  4. Java StringTokenizer Split string

    except String Of itself split Method ,JDK It has been provided for a long time StringTokenizer This class splits strings : however , Because regular expressions and String It has more and more functions ,StringTokenizer Has been ...

  5. Mac OS X In architecture Python Scientific computing environment

    Experience ( Like this journal :http://blog.csdn.net/waleking/article/details/7578517). They recommend Mac Ports This software is used to manage and install all the installation packages . According to this ...

  6. Linux Common command summary and usage ( One )

    Recently started to learn Linux, But because I didn't touch it before , All right, let's start with Linux Write down the commands commonly used in , Convenient for later use . 1. land adopt secureCRT/xshell/ssh And so on Linux (1)# ...

  7. hello Kotlin!

    It's said that Gu dad is going to Kotlin As a result of Android First level language developed , Scared me to write a “Hello Kotlin!” It's overwhelming ! Kotlin By JetBrains  Company development language , And it's open source . and JetBrains ...

  8. 2014.8.23 Research Meeting Report

    Dear All: It was good talk yesterday. However, I want to emphasize that, finally it is the *work* an ...

  9. Packet for query is too large (5,145 &gt; 1,024). You can change this value on the server by setting the &#39;max_allowed_packet&#39; variable.

    error In the use of Mybatis generator Prompt when MySQL Write too large Packet for query is too large (5,145 > 1,024). You can change ...

  10. Use Zabbix Of SNMP trap Monitoring type an example of monitoring device

    This paper takes the monitoring equipment of Green League as an example . 1. Log in to the management system of the monitored device , To configure snmptrap The address to zabbix Server or proxy server . snmptrap The address is also called a trap . 2. Verify if it can be used in zabbix Server or proxy server ...