JavaScript Browser Object Model BOM

Properties and methods for 1.window objects
The Window object has a series of properties, which are also objects themselves;

(1). Properties
attribute meaning
Closed is true when the window is closed;
Defaultstatus The default status information displayed in the status bar at the bottom of the window;
The Document object currently displayed in the Documents window;
An array of frame objects in the frames window;
History saves the URL of the recently loaded window;
The number of frames in the length window;
The URL in the current window of the location;
Name Window name;
Offscreenbuffering is used to draw new window content and copy existing content after completion, control screen update;
Opener Open the window of the current window;
The parent points to a window that contains another window (used by the framework);
Screen display-related information, such as height/width (in pixels;)
Self indicates the current window;
Status describes the temporary information that is caused by user interaction;
Top contains the topmost window of a particular window (used by the framework);
Windows indicates the current window, which is equivalent to self;

(2). method
Alert (text) Creates a warning dialog box, displaying a message;
Blur () removes the focus from the window;
Clearinterval (interval) clears the timer interval set before;
Cleartimeout (timer) clears the timeout set previously;
Close () closes the window;
Confirm () Creates a dialog box that needs to be used for confirmation;
Focus () moves the focal point to the window;
Open (Url,name,[options]) opens a new window and returns to the new Windows object;
Prompt (Text,defaultinput) creates a dialog box that requires the user to enter information;
Scroll (x, Y) scrolls to the position of a pixel in the window;
SetInterval (expression,milliseconds) calculates an expression at a specified time interval;
SetInterval (Function,millisenconds,[arguments]) invokes a function after a specified time interval;
SetTimeout (expression,milliseconds) calculates an expression after the timer is exceeded;
Stetimeout (Function,milliseconds,[arguments]) calls a function after the timer is exceeded;
Print () to bring up the printing dialog box;
Find () Brings up the Lookup dialog box;
Properties and methods under window can be called using window. Properties, window. method () or direct properties, methods ();
Window.alert (text) =alert (text);

2. System dialog box
The browser uses the alert ()/confirm () and Prompt () methods to invoke the System dialog box to display the information to the user;
The System dialog box is not related to the Web page displayed in the browser, nor does it contain HTML;
Their appearance is determined by the operating system and/or browser settings, not by CSS;
These methods open the dialog boxes are synchronous and modal, that is, the display of these dialog boxes when the code will stop running, and then close the dialog box after the code will resume execution;

123456789101112131415161718192021

// 弹出警告  alert(‘警告‘);// 确认和取消  if(confirm(‘请确定或取消‘){          // confirm()本身有返回值;    alert(‘您选择了确定‘);           // 按确定,返回true值;  })else{    alert(‘您选择了取消‘);           // 按取消,返回false值;  }// 输入提示框  var num = prompt(‘请输入一个数字‘,0);     // 第一个参数是文字提示;第二个参数是输入框模式填充值;并返回输入框中的值;  alert(num);                 // 将prompt()方法返回的值赋给变量num;并弹出;// 调用打印及查找对话框  print();                   // 打印; 弹出浏览器打印窗口;  find();                   // =>boolean;页面有匹配的查找内容返回true;相对于Ctrl+F;// 状态栏  defaultStatus = ‘状态栏默认文本‘;       // 浏览器底部状态栏初始默认值;  status = ‘状态栏文本‘;            // 浏览器底部状态栏设置值;

3. New Window (open ())

//Use the window.open () method to navigate to a specific URL, or to open a new browser window;
//It receives four parameters:
//(1). The URL to load;
(2). window's name or window target;
//(3). a specific string;
//(4). A Boolean value that indicates whether the new page supersedes the currently loaded page in the browser record;
Open (' www.baidu.com ');//chrome-search://local-ntp/www.baidu.com; open failed; http://is required;
Open (' http://www.baidu.com ');//Create new page and jump to Baidu;
Open (' http://www.baidu.com ', ' search engine ');//New page opens the Baidu page and names the window; and does not jump automatically; and just refreshes that page when it is called again;
Open (' http://www.baidu.com ', ' _parent ');//Open Baidu on this page; ' _blank ' is to specify a new page to open;
//Third string parameter
Setting value description
Width value New window, not less than 100px;
Height value of the new window, not less than 100px;
Top Value The y-coordinate of the new window, not a negative value;
The x-coordinate of the new window of left value, cannot be a negative value;
Location Boolean Displays the address bar in the browser window, and the default values for different browsers are different;
MenuBar Boolean whether the menu bar is displayed in the browser window, default to No;
Resizable Boolean to change the size by dragging the border of the browser window;
ScrollBars Boolean If the page content does not display, scroll bar is displayed; default no; The
Status Boolean displays the status bar in the browser window, default no;
Toolbar Boolean whether the toolbar is displayed in the browser, default no;
Fullscreen boolean browser window is maximized; IE support only;
Open (' http://www.baidu.com ', ' Baidu ', ' Width=400,height=400,top=200,left=200,toolbar=yes ');

The open () itself returns the Window object
var box = open (); Returns a Window object and opens a new blank page;
Box.alert ("); It then specifies that the open () returned object opens the new page of the popup window;

Word Window Operation parent window
Document.onclick = function () {//Click the Docuement object in a new window;
Opener.document.write (' child window let me output! '); /At this time the parent window generating it generates text content;
}

4. Location and size of the window

1234567891011121314

(1).窗口的位置// 用来确定和修改window对象(浏览器窗口)相对于屏幕的位置:// IE+Safari+Opera+Chrome都提供了screenLeft和screenTop属性,// Firefox提供了screenX和screeY属性;// 他们分别表示窗口看相对于屏幕左边和上边的位置;  // 确定窗口的位置=>IE  alert(screenLeft);              // 浏览器左侧离屏幕的距离;// 确定窗口的位置=>Firefox  alert(screenX);                // 浏览器左侧离屏幕的距离;// 跨浏览器的方法  var leftX = (typeof screenLeft == ‘number‘) ? screenLeft : screenX;  // 判断检测的screenLeft是否是数值,若是则使用screenLeft的值,否则使用screenX的值;

12345678910111213141516171819202122232425

(2).窗口的大小// 检测浏览器窗口本身及边框的尺寸:outerWidth和outerHeight;  alert(outerWidth);  alert(outerHeight);// 检测页面大小属性:innerWidth和innerHeight;  alert(innerWidth);  alert(innerHeight);// PS:IE没有提供当前浏览器窗口尺寸的属性; 在DOM中有提供相关的方法;// 在IE及其他浏览器中,提供了:document.documentElement.clientWidth和document.documentElement.clientHeight;来保存页面窗口的信息;// PS:在IE6中,上述属性在标准模式下才有效;如果是怪异模式,就必须通过document.body.clientWidth和document.body.clientHeight;// 如果是Firefox等浏览器,直接使用innerWidth和innerHeight;  var width = window.innerWidth;        // 这里要加window,因为IE会无效;  var height = window.innerHeight;  if(typeof width != ‘number‘){         // IE6浏览器    if(document.compatMode == ‘CSS1Compat‘){ // 判断是IE6标准模式;使用documentElement;      width = document.documentElement.clientWidth;      height = document.documentElement.clientHeight;    }else{                  // 否则是IE6非标准模式;使用body;      width = document.body.clientWidth;      height = document.body.clientHeight;    }  }  // PS:以上方法可以通过不同浏览器取得各自的浏览器窗口可视部分的大小;  // document.compatMode可以确定页面是否处于标准模式;

1234567

// 调整浏览器位置;  moveTo(0,0);                 // 移动到(0,0)坐标;IE有效;  moveBy(10,10);                // 向下和向右分别移动10px;IE有效;// 调整浏览器大小  resizeTo(200,200);              // 调整大小;  resizeBy(200,200);              // 扩展收缩大小;

5. Intermittent calls and timeout calls
1//JavaScript is a single-threaded language, but it allows you to schedule code to execute at a specific time by setting a time-out value and an interval period.
2//timeout: Executes the code after the specified time;
3//Interval value: Executes the code once every specified time;

123456789101112

// 超时调用使用window对象的setTimeout()方法;// 它接受两个参数:要执行的代码和毫秒数;  setTimeout(function(){            // 直接使用函数传入的方法,扩展性好,性能更加;    alert(‘警告!‘);  },1000);// 调用setTimeout()之后,该方法会返回一个数值ID,表示超时调用;// 这个超时调用的ID是计划执行代码的唯一标识符,可以通过它来取消超时调用;// 要取消尚未执行的超时调用计划,可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它;  var box = setTimeout(function(){       // 将超时调用的ID赋值给变量box;    alert(‘超时调用‘);  },1000);  clearTimeout(box);              // 将ID传入取消调用方法;

123456789101112131415161718

// 间歇调用使用window对象的setInterval()方法;// 它会按照指定的时间间隔重复执行代码,直至间歇调用被取消或页面被卸载;// 它接收的参数与setTimeout()相同;  var pox = setInterval(function(){    alert(‘间隔调用‘);  },1000);  clearInterval(pox);              // 取消间歇调用;// 利用setInterval()设置一个5秒的定时器;  var num = 0;                 // 设置起始秒;  var max = 5;                 // 设置终止秒;  setInterval(function(){    num++;                  // 递增num;    if(num == max){                    clearInterval(this);         // 取消间隔调用,this表示方法本身;一直跟踪间隔调用的ID;      alert(‘5秒后弹窗‘);    }  },1000);

1234567891011121314

// 一般使用超时调用来模拟间隔调用是一种最佳模式;// 因为使用间隔调用需要根据情况来取消ID,并且可能造成同步的一些问题;后一个间歇调用可能会在前一个间歇调用结束之前启动;  var num = 0;  var max = 5;  function box(){    num++;    if(num == max){      alert(‘5秒后弹窗‘);    }else{      setTimeout(box,1000);          // 隔1秒之后再次执行一个超时调用;    }  };  setTimeout(box,1000);              // 执行定时器;   // PS:在使用超时调用时,没必要跟踪超时调用ID,因为每次执行之后,如果不再设置另一个超时调用,调用就会自动停止;

JavaScript Browser object Model BOM